Back to Motion Prompt examples
Motion graphics moves · #09
Easing
Motion speeds up and slows down instead of moving at one speed. Two squares cover the same distance in the same time: the top one at constant speed, the bottom one eased.
Motion polisheasingease-in-outcubic-bezierlineartimingcurveacceleration
Full motion specification
How the movement works
Use it on any move, scale or rotation so the motion accelerates and decelerates instead of looking mechanical.
- 01One round trip per 4.7 s. Two 62 px squares (radius 16) travel 316 px horizontally: out at 0.2–1.75 s (1.55 s), hold 0.8 s, back at 2.55–4.1 s.
- 02Top (constant): linear motion; shape and colour never change.
- 03Bottom (eased): cubic-bezier(.86, 0, .14, 1). Slow start, very fast middle, slow stop.
- 04The bottom square stretches horizontally up to 1.5× and flattens to 0.8× in proportion to speed (speed ÷ 3.6, clamped to 0–1).
- 05Behind it: 3 speed lines (up to 150 px × 0.8–1.25) and 4 ghost copies lagging 0.035 s each.
- 06Each rail shows 12 dots marking positions at equal time intervals (evenly spaced on top, bunched at both ends below).
Prompt
Add easing to this move: ease-out, slowing down as it stops.