Travel Hospitality
- 383 installs
- 68 repo stars
- Updated December 30, 2025
- dylantarre/animation-principles
travel-hospitality is a Design & UI/UX skill that guides developers crafting booking, map, gallery, and itinerary animations for travel and hospitality apps using Disney's 12 animation principles to build confidence duri
About
travel-hospitality is a Design & UI/UX skill from dylantarre/animation-principles that applies Disney's 12 animation principles to travel booking, hospitality apps, tourism platforms, and vacation planning experiences. The skill maps principles to concrete UI patterns such as satisfying booking-button squash, bouncing map pins, airplane stretch during flight animations, search-button anticipation before results, and dramatic booking-confirmation pauses. Developers reach for travel-hospitality when frontend motion must inspire wanderlust and reduce checkout anxiety across search, gallery browsing, map interaction, and itinerary selection flows in travel products.
- Map and card transitions with spatial continuity
- Date and guest-picker motion clarity
- Price change emphasis without alarm
- Photo gallery parallax and zoom discipline
- Checkout progress that reduces abandonment anxiety
Travel Hospitality by the numbers
- 383 all-time installs (skills.sh)
- Ranked #699 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill travel-hospitalityAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 383 |
|---|---|
| repo stars | ★ 68 |
| Last updated | December 30, 2025 |
| Repository | dylantarre/animation-principles ↗ |
How do you animate travel booking UI flows?
Craft booking, map, gallery, and itinerary animations for travel and hospitality apps that build confidence during search, selection, and checkout.
Who is it for?
Frontend developers building travel booking, hospitality, tourism, or vacation-planning apps that need confidence-building motion across search and checkout.
Skip if: Non-travel SaaS dashboards, admin consoles, or products where booking, maps, and itinerary flows are not core user journeys.
When should I use this skill?
Designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning search, map, gallery, and checkout experiences.
What you get
Travel-specific motion patterns for booking buttons, map pins, search reveals, gallery transitions, and checkout confirmation animations.
- booking motion patterns
- map pin animations
- checkout confirmation sequences
By the numbers
- Maps motion patterns to Disney's 12 animation principles for travel UI flows
Files
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.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What UI patterns does travel-hospitality cover?
travel-hospitality covers booking buttons, map pins, airplane icons, search result reveals, gallery transitions, itinerary flows, and checkout confirmation animations for travel and hospitality frontend apps.
What animation framework does travel-hospitality use?
travel-hospitality applies Disney's 12 animation principles—including squash and stretch, anticipation, and staging—to travel booking, tourism platforms, and vacation planning experiences.