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.