Anchored Headline with Speech Bubbles
What it does
A tall section whose headline is pinned with `position: sticky` at the vertical centre while testimonial speech bubbles arrive around it, one at a time, out of the left and right margins. Each bubble is positioned in percentages of the track with `--x`/`--y` and carries its own ScrollTrigger fired by its own position (`top 78%`), so the visual order and the temporal order are the same datum: move a bubble in the HTML and its arrival moves with it. Bubbles enter from the side they live on with a `back.out(1.9)` landing, and `toggleActions: play none none reverse` empties the field on the way back up. The headline fades to 0.55 opacity across the track via a scrubbed tween, ceding focus without leaving. Below 760px the bubbles stop floating and stack under the headline. Smoothed by Lenis. The demo is dressed as a record label's press quotes: Anton SC + Azeret Mono, near-black with an acid-chartreuse section.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
To reproduce this animation in your own project, copy the prompt below into Claude Code, Cursor or any AI coding agent. The prompt is validated — it describes the exact structure, timing and easing, so the agent rebuilds the effect faithfully and you can then adapt colors, copy and layout to your design.
Prompt coming soon.