Content & Media Creation · iart-ai/motion-design-skills
animation-principles
This skill should be used when the user asks to "make this animation feel natural", "fix motion that feels stiff/floaty/cheap", "my animation looks robotic", "choose an easing curve", "how do I use the Graph Editor", "add overshoot or bounce", "Easy Ease isn't enough", "make snappy motion", "pick a duration for this transition", "stagger a list animation", "sync animation to a beat", or "review motion for good timing". It is the tech-agnostic foundation for deciding how something should move.
L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Tech-agnostic foundation: Independent of any specific tech stack, producing "concrete numbers" directly handed off to any implementation—durations, cubic-bezier curves, stagger offsets, and spring configurations.
skills/animation-principles/SKILL.md
It does not pick a tech stack; it produces concrete numbers (durations, cubic-bezier curves, stagger offsets, spring configs) ready to hand to any implementation.
What this accomplishes: Breaks down "feeling right" into transferable parameters, enabling this knowledge to be consumed via Remotion, GSAP, CSS, or manual keyframing—which is why it is cross-referenced by other skills in this pack (composition, brand guidelines, creative briefs).
Establish the Three Pillars (Emotional Intent / Visual Storytelling / Motion Craft) before deciding on any numbers; skipping this step leads to motion that is "technically correct but emotionally dead."
skills/animation-principles/SKILL.md
Every piece of motion should answer three questions *before* you pick a duration or curve.
What this accomplishes: Acts as an upfront prerequisite gate for all downstream numeric decisions; corrects the common inverted habit of "asking for duration first."
Use the Three-Layer Motion Model (Primary / Secondary / Ambient) to explain "flatness," explicitly aligning with Hero / Support / Texture from the judgment-layer skill.
skills/animation-principles/SKILL.md
Flat motion = only the main thing moves. Believable motion runs three layers at once:
What this accomplishes: Pinpoints "only the primary element moving" as the root cause of flatness and provides synonymous mappings to prevent terminology friction; shot-composition projects these three roles onto the Z-axis as parallax speeds.
Position easing as the highest-leverage factor: reserve linear exclusively for continuous loops, mandate acceleration/deceleration for discrete events, and provide specific curves across entrance, exit, displacement, and brand categories.
skills/animation-principles/SKILL.md
Linear motion reads as robotic. Reserve `linear` for continuous loops (spinners, marquees, infinite scroll) only.
What this accomplishes: Directly addresses the frequent mistake of "using linear for entrances"; subsequently provides 4-decimal precision curves ready for copy-pasting.
Divide durations into four tiers based on element scale (micro-interactions at 100-200ms → cinematic shots at 800-2000ms), and scale duration proportionally when distance or area changes.
skills/animation-principles/SKILL.md
Distance and size scale duration.
What this accomplishes: Provides quantitative rules against "applying the same duration to all elements" (e.g., adding 30-50% duration when distance or area roughly doubles), ensuring elements of different scales maintain a nearly constant perceived velocity.
Utilize staggering and two variants of the 1/3 rule to prevent elements from "popping in all at once"—40-80ms for lists, 20-40ms for dense grids, capped by an overall 600-800ms ceiling.
skills/animation-principles/SKILL.md
Never reveal a list, grid, or group all at once — it reads as a single flat event. Stagger each child's start.
What this accomplishes: Breaks down "rhythm" into computable parameters (switching to distance-based stagger if count × offset exceeds the cap); the "concurrency" variant of the 1/3 rule is also cited by brand guideline skills to justify stagger limits.
Use a diagnostic table to reverse-map symptoms to root causes (stiff / floaty / cheap / mechanical), turning reviews into actionable fix checklists.
skills/animation-principles/SKILL.md
- **Feels stiff/robotic** -> using `linear` or symmetric easing on an enter; switch to ease-out.
What this accomplishes: Users usually just say "it feels off"; this table converts qualitative adjectives into causes and prescriptions, representing another facet of the design philosophy used in client-revisions for translating vague feedback.
Map the manual keyframing path to After Effects Graph Editor: F9 Easy Ease is merely a 33% symmetrical baseline that must be crafted into an asymmetrical curve.
skills/animation-principles/SKILL.md
`F9` (Easy Ease) is only a 33% symmetric starting point — make it asymmetric.
What this accomplishes: Grounds theoretical principles into practical AE operational craft (Speed Graph shapes, influence values, overshoot/anticipation/bounce recipes), covering both mathematical curves and manual keyframing routes.
2Core Capabilities
01Named cubic-bezier library (entrance/exit/displacement/overshoot families + Material standard curves + iOS approximations)
02Duration tier table (micro-interactions / UI transitions / hero elements / cinematic shots) + distance-duration scaling rules
03Stagger and rhythm: 40-80ms for lists, 20-40ms for grids, total duration caps, and distance-based staggering
04Spring vs. duration-based selection (springs for interruptible interactions, duration + curve for timeline-locked sequences)
05Physics-intuition triad: anticipation, follow-through / overlapping, and arcs
06Beat syncing (BPM grid quantization) and visual pulse configuration in the absence of music
07AE Graph Editor manual craft: Speed/Value Graph, influence/velocity values, step-by-step recipes for overshoot/anticipation/bounce, and decaying bounce expressions
08Numeric adaptation of the 12 Principles of Animation to screen motion (ranked by UI relevance)
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| package | @react-spring/web（示例 spring 预设值，仅作参考实现） |
| package | SwiftUI / iOS 动画 API（示例 spring 写法，跨平台参考） |
| package | After Effects Graph Editor（手工缓动的落地工具） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
- SKILL.md: Pure prompt instructions and rule text, without script execution or external impacts
Audit Notes: Pure instruction/numeric methodology: contains no scripts, no executables, no outbound network calls, no credential access, and no local disk writes. The only "external elements" are code snippets (@react-spring/web, SwiftUI, AE Graph Editor operations), which belong to user or implementation-side actions and do not constitute skill runtime behavior. Key considerations are conversational alignment (recommended curves/durations anchor aesthetic tone) and the need to calibrate domain values against specific project requirements.
5Second-Pass Verification
- [ok] SKILL.md 的曲线值是否与 reference 一致（防两处打架） — SKILL.md 的 Quick reference（Enter `cubic-bezier(0.16, 1, 0.3, 1)`、Exit `(0.7, 0, 0.84, 0)`、Move `(0.65, 0, 0.35, 1)`、Branded `(0.34, 1.56, 0.64, 1)`）与 easing-curves.md 的分族库同型；但 reference 另列一套 Material 标准曲线（如 `0.2, 0, 0, 1`），两套体系并存且文档未给裁决规则——属文档分层而非矛盾，已在 risks 记录。
- [ok] 是否真的没有脚本或可执行资产 — 清点后目录内只有 5 个文件（SKILL.md、3 本 .md reference、1 个 0 字节 README），无 .js/.sh/.py/.json。
- [ok] 「技术无关」声明是否成立（有没有偷偷选边） — 自带代码示例覆盖 CSS 曲线、Framer Motion、react-spring、SwiftUI 与 AE 手工关键帧，且 SKILL.md 明确说「不选技术栈」；示例之间是并列参考，无强制依赖。
- [ok] 交叉引用是否指向真实存在的上游（本 pack 内） — 被引的 motion-art-direction（Hero/Support/Texture）与 shot-composition 都在同一仓库 skills/ 下存在；引用只做术语对齐，不要求安装额外 skill。
- [unlocatable] 「距离或面积翻倍加 30-50% 时长」等缩放系数的来源 — 这是经验规则，pin 仓库内无出处、无测量脚本、无数据文件。作为文档声明记录，不当作已核事实；实际项目应以感知测试校准。
6Verdict & Scenarios
Best for: Suitable for any "how should this move" scenario: fixing stiff/floaty/cheap motion, selecting entrance/exit curves and durations, staggering lists, deciding whether to use springs, syncing motion to musical beats, and establishing a unified motion language across teams. Also serves as the downstream theoretical foundation for other skills (composition, brand motion guidelines, creative briefs).
Not for: Not suitable for: 1. Scenarios requiring concrete implementation code or components (use gsap-web, remotion-video, or web animation skills; this skill stops at the parameter layer); 2. Scenarios requiring visual art direction or brand identity decisions (use the judgment layer in motion-art-direction); 3. Scenarios requiring platform engineering details like encoding/decoding or render pipelines (pertains to after-effects, remotion, etc.); 4. Compliance contexts requiring authoritative academic or industry citations for all figures, as these represent empirical baseline values.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload animation-principles.tar.gz
sha256:
Option B · Copy Guide for Agent069d807fa45f71f5…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3c129f769d.