Social Media Animation Principles
Apply Disney's 12 principles to create engaging, expressive experiences that encourage interaction and emotional connection.
The 12 Principles Applied
1. Squash & Stretch
- •Like Buttons: Heart squishes on tap, then bounces back
- •Reaction Emojis: Playful stretch during selection
- •Send Button: Compress before message flies away
2. Anticipation
- •Post Button: Brief wind-up before publishing
- •Stories: Tap-and-hold with radial progress
- •Swipe Actions: Preview hints at what's coming
3. Staging
- •Content First: User content is always the star
- •Reactions Bar: Clear but not overshadowing
- •Notifications: Prominent but dismissible
4. Straight Ahead & Pose to Pose
- •Feed Scroll: Endless smooth flow (straight ahead)
- •Posting Flow: Step-by-step creation (pose to pose)
- •Story Sequences: Frame-by-frame progression
5. Follow Through & Overlapping Action
- •Like Animation: Icon bounces, count updates after
- •Comment Thread: Avatar appears, then text
- •Share Menu: Options cascade in sequence
6. Slow In & Slow Out
- •Pull to Refresh: Smooth deceleration
- •Card Transitions: Ease-in-out for polished feel
- •Modal Sheets: Comfortable 300ms timing
7. Arc
- •Reactions Float: Emojis arc upward from button
- •Story Gestures: Swipe follows natural curve
- •Content Sharing: Posts arc to share destination
8. Secondary Action
- •Double-Tap Like: Heart bursts while fading
- •Typing Indicator: Dots bounce while thinking
- •Upload Progress: Shimmer while processing
9. Timing
- •Interactions: Snappy 100-200ms for engagement
- •Transitions: Swift 250-300ms to maintain flow
- •Celebrations: 500-800ms for emotional moments
10. Exaggeration
- •Reactions: Amplify emotional expression
- •Milestones: Celebrate follower counts, likes
- •Live Features: Dynamic, attention-grabbing
11. Solid Drawing
- •Avatar Consistency: Uniform sizing and styling
- •Icon Language: Cohesive visual vocabulary
- •Grid Layouts: Proper alignment and spacing
12. Appeal
- •Personality Forward: Platform character shines through
- •Dopamine Design: Rewarding micro-interactions
- •Shareability: Animations worth recording
Industry Timing Standards
| Action | Duration | Easing |
|---|---|---|
| Like/React | 200ms | spring |
| Pull to Refresh | 300ms | ease-out |
| Story Transition | 250ms | ease-in-out |
| Modal Open | 300ms | ease-out |
| Send Message | 150ms | ease-out |
Key Principle
Social media thrives on emotional expression. Animations should amplify connection, make interactions feel rewarding, and encourage continued engagement without feeling manipulative.