continuous-loops
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.
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.6Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
622motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
557micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
441saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
293game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
287