anymotion-agent/anymotion/motion-graphics

Motion Graphics

Everything below is craft that transfers across tools — After Effects, CSS, Canvas, WebGL, Rive, Lottie. Read the section you need; the numbers are conventions with reasons attached, not arbitrary.

If you are building a SaaS product explainer specifically, use the saas-explainer-motion skill instead — it carries this knowledge plus a full engine and component library.

The one idea underneath all of it

Motion is not decoration, it is grammar. Every animated frame answers three questions the viewer is asking without knowing it: what changed, where did it come from, and how do I feel about it. Position and opacity answer the first two. Timing answers the third, and timing is where amateur work fails.

A card that scales up in 120ms with a sharp stop reads as snappy, mechanical, confident. The same card over 600ms with a soft landing reads as heavy, premium, deliberate. Identical geometry. Different meaning. So the question is never "should this animate" but "what should this motion say".

The corollary: if a motion says nothing, cut it. Animation that only exists to prove the developer can animate adds latency and cognitive load. The default answer to "should this move" is no; earn the yes.

Timing

Duration is the single highest-leverage variable. Get it wrong and no amount of easing rescues the shot.

Two rules that do most of the work:

Distance governs duration. A 40px nudge and a 900px sweep cannot share a duration. Big travel over a short time strobes; small travel over a long time crawls. Duration should scale sublinearly with distance — roughly with its square root, because perceived speed is not linear. Doubling the distance means roughly 1.4× the time, not 2×.

Exits are faster than entrances. An entrance is teaching the viewer where something lives; an exit is only confirming it is gone. Matching them makes dismissals feel sticky.

Below ~100ms motion stops being perceived as motion and becomes a jump cut — useful when you want instant, wasted when you wanted flow. Above ~1s in interactive contexts the user has moved on and your animation is now in the way.

Easing

Easing is the distribution of that duration across the travel. Linear motion looks dead because nothing in the physical world starts and stops instantly.

The four families and what they read as:

• Ease-out (fast start, soft landing). Decelerating, like something arriving

under its own momentum. Default for entrances and for anything responding to a user action — the response begins immediately, which feels fast, then settles. cubic-bezier(0.16, 1, 0.3, 1) is a strong, opinionated ease-out.

• Ease-in (soft start, fast end). Accelerating away. Exits only. Never

use it for an entrance — the slow start reads as unresponsive lag.

• Ease-in-out (soft both ends). For motion that starts and ends on screen:

moves, resizes, camera pans. cubic-bezier(0.65, 0, 0.35, 1).

• Spring / overshoot (goes past, comes back). Adds physicality and

playfulness. Overshoot 2–8% for premium restraint, 10%+ for character. Wrong for anything conveying precision — a data value that overshoots looks like it changed twice.

Spring physics is parameterised by stiffness and damping rather than a duration, which is why spring-based motion feels alive and also why it's harder to choreograph — you don't know exactly when it ends. Use springs for interruptible, gesture-driven motion; use curves when you need to hit a beat.

Opacity is the exception. Fades read better close to linear; an eased fade looks like it hesitates. Standard practice: ease position and scale, keep opacity nearly linear, and let the fade finish before the movement so an entering element is fully solid while it's still settling.

The classical principles that still apply

Disney's twelve principles were written for character animation; roughly half transfer directly to graphics and interfaces. The ones that matter:

Squash and stretch — deformation along the axis of travel sells weight and speed. In graphics this is subtle: 2–5% scale on one axis during fast movement, released on landing. Volume should look conserved; stretching without thinning looks like a bug.

Anticipation — a small counter-move before the main move. A drawer that pulls back 4px before sliding out. The eye needs a moment to know where to look, and anticipation provides it. Overused, everything feels bouncy and slow.

Follow-through and overlapping action — parts don't stop simultaneously. A card lands, its shadow settles a beat later, its text catches up last. This single technique separates professional motion from flat motion more reliably than any other.

Slow in and slow out — this is easing, above.

Arcs — natural movement curves. Straight-line travel reads as robotic, which is exactly why a cursor moving in a straight line looks fake. Even a slight arc on a long move transforms it.

Secondary action — a supporting motion that enriches without competing. A button presses; the label dims fractionally. It must never pull focus.

Staging — direct attention to what matters. One idea per moment.

Exaggeration — push past literal reality. Real physics is often boring on screen; the goal is believable, not accurate.

