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.