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.
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
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Anchored Headline with Speech Bubbles — testimonials that arrive around a pinned statement
## Goal
Build a testimonial section where **a short, loud headline pins itself to the middle of the
screen** and **individual quotes arrive around it, one at a time, out of the left and right
margins**, as you scroll through a deliberately over-tall track. Scroll back up and the field
empties again.
No carousel, no arrows, no dots. Nothing to click. The reader gets the statement, the voices
accumulate around it while they read it, and then it is over.
## Tech
Vanilla HTML/CSS/JS with ES module imports: `gsap` plus the `ScrollTrigger` plugin, and `lenis`
for smooth scroll. No other plugins, no framework.
```js
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.