Viral Hooks
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.

  1. 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.
  2. 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.
  3. 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.
  4. 04Landing: from 1.38 s, width and height wobble in opposite directions by 0.13·e^(−7t)·sin(17t).
  5. 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.