continuous-infinite

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

• Loading spinners: 800-1200ms cycles
• Breathing/pulsing: 2000-4000ms cycles
• Ambient background: 5000-15000ms cycles
• Subtle floating: 3000-8000ms cycles

Easing Recommendations

/* Seamless breathing */
animation-timing-function: ease-in-out;

/* Perpetual smooth motion */
animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);

/* Organic, natural feeling */
animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);

Best Use Cases