Motion Design Research & Principles

Executive Summary

This document captures research on professional motion design, analyzing what makes animations feel polished and intentional. It serves as the foundation for Motionly’s animation preset library.

Research Sources

Industry Leaders

Apple
- Product reveal animations (iPhone, MacBook, Vision Pro)
- WWDC presentations
- Website interactions
- Marketing videos
Linear
- Product interface animations
- Smooth transitions
- Micro-interactions
Framer
- Component animations
- Page transitions
- Prototyping examples
GSAP (GreenSock)
- Professional timeline animations
- Easing functions
- Stagger effects
Remotion
- Programmatic video generation
- React-based animations
Adobe Animate / Flash
- Classic animation principles
- Timeline-based motion
- Character animation

Core Motion Principles

1. Timing

Key Insight: Duration determines the character of motion.

Fast (0.15-0.3s): Snappy UI interactions, button feedback
Medium (0.4-0.8s): Standard transitions, reveals
Slow (1.0-2.0s): Hero moments, product reveals
Cinematic (2.0-4.0s): Camera movements, scene transitions

Apple Pattern: 1.2-1.6s for hero reveals Motionly Defaults:

UI interactions: 0.3s
Text reveals: 1.2s
Logo animations: 1.4s
Camera movements: 2.0s
Scene transitions: 1.5s

2. Easing

Key Insight: Easing creates natural acceleration/deceleration.

Professional Easing Curves

Ease Out (Most Common):

Natural deceleration
Smooth landing
Use: 70% of animations
Bezier: cubic-bezier(0, 0, 0.2, 1)

Spring (Apple’s Favorite):

Gentle overshoot
Natural feel
Use: Logo reveals, hero moments
Tension: 80-120

Soft Spring:

Minimal overshoot
Refined motion
Use: Premium products
Damping: 0.75

Power3 Out:

Strong deceleration
Impactful landing
Use: Hero text, important reveals

Motionly Default: Power3 Out (softer than standard ease-out)

3. Staggering

Key Insight: Staggered timing creates rhythm and hierarchy.

Stagger Rules

Character Animations:

30-50ms per character
Creates smooth wave
Readable while animating

Word Animations:

80-120ms per word
Apple uses 90ms
Maintains readability

Object Sequences:

100-200ms per object
Creates visual flow
Guides eye movement

Motionly Defaults:

Characters: 35ms
Words: 90ms
Objects: 150ms

4. Acceleration & Deceleration

Key Insight: Nothing moves at constant speed in nature.

Motion Curves

Start Slow, End Fast (Ease In):

Gravity falling
User-initiated actions
Rare in UI

Start Fast, End Slow (Ease Out):

Most natural
Safe default
Professional feel

Both (Ease In-Out):

Pendulum motion
Looping animations
Continuous movement

Apple’s Approach: Almost exclusively ease-out

5. Springs

Key Insight: Springs add life and personality.

Spring Parameters

Tension (How stiff):

Low (40-60): Bouncy, playful
Medium (80-100): Natural, balanced
High (120-150): Quick, tight

Friction (How much resistance):

Low (5-10): Many bounces
Medium (15-25): Controlled
High (30-40): Minimal overshoot

Apple Pattern: Tension 90, Friction 20 Motionly Springs:

softSpring: { tension: 85, friction: 22 }  // Default
spring: { tension: 100, friction: 18 }     // Bouncy
tightSpring: { tension: 120, friction: 25 } // Snappy

6. Anticipation

Key Insight: Prepare viewers for movement. Techniques:

Small backward motion before forward
Scale down slightly before scaling up
Fade in slightly before full reveal

Example (Logo Reveal):

0%: scale 0.92, opacity 0
10%: scale 0.95, opacity 0.3
100%: scale 1, opacity 1

7. Overshoot

Key Insight: Slight overshoot feels natural and intentional. When to Use:

Logo reveals
Hero moments
Celebratory actions
Emphasis

When to Avoid:

Subtle transitions
Background elements
Text body
UI feedback

Amount: 2-8% over target

8. Camera Movement

Key Insight: Camera creates depth and focus.

Camera Patterns

Push In (Most Common):

Slow zoom: 1.0 → 1.05-1.15
Duration: 2-3s
Creates intimacy
Guides focus

Pull Out:

Reveals context
Transitions between scenes
Duration: 1.5-2.5s

Pan:

Horizontal movement
Reveals width
Slow and controlled

Apple Pattern:

Start at 1.0
Push to 1.08-1.12
2.5s duration
Soft spring easing

9. Layer Depth

Key Insight: Create visual hierarchy through stacking.

Layer Order (Back to Front)

Background: Gradients, colors, patterns
Effects: Noise, glow, particles
Supporting: Secondary content
Hero: Main focal point
Details: Fine elements
Text: Overlays, captions
Foreground: Optional highlights

Parallax: Different layers move at different speeds during camera movement

10. Transitions

Key Insight: Smooth scene changes maintain flow.

Professional Transition Types

Fade (Universal):

Duration: 0.8-1.2s
Overlap: 0.3-0.5s
Safe default

Mask:

Circular or rectangular
Directional wipes
Duration: 1.0-1.5s

Blur:

Gaussian blur: 0 → 20px → 0
Creates depth
Duration: 0.6-1.0s

