Back to Motion Prompt examples
Landing page & web effects · #06
Scroll snap
Scrolling settles exactly on the next section. After a small scroll, the page carries itself the rest of the way until the next section's top lines up with the top of the view.
Scroll effectsscroll-snapsnapfull-pagesectionscssmandatoryscroll
Full motion specification
How the movement works
Use it for a page that should read one full screen at a time, like slides.
- 01Each section is as tall as the viewport (168 px). The first is pale blue, the second navy.
- 02One snap per 2.4 s. At 0.45–0.85 s the user scrolls only 34 px (cubic ease-out).
- 03At 0.9–1.5 s the page moves the remaining 134 px by itself and lines up the next section's top (cubic ease-out).
- 04The second 2.4 s does the same upward, back to the first section (the behaviour of scroll-snap-type: y mandatory).
Prompt
Add scroll snap per section, so a small scroll lands on the top of the next section.