travel-hospitality

Original：🇺🇸 English

Translated

Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences

2installs

Sourcedylantarre/animation-principles

Added on2026-02-08

NPX Install

npx skill4agent add dylantarre/animation-principles travel-hospitality

SKILL.md Content

View Translation Comparison →

Travel & Hospitality Animation Principles

Apply Disney's 12 principles to create aspirational, exciting experiences that inspire wanderlust and build booking confidence.

The 12 Principles Applied

1. Squash & Stretch

Booking Buttons: Satisfying press with light squash
Map Pins: Bounce when dropped on location
Airplane Icons: Subtle stretch during flight animation

2. Anticipation

Search Button: Build-up before results reveal
Booking Confirmation: Dramatic pause before success
Destination Reveal: Moment of suspense

3. Staging

Destination Imagery: Full-bleed hero photos
Price Display: Clear but secondary to experience
Booking Flow: Current step clearly focused

4. Straight Ahead & Pose to Pose

Map Exploration: Smooth pan and zoom (straight ahead)
Booking Process: Clear step-by-step (pose to pose)
Itinerary Builder: Sequential activity planning

5. Follow Through & Overlapping Action

Search Results: Cards cascade in with stagger
Image Galleries: Photos settle with follow-through
Map Markers: Icon lands, then info popup appears

6. Slow In & Slow Out

Dreamy Transitions: Smooth, relaxed pacing
Image Carousels: Elegant slide transitions
Modal Opens: Comfortable 350-400ms

7. Arc

Flight Paths: Curved lines on maps
Photo Swipes: Natural arc gestures
Destination Transitions: Arc between locations

8. Secondary Action

Booking Success: Plane takes off, confetti falls
Price Updates: Sparkle when deals appear
Loading States: Location-themed animations

9. Timing

Aspirational Moments: Slower 400-500ms for dreamy feel
Booking Actions: Confident 250-350ms
Search Feedback: Quick 150ms

10. Exaggeration

Celebration Moments: Booking confirmed deserves fanfare
Dream Destinations: Amplify the aspiration
Deals: Highlight savings dramatically

11. Solid Drawing

Photography First: Stunning destination imagery
Map Accuracy: Correct geographical representation
Icon Consistency: Unified travel iconography

12. Appeal

Inspirational: Motion should spark wanderlust
Premium Service Feel: Luxury brand associations
Cultural Sensitivity: Respectful representation

Industry Timing Standards

Action	Duration	Easing
Image Transition	400ms	ease-in-out
Map Animation	500ms	ease-out
Booking Step	300ms	ease-in-out
Search Results	250ms	ease-out
Confirmation	600ms	custom-bounce

Key Principle

Travel is about dreams and experiences. Animation should transport users mentally before they travel physically. Create moments of aspiration while maintaining booking confidence.