Camera Push/Pull:

Zoom transition
Most cinematic
Duration: 1.5-2.5s

Animation Preset Categories

Text Animations

1. Keynote Text (Apple Style)

Description: Word-by-word reveal with subtle blur Properties:

Split: words
Stagger: 90ms
Duration: 1.2s
Blur: 0 → 6px → 0
Opacity: 0 → 1
Easing: power3.out

2. Blur Reveal

Description: Elegant blur-in effect Properties:

Blur: 8px → 0
Opacity: 0 → 1
Duration: 1.0s
Y-offset: +20px → 0

3. Character Cascade

Description: Character-by-character animation Properties:

Split: characters
Stagger: 35ms
Scale: 0.85 → 1.0
Opacity: 0 → 1

4. Typewriter

Description: Sequential character reveal Properties:

Split: characters
Stagger: 60ms (slower)
Instant appearance per character
Cursor optional

5. Gradient Sweep

Description: Color gradient animation Properties:

Gradient position animated
Duration: 2.0s
Multiple color stops

Logo Animations

1. Hero Logo (Apple Pattern)

Description: Premium logo entrance Properties:

Scale: 0.92 → 1.0 → 1.02 → 1.0
Rotation: -2° → 0°
Opacity: 0 → 1
Duration: 1.4s
Easing: softSpring
Blur: 3px → 0

2. Draw SVG

Description: Path drawing animation Properties:

Stroke dasharray animated
Duration: 1.5-2.5s
Easing: ease-in-out

3. Logo Float

Description: Gentle floating motion Properties:

Y-axis: 0 → -10px → 0
Duration: 3.0s
Loop: true
Easing: sine

Product Animations

1. Product Reveal

Description: Showcase product with camera Properties:

Camera push: 1.0 → 1.12
Product opacity: 0 → 1
Product scale: 0.95 → 1.0
Duration: 2.0s
Blur background slightly

2. Card Reveal

Description: Panel/card entrance Properties:

Y-offset: +50px → 0
Opacity: 0 → 1
Scale: 0.96 → 1.0
Duration: 0.8s
Shadow: 0 → strong

3. Device Showcase

Description: Show product in device frame Properties:

Rotation: 5° → 0°
Scale: 0.9 → 1.0
Opacity: 0 → 1
Duration: 1.5s

Camera Animations

1. Cinematic Push

Description: Slow zoom with subtle movement Properties:

Zoom: 1.0 → 1.08
Y-offset: 0 → -20px
Duration: 2.5s
Easing: softSpring

2. Dolly Movement

Description: Camera travels along path Properties:

X-movement: -100px → +100px
Smooth curve
Duration: 3.0s

Background Effects

1. Gradient Motion

Description: Animated gradient background Properties:

Color stops shift
Multiple palettes
Loop: true
Duration: 8.0s

2. Subtle Noise

Description: Film grain texture Properties:

Opacity: 10-20%
Animated seed
Creates depth

Motion Style Guide

Motionly Design Principles

Polished Over Flashy
- Subtle > obvious
- Refined > aggressive
- Intentional > random
Consistent Timing
- Use preset durations
- Predictable rhythm
- Avoid custom values unless necessary
Natural Easing
- Power3 out default
- Springs for emphasis
- Avoid linear
Purposeful Motion
- Every animation has intent
- Guides viewer attention
- Supports narrative
Restrained Effects
- Blur: max 10px
- Rotation: max ±5°
- Scale: 0.9-1.1 range
- Opacity: smooth transitions

Implementation Guidelines

Creating New Presets

Research: Study professional examples
Identify Principles: What makes it work?
Define Parameters: What should be adjustable?
Choose Defaults: Test and refine
Document: Clear description and use cases
Test: Visual verification
Iterate: Improve until it feels right

Preset Quality Checklist

Conclusion

Professional motion design is about intentionality, restraint, and understanding natural movement. Motionly should embody these principles in every preset, making it easy for anyone to create polished animations. Core Philosophy:

Start with excellent defaults. Make customization possible but unnecessary for most use cases.

Last Updated: 2026-07-14

​Motion Design Research & Principles

​Executive Summary

​Research Sources

​Industry Leaders

​Core Motion Principles

​1. Timing

​2. Easing

​Professional Easing Curves

​3. Staggering

​Stagger Rules

​4. Acceleration & Deceleration

​Motion Curves

​5. Springs

​Spring Parameters

​6. Anticipation

​7. Overshoot

​8. Camera Movement

​Camera Patterns

​9. Layer Depth

​Layer Order (Back to Front)

​10. Transitions

​Professional Transition Types

​Animation Preset Categories

​Text Animations

​1. Keynote Text (Apple Style)

​2. Blur Reveal

​3. Character Cascade

​4. Typewriter

​5. Gradient Sweep

​Logo Animations

​1. Hero Logo (Apple Pattern)

​2. Draw SVG

​3. Logo Float

​Product Animations

​1. Product Reveal

​2. Card Reveal

​3. Device Showcase

​Camera Animations

​1. Cinematic Push

​2. Dolly Movement

​Background Effects

​1. Gradient Motion

​2. Subtle Noise

​Motion Style Guide

​Motionly Design Principles

​Implementation Guidelines

​Creating New Presets

​Preset Quality Checklist

​Conclusion