Back to Motion Prompt examples
Landing page & web effects · #04
Pinning
A section stays fixed while scrolling advances its content. A navy section stops when it fills the view; further scrolling steps the number and photo through 1→2→3, then the section scrolls on.
Scroll effectspinpinningscrolltriggergsapscroll-drivenstepsstorytelling
Full motion specification
How the movement works
Use it to walk through steps, features or a before/after in one screen.
- 01Scroll: 0→500 px at 0.3–3.0 s, 500→0 at 3.5–4.5 s (cubic ease-in-out).
- 02The section (168 tall, navy) reaches the top at 110 px of scroll and stays there for the next 300 px (a GSAP ScrollTrigger pin).
- 03Progress while pinned: p = (scroll − 110) / 300. A vertical line (124 long) on the left fills in orange with p.
- 04At p = 1/3 and 2/3 (±0.07, cubic ease-in-out) it moves to the next step: the number (46 px) rolls up 52 px and the photo (226 × 124) slides up 124 px.
- 05After 300 px the pin is released and the section scrolls up with the white section below it.
Prompt
Pin the three-step section and switch the photo and number one step at a time as the user scrolls.