Accordion

Full motion specification

How the movement works

Use it for FAQs or long details where people scan the headings and open only what they need.

1. 014.5 s cycle on a 542×191 card. Three headings (494 wide, 34 tall, radius 8, gap 6) with a down chevron at the right.
2. 02The cursor reaches the first heading at 0.95 s and clicks at 1.0 s and 3.3 s.
3. 03Open amount ex: 0→1 over 1.0–1.35 s with easeInOutCubic, then 1→0 over 3.3–3.62 s.
4. 04The first row grows from 34 to 92 tall (+58·ex) and pushes the rows below down; its two content lines are clipped to the row and fade in with opacity ex.
5. 05While open, the chevron rotates 180°·ex, the border turns light blue and the heading blue.