Back to Motion Prompt examples
Landing page & web effects, part 2 · #07
Back-to-top button
Appears lower down and returns you to the top. After scrolling down, a round arrow button appears at the bottom right; clicking it takes the page straight back to the top.
Scroll effectsback-to-topscroll-to-topbuttonnavigationfloating-buttonsmooth-scroll
Full motion specification
How the movement works
Use it on long pages such as blog posts, long landing pages or product lists, so readers can get back to the menu at the top.
- 01A 511 × 168 viewport. Scroll 0→300 px (to the bottom of the page) over 0.2–1.7 s, cubic ease-in-out. One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02Button: an orange circle at the bottom right (center x = 472, y = 138; radius 19; white up arrow; 10 px shadow blur). Between 80 and 140 px of scroll it fades in while rising 10 px (cubic ease-out).
- 03It is clicked at 2.6 s. While the cursor is on it, it darkens over 0.2 s (#FF5A2C → #D9431C).
- 04After the click the scroll goes 300→0 over 2.66–3.26 s (0.6 s, cubic ease-in-out); below 80 px the button fades out by the same formula.
Prompt
Add a back-to-top button to the article page: show it at the bottom right once the reader has scrolled a little, and scroll to the top in 0.6 s when clicked.