travel-hospitality
Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences
By dylantarre · 472 installs
npx skills add dylantarre/animation-principles --skill travel-hospitality
Source repository · Upstream listing
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.