设计与多媒体

continuous-loops

dylantarre/anim…inciples

Use when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely.

  • 504 次安装
  • 133 星标
  • 收录于

安装命令

npx skills add https://github.com/dylantarre/animation-principles --skill continuous-loops

SKILL.md

Continuous Loop Animations

Apply Disney's 12 principles to animations that never stop.

Principle Application

Squash & Stretch: Subtle scale oscillation (0.98-1.02) creates organic breathing. Avoid rigid mechanical loops.

Anticipation: Build anticipation into the loop cycle. Brief pause at extremes before reversing.

Staging: Loops should support, not dominate. Keep amplitude subtle for background elements.

Straight Ahead vs Pose-to-Pose: Design keyframe poses that loop seamlessly. End frame must flow into start frame.

Follow Through & Overlapping: Multi-part loops have elements at different phases. Three dots pulse with 120° phase offset.

Slow In/Slow Out: Use ease-in-out for smooth oscillations. Linear motion looks mechanical.

Arcs: Circular motion follows true arcs. Spinners rotate, pendulums swing, orbits circle.

Continuous Loop Animations

Apply Disney's 12 principles to animations that never stop.

Principle Application

Squash & Stretch: Subtle scale oscillation (0.98-1.02) creates organic breathing. Avoid rigid mechanical loops.

Anticipation: Build anticipation into the loop cycle. Brief pause at extremes before reversing.

Staging: Loops should support, not dominate. Keep amplitude subtle for background elements.

Straight Ahead vs Pose-to-Pose: Design keyframe poses that loop seamlessly. End frame must flow into start frame.

Follow Through & Overlapping: Multi-part loops have elements at different phases. Three dots pulse with 120° phase offset.

Slow In/Slow Out: Use ease-in-out for smooth oscillations. Linear motion looks mechanical.

Arcs: Circular motion follows true arcs. Spinners rotate, pendulums swing, orbits circle.