Back to Motion Prompt examples
Landing page & web effects · #20
Page transition
An animation that bridges two pages. Clicking a card in the work list sweeps an orange panel across from the left; the URL changes and the panel exits to the right on the detail page. "Back to list" returns the same way.
Loading, navigation & ambient loopspage-transitiontransitionview-transitionsnavigationwipebarbaspa
Full motion specification
How the movement works
Use it on brand sites and portfolios to link one page to the next.
- 01Click on a card at 0.8 s. At 0.9–1.3 s a panel (orange, full viewport, logo in the centre) enters from the left and covers everything (cubic ease-in-out).
- 02At 1.3 s, while covered, the page and the URL in the address bar (/works → /works/02) switch.
- 03At 1.4–1.85 s the panel exits to the right (cubic ease-in-out).
- 04Click on "← Back to list" at 3.0 s: the panel enters at 3.1–3.5 s, the page switches at 3.5 s and the panel exits at 3.6–4.05 s.
- 05The panel covers the whole viewport, header included.
Prompt
Add a page transition: on link click, an orange panel sweeps across left to right and the next page appears.