From dylantarre-animation-principles
Use when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
You can apply individual principles. Now learn to weave them together and understand their interdependencies.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
You can apply individual principles. Now learn to weave them together and understand their interdependencies.
Volume preservation is key. Faster motion = more stretch. The timing dictates the degree. A 2-frame anticipation needs less squash than a 6-frame one.
These are mirrors. Anticipation magnitude should roughly match follow through. Big wind-up = big settle. They create rhythmic bookends to any action.
Secondary actions must support staging, never compete. If staging says "look at the face," secondary action in hands should point attention there, not away.
Arcs aren't uniform speeds. Apply easing along the arc path. Spacing should bunch at start/end of the arc, spread in the middle.
Hybrid approach: Key poses first (pose-to-pose), then animate overlapping elements straight ahead. Best of both: structure with spontaneity.
Over-anticipation: When every action has massive wind-up, nothing feels spontaneous. Reserve big anticipation for big payoffs.
Competing secondary actions: Three things moving differently splits attention. Hierarchy matters - one leads, others support.
Uniform timing: Every action at 12 frames feels mechanical. Vary your timing: quick decisions, slow realizations.
Arc neglect in follow through: The main action arcs beautifully, then appendages move linearly. Everything arcs.
Physics: Squash/Stretch, Timing, Arcs, Slow In/Out Clarity: Staging, Solid Drawing, Anticipation Interest: Secondary Action, Exaggeration, Appeal Technique: Straight Ahead/Pose to Pose, Follow Through/Overlap
Animate a character sitting down:
Layer principles one at a time. Blocking first, then refinement passes for each principle category.