Breadcrumbs

Full motion specification

How the movement works

Use it on sites with deep hierarchies to show where the page is and give a way back up.

1. 014.5 s cycle on a 542×191 card. At the top "Home › Courses › Web design" (in Japanese, 17 px): links blue, current page black and bold; a divider at y 46.
2. 02The cursor hovers "Courses" (underline 0.9–1.2 s) and clicks at 1.0 s.
3. 03Up amount: 0→1 over 1.0–1.25 s with easeInOutCubic. "› Web design" fades out and "Courses" becomes the current page (black, bold).
4. 04Content cross-fades from a detail page (title and text) to a list of three cards (158×118, with a landscape picture).
5. 05Back: the cursor moves onto the first card (blue outline 2.45–2.8 s) and clicks at 2.7 s; the detail page returns over 2.7–2.95 s.