| name | continuous-loops |
| description | Use when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely. |
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.
Secondary Action: Primary rotation + secondary wobble. Spinner spins while slightly bouncing.
Timing:
- Fast loops: 500-800ms (spinners, urgent indicators)
- Medium loops: 1000-2000ms (pulsing, breathing)
- Slow loops: 2000-4000ms (ambient, background)
Exaggeration: Minimal for loops - they're already attention-grabbing through repetition.
Solid Drawing: Loops must be seamless. Any jump between end and start destroys the illusion.
Appeal: Loops should be hypnotic, not annoying. Test at 30 seconds - still pleasant?
Timing Recommendations
