playbooks

home / skills / dylantarre / animation-principles / travel-hospitality

travel-hospitality skill

/skills/08-by-industry/travel-hospitality

This skill helps designers apply Disney's animation principles to travel and hospitality interfaces, elevating pacing, anticipation, and user confidence in

npx playbooks add skill dylantarre/animation-principles --skill travel-hospitality

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.9 KB
---
name: travel-hospitality
description: Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences
---

# 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.

Overview

This skill applies Disney's 12 principles of animation to travel and hospitality product design. It guides designers and engineers to craft motion that inspires wanderlust while maintaining clarity and booking confidence. Use it to create polished, aspirational interactions for booking flows, maps, galleries, and confirmations.

How this skill works

The skill maps each animation principle to concrete UI patterns used in travel apps: buttons, map pins, image carousels, booking steps, and confirmation states. It also recommends durations and easing for common actions and prescribes visual priorities—photography first, icons consistent, and motion tuned to the emotional moment. Practical examples show where to exaggerate, slow down, or add secondary action to reinforce the user journey.

When to use it

  • Designing booking flows and confirmation states to increase user confidence
  • Animating maps, flight paths, and location pins in tourism or itinerary features
  • Creating image galleries and destination reveals that evoke aspiration
  • Building microinteractions like search, price updates, and add-to-itinerary
  • Prototyping transitions for modal flows, step-based processes, or onboarding

Best practices

  • Prioritize high-quality destination photography; motion should enhance imagery, not compete with it
  • Match timing to intent: quick feedback for search (≈150ms), confident actions (250–350ms), and dreamy reveals (400–600ms)
  • Use subtle squash & stretch and follow-through for satisfying touch interactions without disrupting UX
  • Employ anticipation and staging to focus attention on the current task or reveal
  • Ensure map and icon accuracy; keep visual language and motion consistent across product

Example use cases

  • A booking confirmation that pairs a confident 600ms animated badge with a secondary plane takeoff and confetti
  • An interactive map where pins bounce in with staggered follow-through and flight paths arc between destinations
  • A destination gallery using slow in/out image transitions (≈400ms, ease-in-out) to evoke a dreamy mood
  • A multi-step itinerary builder with pose-to-pose step transitions and clear staging of the active step
  • Search results that cascade in with staggered timing and quick search feedback for responsiveness

FAQ

How do I choose timing for different interactions?

Use intent as a guide: fast for feedback (≈150ms), medium for confident actions (250–350ms), and slower for aspirational moments (400–600ms). Easing should match the emotion: ease-out for map motion, ease-in-out for imagery, custom bounce for confirmations.

When should I exaggerate animations?

Reserve strong exaggeration for celebratory or aspirational moments like booking confirmations or hero reveals. Keep microinteractions subtle to avoid distracting the booking flow.