Professional motion design principles for creating polished logo animations.
Originally from Disney, these principles apply to all animation including logos:
Gives weight and flexibility. Subtle squash/stretch makes logos feel more dynamic.
Logo application: Gentle vertical squash on bounce impact (98% height, 102% width).
Prepare the viewer for action. Small movement before main action creates impact.
Logo application: Slight pullback before bouncing forward, or small scale-down before scale-up.
Direct attention to what's important. Keep focus on the logo, minimize distractions.
Logo application: Use subtle backgrounds, ensure logo is always the focal point.
Straight ahead = fluid motion. Pose-to-pose = controlled keyframes.
Logo application: Use pose-to-pose (keyframes) for precise, professional logo animations.
Different parts move at different rates. Creates more natural motion.
Logo application: If logo has multiple elements, animate them with slight delays.
Acceleration and deceleration at start/end of movement.
Logo application: Always use easing functions - never linear motion for professional results.
Natural movement follows arcs, not straight lines.
Logo application: When moving logos, use curved paths or combine position + rotation.
Supporting actions that enhance main action.
Logo application: Add subtle glow pulse while logo rotates, or particle effects on entrance.
Defines character and mood through speed.
Logo application:
- Fast (0.3-0.8s) = energetic, playful
- Medium (1-2s) = professional, confident
- Slow (2-4s) = luxury, elegant
Push beyond realism for impact.
Logo application: Slight exaggeration in bounce height or rotation speed creates personality.
Understanding form and volume.
Logo application: Maintain logo proportions during animations, avoid distortion.
Create engaging, memorable motion.
Logo application: Find the "sweet spot" between boring and overwhelming.
Easing controls acceleration - the key to professional animation.
No easing - constant speed
Use case: Almost never. Looks robotic.
Starts slow, ends fast
Use case: Logo entering frame, falling objects
Feeling: Building momentum, gravity
Starts fast, ends slow
Use case: Logo settling into place, soft landing
Feeling: Natural stop, polished finish
Slow start, fast middle, slow end
Use case: Most logo movements, transitions
Feeling: Professional, smooth, controlled
Goes past target, then settles
Use case: Bouncy entrances, playful brands
Feeling: Energetic, springy, fun
Multiple overshoots like spring
Use case: Cartoon/playful logos, notification badges
Feeling: Very playful, should be subtle
Multiple bounces decreasing in height
Use case: Logo landing, ball physics
Feeling: Physical, grounded, impactful
Full control over curve
Use case: Brand-specific motion signature
Tool: cubic-bezier.com for visual editing
Fade In + Scale
- Opacity: 0 → 100%
- Scale: 80% → 100%
- Duration: 0.6-1.2s
- Easing: Ease out
- Use: Professional, versatile
Slide + Fade
- Position: Off-screen → Center
- Opacity: 0 → 100%
- Duration: 0.8-1.5s
- Easing: Ease out or back
- Use: Modern, directional
Bounce In
- Position: Top → Center
- Scale: Slight squash on landing
- Duration: 1-1.5s
- Easing: Bounce out
- Use: Playful, energetic
Rotate + Scale In
- Rotation: 180° → 0°
- Scale: 0% → 100%
- Duration: 1-2s
- Easing: Ease out
- Use: Dynamic, attention-grabbing
Subtle Float
- Position Y: 0 → -10px → 0
- Duration: 2-4s
- Easing: Ease in-out (sine wave)
- Use: Website headers, idle state
Gentle Pulse
- Scale: 100% → 105% → 100%
- Duration: 2-3s
- Easing: Ease in-out
- Use: Call-to-action, breathing room
Slow Rotation
- Rotation: 0° → 360°
- Duration: 10-20s
- Easing: Linear (exception to rule)
- Use: Loading, tech brands
Wiggle/Jello
- Rotation: -5° → +5° → -5° (quick)
- Duration: 0.4-0.8s
- Easing: Ease in-out
- Use: Notification, attention-grabber
Fade Out + Scale
- Opacity: 100% → 0%
- Scale: 100% → 80%
- Duration: 0.4-0.8s
- Easing: Ease in
- Use: Smooth transitions
Zoom Out
- Scale: 100% → 0%
- Duration: 0.6-1s
- Easing: Ease in or back in
- Use: Dramatic exits
| Use Case | Duration | Why |
|---|---|---|
| Website hero | 1-2s | Quick, don't block content |
| Splash screen | 2-3s | Branded moment, build anticipation |
| Email signature | 2-4s | Loop, not distracting |
| Social media intro | 1-3s | Attention span, algorithm friendly |
| Video intro/outro | 2-5s | Production value, memorable |
| Loading indicator | 1-2s loop | Fast enough to feel responsive |
- 24 fps: Cinematic, slightly choppy (deliberate aesthetic)
- 30 fps: Standard, smooth, web-friendly
- 60 fps: Very smooth, modern, requires more data
- Recommendation for logos: 30 fps (good balance)
Fast motion + bright colors = Energy, excitement Slow motion + muted colors = Elegance, luxury Contrast changes = Attention, urgency
- Never go below 10% opacity (invisible on some screens)
- Avoid rapid opacity flicker (accessibility concern)
- Smooth opacity transitions (minimum 0.3s)
- Avoid rapid flashing: No more than 3 flashes per second
- Respect prefers-reduced-motion: Offer simpler version for users who need it
- Don't rely on motion alone: Ensure brand is recognizable even in static form
- Test with vestibular disorders in mind: Avoid spinning, rapid zooming
- GIF size: Aim for <2MB for web
- Lottie JSON: Aim for <100KB for fast loading
- Layer count: Keep under 10 layers for complex logos
- Duration: Longer animations = larger files
Before finalizing logo animation:
- Smooth easing on all keyframes (no linear motion)
- Perfect loop (first frame = last frame values)
- Appropriate duration for use case
- No jarring movements or sudden changes
- Logo remains recognizable throughout
- File size is optimized
- Tested at various sizes (mobile, desktop)
- Works on solid color backgrounds
- Motion feels "on brand" for the company
- Can be watched repeatedly without annoyance
- Too fast: Animations under 0.5s feel rushed
- Linear motion: Always use easing
- Overcomplicated: More keyframes ≠ better
- Infinite complex loops: Become distracting
- Ignoring brand personality: Corporate brand shouldn't have bouncy cartoon motion
- Poor loop points: Jarring restart kills the effect
- Excessive file size: Longer/complex animation not worth slow load times
- Forgetting mobile: Test on small screens
- Motion sickness triggers: Rapid zooming, spinning
- No variation: Same entrance for every context gets stale
Smoothly transform logo shape. Use sparingly - can break brand recognition.
Add sparkles, confetti on special moments. Keep subtle for professional brands.
Logo revealed by animated mask (wipe, circle expand, etc.). Very versatile.
If logo has depth, animate layers at different speeds for 3D effect.
Animate logo elements sequentially with slight delays. Creates flow.
Leave fading copies behind moving logo. Works for speed/motion concept.
- Slow, controlled movements
- Ease in-out curves
- Minimal rotation (<45°)
- Subtle scale changes (<10%)
- 2-3 second durations
- Clean, simple paths
- Medium-fast movements
- Back easing (slight overshoot)
- Creative transitions
- 1-2 second durations
- Modern, energetic
- Very slow, deliberate
- Long easing curves
- Elegant fades
- 3-5 second durations
- Minimal movement
- Bouncy, elastic easing
- Rotation, wiggle
- Bright accent movements
- 1-2 second durations
- Personality-driven
- Fast, impactful
- Exaggerated movements
- Particle effects
- Short durations (0.8-1.5s)
- High energy