| name | continuous-infinite |
| description | Use when building ongoing loop animations - loading states, ambient motion, background effects that run indefinitely without user fatigue |
Continuous Animations (Infinite)
Infinite animations run without end state. They indicate ongoing processes, create ambient atmosphere, or provide persistent visual interest. The challenge: avoiding fatigue.
Disney Principles for Continuous Motion
Sustainable Application
Squash & Stretch: Subtle, rhythmic - 5-10% oscillation that doesn't demand attention. Breathing, not bouncing.
Anticipation: Built into loop - each cycle should flow naturally into the next without visible restart.
Staging: Background hierarchy - continuous motion must not compete with interactive elements.
Straight Ahead/Pose to Pose: Pose to pose for seamless loops - endpoint must match startpoint perfectly.
Follow Through: Wave propagation - elements should move in sequence, creating natural flow.
Slow In/Slow Out: Smooth, endless curves - no sharp accelerations that call attention.
Arcs: Circular, orbital paths - return to origin naturally. Figure-8s, ellipses, waves.
Secondary Action: Layered ambient motion - multiple elements at different speeds create depth.
Timing: Varied cycle lengths - elements should NOT sync up. Use prime number relationships (3s, 5s, 7s).
Exaggeration: Minimal - subtlety prevents fatigue. Users should barely notice the motion.
Solid Drawing: Simple transforms preferred - complex animations drain battery and attention.
Appeal: Calm, not chaotic - continuous motion should soothe, not stimulate.
Loop Duration Guidelines
