Tabs

Full motion specification

How the movement works

Use it to show several related views in the same space and let people switch between them.

1. 014.5 s cycle on a 542×191 card. Three tabs at x 24, 114, 204, widths 70, 70, 100; a 2 px divider at y 50 and a 4 px blue underline.
2. 02The cursor clicks the second tab at 1.0 s, the third at 2.2 s and the first at 3.4 s.
3. 03Underline: position and width move to the new tab over 0.25 s from each click with easeInOutCubic (from the third back to the first it passes through the middle).
4. 04Labels: selected is blue and bold, others grey; the switch happens at 1.1, 2.3 and 3.5 s.
5. 05Content: the old panel fades out linearly in 0.2 s; 0.1 s later the new one fades in over 0.2 s while rising 8 px.