Claude
d4b3cf1b85
Installed via npx skills add iart-ai/motion-design-skills. Kept the project's existing remotion-video skill unchanged. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01E35uEC1pGu95tUpM4b815L
4.4 KiB
The 12 principles of animation, applied to motion graphics
The Disney principles, translated to UI/motion-graphics with concrete numeric examples. Ordered by how often they matter in screen motion (most-used first).
1. Slow in and slow out (easing)
The most important. Objects accelerate and decelerate; they don't snap to constant velocity.
Example: a card sliding in from the right travels 600px over 450ms with cubic-bezier(0.16, 1, 0.3, 1) (easeOutExpo) — fast at first, settling gently into place.
2. Timing
Number of frames / duration defines weight and mood. Fast = light/urgent, slow = heavy/calm.
Example: a 24px notification badge pops in over 150ms; a full-screen onboarding panel slides over 500ms. Same easing, different timing communicates different mass.
3. Follow-through and overlapping action
Parts don't all stop at once; trailing elements continue and settle after the lead.
Example: a hero card lands at 400ms; its drop-shadow finishes settling at 450ms, its title text at 460ms, its subtitle at 500ms — a 40-60ms cascade rather than a synchronized stop.
4. Anticipation
A small opposite move telegraphs the main action.
Example: a "send" button scales to 0.95 over 80ms (the dip), then springs to 1.0 and the message launches. Or a modal dips y: +8px for 60ms before sliding up — the recoil makes the launch feel powered.
5. Staging (focal direction)
Direct attention to one thing at a time; the motion makes the important element unambiguous.
Example: dim background to 40% opacity over 200ms while the target element scales 0.9 -> 1.0 and brightens — the eye has exactly one place to land.
6. Arcs
Natural movement follows curved paths, not straight lines.
Example: a floating action button moving from bottom-right to center-screen animates along a quadratic bezier path instead of a diagonal line; the slight arc reads as organic rather than mechanical.
7. Squash and stretch
Volume-preserving deformation conveys impact and elasticity.
Example: a bouncing dot stretches scaleY 1.2 / scaleX 0.85 at the top of its arc and squashes scaleY 0.8 / scaleX 1.15 on landing impact. Keep the product of scales ≈ 1 to preserve perceived volume. Use sparingly in product UI; common in playful loaders and mascots.
8. Exaggeration
Push the key pose beyond literal realism for clarity and appeal.
Example: a success checkmark overshoots to scale 1.15 before settling to 1.0 (using easeOutBack 0.34, 1.56, 0.64, 1); the overshoot makes success feel emphatic.
9. Secondary action
A subordinate motion supporting the primary one.
Example: while a panel slides up (primary), its icon rotates 90deg and a subtle particle shimmer fades in (secondary) — supporting, never competing for attention.
10. Straight-ahead vs. pose-to-pose
Pose-to-pose (define keyframes, interpolate between) is the norm for choreographed motion graphics; straight-ahead (frame-by-frame, momentum-driven) suits chaotic/organic effects like particles, smoke, and procedural noise.
Example: a logo build is pose-to-pose (start pose, end pose, eased between); a confetti burst is straight-ahead/physics-driven.
11. Solid drawing (depth and weight)
Maintain consistent perspective, volume, and lighting so motion respects 3D space.
Example: when a 2.5D card tilts on hover (rotateY 8deg), its shadow shifts and lengthens consistently and a subtle specular highlight sweeps — selling that it's a solid object catching light, not a flat sticker.
12. Appeal
The composite charm — clean silhouettes, confident timing, no jank. Achieved by applying the other 11 with restraint: correct easing, deliberate timing, follow-through, a touch of overshoot, and removing anything that competes.
Example: a polished toggle = 180ms easeOutCubic slide, a 40ms follow-through on the label color, a hairline overshoot on the knob — small, coherent, satisfying.
Practical priority for screen motion
For most product/web work, nailing slow-in/slow-out, timing, follow-through, anticipation, staging, and arcs delivers 90% of the quality. Squash/stretch, exaggeration, and secondary action add personality where the brand calls for it.
Apply the twelve principles with restraint and UI motion reads as intentional. Built by iart.ai — the AI motion agent for editable, on-brand motion graphics.