Appeal — the shot should be pleasant to look at. Not a technique, a standard to hold yourself to.

Choreography: what moves, and when

One thing at a time. The most common failure in amateur motion is everything animating at once, so the eye has nowhere to land and the shot reads as noise. Build a hierarchy: primary element moves, supporting elements follow, background barely reacts.

Stagger is the workhorse. Animating list items with 30–60ms between each turns a wall of simultaneous movement into a readable sweep. Under ~20ms it looks simultaneous; over ~100ms per item the list feels slow and the last item arrives after the viewer stopped caring. Cap total stagger around 300–400ms — for a long list, stagger the first 6–8 items and land the rest together.

Overlap, don't queue. If element B starts only after A completely finishes, the sequence feels like a to-do list. Start B when A is 60–80% done. Motion should feel continuous, with energy passing between elements rather than stopping and restarting.

Direction carries meaning. Movement should honour spatial logic: a panel from the right returns to the right; a hierarchy expands downward; dismissal moves away from the user's attention. Breaking your own spatial model quietly disorients people.

Continuity: the hardest part

Continuity is what makes a sequence feel like one film rather than a slideshow.

Never let motion come to a dead stop before a change of scene. If everything eases to rest and then the scene cuts, the film flatlines for a beat. Overlap the outgoing motion with the incoming one so energy carries across the boundary.

Match cut / shared element. The strongest transition available: carry one element's geometry across the boundary so the viewer's eye tracks a single object rather than re-acquiring a new scene. A card in scene one becomes the panel header in scene two, arriving at the exact position it left. The discipline is that the handoff pose must be written once and shared — if the outgoing and incoming values are typed separately they drift, and the element jumps a few pixels at the cut.

Choosing a transition:

Change blindness is the trap: a change made during a large motion or a cut is often not seen at all. If something important changes, either change it on a still frame, or draw the eye to it first.

Camera

Treating the frame as a camera rather than a viewport unlocks the cinematic register.

Push in (slow scale up) builds intensity and signals importance. Pull out reveals context and releases tension — good for endings. Pan follows action. Parallax (background layers moving slower than foreground) creates depth cheaply and convincingly.

Camera moves should be slow and few. A push from 1.0 to 1.12 over 1500ms reads as confident. The same push over 400ms reads as a zoom lens jerk. If the camera moves in every shot, it stops meaning anything.

Lead the subject. Start the camera move 200–300ms before the thing it's following, so the frame feels anticipatory rather than reactive.

One maths trap when implementing zoom-to-point with transforms: CSS applies transform functions right-to-left, so with translate(...) scale(s) the translation is in unscaled units and centring a point requires x = s * (centre − point). The naive centre − point leaves the target badly off-frame at high scale.

Type in motion

Text is read, not just seen, so it obeys different rules.

Never animate individual letters of body copy. Per-letter animation is for short display text — a title, a word being emphasised. On a sentence it destroys readability, because reading requires stable word shapes.

Fade up plus a small rise (8–24px, never more) is the reliable default for a line of text. Large travel makes text unreadable in flight.

Hold long enough to read. Roughly 300ms of hold per short line minimum, and in practice: read it aloud at a natural pace; if you can't finish, it's too short. Text that leaves before it's read is worse than no text.

Line-by-line beats word-by-word for anything over a few words — stagger lines by 60–120ms.

Avoid animating properties that trigger text re-layout mid-motion (font-size, letter-spacing, width). Animate transform and opacity; they don't reflow and don't resnap the glyphs.

Numbers need tabular figures. A counter animating from 0 to 1,284 will jitter horribly as glyph widths change, unless you enable font-variant-numeric: tabular-nums. This one line fixes the most common "why does my counter wobble" complaint.

Shape and colour

Morph only when it is the same object in two states. Play → pause, hamburger → X, card → panel. Morphing unrelated shapes (an envelope into a rocket) is a party trick: the intermediate frames are meaningless because nothing is half-envelope. Cross-fade unrelated things instead.

Every intermediate frame must read as a plausible silhouette — scrub to the middle, because 0.5 progress is where morphs die.

Most convincing "morphs" are not path interpolation at all: rotating and translating a few rectangles, a clip-path with matching vertex counts, or a border-radius animation. Reach for real path interpolation last; it requires both shapes to have corresponding commands and point counts, and libraries exist (flubber, GSAP MorphSVG) precisely because that normalisation is hard.