Back to Motion Prompt examples
Landing page & web effects · #05
Horizontal scroll
Scrolling down moves the content sideways. As the page scrolls down, the section holds still and four numbered work cards travel to the left.
Scroll effectshorizontal-scrollsidewaysscrolltriggerpingalleryportfolioscroll
Full motion specification
How the movement works
Use it to show work, case studies or products in a row inside a long vertical page.
- 01Scroll: 0→420 px at 0.3–3.0 s, 420→0 at 3.5–4.5 s (cubic ease-in-out).
- 02The heading "WORKS" scrolls away; the section reaches the top at 40 px of scroll and stays there.
- 03Cards: four at 200 × 112, gap 20, side padding 34. Horizontal travel = 34·2 + 200·4 + 20·3 − 511 = 417 px.
- 04Card x = start x − p × 417, with p = (scroll − 40) / 380: linear in scroll, no easing.
- 05The scrollbar thumb moves down while the cards move sideways.
Prompt
Turn the work section into a horizontal scroll: move the cards left as far as the user scrolls down.