Back to Motion Prompt examples
Motion graphics moves, part 2 · #01
Anticipation
Pulls back briefly before moving forward. A square character pulls back against its direction of travel, squashes to wind up, then shoots forward.
Motion techniquesanticipationwind-upsquashcharacterjumpdashanimation-principle
Full motion specification
How the movement works
Use it just before a jump, dash or launch to give the move build-up and weight.
- 01One move per 2.35 s (twice per 4.7 s: left to right, then right to left). A coral rounded square (86 px, radius 24) with a white arrow. It starts 108 px from the edge; the floor is at y = 178.
- 02Wind-up: 0.2–0.95 s, quadratic ease-in-out. It backs off 44 px against the direction of travel, squashes to 1.22 wide × 0.76 tall and leans back 0.18 rad.
- 03Launch: 0.95–1.38 s (0.43 s). From the backed-off position to the far end with backOut (s = 1.1), a slight overshoot. In the first 60% of the move it stretches up to 1.55 wide × 0.72 tall (half sine) and leans forward 0.08 rad.
- 04Landing: from 1.38 s, width and height wobble in opposite directions by 0.13·e^(−7t)·sin(17t).
- 05At launch, three dust puffs at the start point (gone within the first 70% of the move) and three yellow speed lines (width 8) behind it.
Prompt
Add anticipation before the button shoots off to the right: pull back slightly for 0.3 s, squash, then go.
