Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.

Playfulness & Fun Animation Create animations that entertain, surprise, and make interactions genuinely enjoyable. Emotional Goal Playfulness invites interaction through unexpected, whimsical motion. Fun comes from animations that have personality, respond expressively, and make users smile. Disney Principles for Playfulness Squash & Stretch Generous, exaggerated (25 40%). Rubbery, cartoon physics. Objects should feel alive and reactive. Bounce like a beach ball. Anticipation Exaggerated wind ups (150 250ms). Comic timing—big preparation for big payoff. Elements "think" before acting. Staging Theatrical presentation. Clear setup and punchline. Give playful moments room to breathe and be noticed. Straight Ahead Action Embrace spontaneity. Wobbly paths, unpredictable bounces. Characters and elements with minds of their own. Follow Through & Overlapping Action Extensive, bouncy follow through. Overshoots, wobbles, and settling. Like a cartoon character skidding to a stop. Slow In & Slow Out Asymmetric with overshoot. Quick starts, bouncy landings. cubic bezier(0.68, 0.55, 0.265, 1.55) for elastic effect. Arc Exaggerated, bouncy curves. High arcs for jumps. Squiggly paths for personality. Nothing moves in straight lines. Secondary Action Abundant! Wiggles, sparkles, expressions. Elements react to each other. The whole interface feels alive. Timing Varied and expressive (100 500ms). Quick snaps, slow anticipation. Comic timing with beats and pauses. Exaggeration High (30 50%). Push movements to cartoon levels. Impossible physics that feel emotionally true. Solid Drawing Maintain appeal through deformation. Stretched elements stay charming. Volume shifts for effect. Appeal Round, friendly shapes. Bright, saturated colors. Big eyes, expressive forms. Character in everything. Timing Recommendations Element Duration Easing Bounce 400 600ms spring(1, 60, 8) Wiggle 300 400ms ease in out Pop 150 250ms ease out back Squash 100 150ms ease out CSS Easing Fun Animations When to Use Games and gamification Children's interfaces Social media reactions Onboarding tutorials Empty states Easter eggs Casual apps Entertainment platforms

playfulness-fun