Flip

Full motion specification

How the movement works

Use it for two things that are sides of one another: question and answer, before and after.

1. 01A card (300 × 156, radius 22). Front (blue, Q) ⇄ back (yellow, A), 2.35 s each.
2. 02Rotates 180° at 0.45–1.5 s (1.05 s) with backOut (s = 1.5), going slightly past 180° and coming back.
3. 03Card width = original width × |cos θ|. The face artwork is swapped as it passes 90°.
4. 04Perspective: the card is drawn in thin vertical slices whose height varies by up to ±20% × sin θ from one side to the other (far side shorter, near side taller).
5. 05During the turn it scales up 8% and lifts 6 px on a sine curve; a dark overlay with opacity 0.34 × |sin θ| shades the face. An elliptical shadow sits on the floor.