Back to Motion Prompt examples
Landing page & web effects · #02
Fade-in on scroll
Elements fade in as they scroll into view. As the page scrolls, the heading, the cards and the body text each rise into place and fade in when they enter the view.
Scroll effectsfade-inscroll-revealreveal-on-scrollintersection-observeraosentrancescroll
Full motion specification
How the movement works
Use it on a long landing page to bring content in piece by piece as the reader scrolls.
- 01Scroll: 0→95 px at 0.35–1.0 s, 95→200 px at 1.5–2.1 s, 200→0 at 3.2–4.4 s (all cubic ease-in-out).
- 02Trigger line at 85% of the viewport height (143 px from the top). An element fires when its top edge passes above it (the Intersection Observer idea).
- 03After firing, over 0.7 s: opacity 0→1 and offset 28 px below → 0 (cubic ease-out).
- 04Three elements: the heading (172 px down the page), a row of three cards (206 px) and body text (334 px), all below the view at first. The cards in the row appear together.
- 05When an element leaves the bottom of the view on the way back up, it is reset out of sight and plays again next time.
Prompt
Fade in each section's heading and cards on scroll: up from 30 px below, over 0.6 s.