メニュー
Use when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/dylantarre/animation-principles --skill slow-in-out-masteryコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
SOC 職業分類に基づく
SKILL.md を表示中
| name | slow-in-out-mastery |
| description | Use when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded. |
Objects in the real world don't move at constant speeds—they accelerate from rest and decelerate to stops. Slow in/slow out (also called ease in/ease out) captures this fundamental truth. Without it, animation looks mechanical. With it, motion feels alive.
Slow Out (Ease Out): More drawings clustered at the start of a movement. The object accelerates away from its starting position gradually.
Slow In (Ease In): More drawings clustered at the end of a movement. The object decelerates into its final position gradually.
Linear motion: Equal spacing between positions. Rare in nature, useful for mechanical elements or stylistic choice.
Traditional animators controlled this through drawing spacing:
Digital animators control this through easing curves—mathematical functions that describe how values change over time.
Timing is modified by easing: The same duration feels different with different easing. Ease out feels faster than ease in at identical durations.
Anticipation often uses ease in: The wind-up accelerates before the fast action.
Follow through uses ease out: Settling motion decelerates to rest.
Squash/stretch intensity follows easing: More deformation during fast phases, less during slow phases.
Beyond basic easing:
For most UI work: use ease out for 80% of animations (elements responding to user action). Ease out communicates responsiveness—"I heard you and I'm moving." Reserve ease in for departures and de-emphasis.
Default to ease out (fast start, slow end) for element appearances and responses. Use ease in for exits. Use ease in out for autonomous animations (not triggered by user). Adjust curve intensity based on brand personality—aggressive curves for dynamic brands, subtle curves for calm brands.
