ReddRadar
Agent skill
travel-hospitality
Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences
Install this agent skill to your Project
npx add-skill https://github.com/dylantarre/animation-principles/tree/main/skills/08-by-industry/travel-hospitality
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dylantarre/animation-principles
icons-badges
Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback
dylantarre/animation-principles
navigation-menus
Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
dylantarre/animation-principles
lists-grids
Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states
dylantarre/animation-principles
loaders-spinners
Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status
dylantarre/animation-principles
accordions-dropdowns
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
dylantarre/animation-principles
universal-elements
Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types
Didn't find tool you were looking for?