Refine By

Animation

We use UI animations to indicate change, soften cuts, and express our brands.

 

  • Indicate the change of a state. Interactive elements use states to indicate focus, hover, selection, and errors.
  • Soften harsh cuts between interactions that expose additional page elements or introduce new data on an existing page. This can also reduce perceived latency.
    Examples: search results, applying filters, card selection, image galleries, modals
  • Express our brands and create delight. While our brands each have their own tone, we don’t want 14 different animation styles. The table below defines two categories of animation styles.
Brands
Brand feel
Animation feel
Effect examples
Tru
Home2 Suites
Tapestry
Hampton
Hilton Enterprise
Hilton Honors
Lively and friendly
Quick and soft
Soft bounce
Anticipation
Soft overshoot
Embassy Suites
HGI
Homewood Suites
DoubleTree
Waldorf Astroia
Conrad
Canopy
Hilton H&R
Curio
LXR
Tranquil and luxurious
Balanced and stable motion or small, soft movements
Ease in
Ease out
Change opacity Change
color, scale, or blur

Duration

Movement should be slow enough that the user can recognize what’s happening, but fast enough that they are never waiting. The magnitude of change in an animation and its importance combine to determine its duration.
Examples:
  • Elements that have been closed or dismissed are a low magnitude change and can move fast.
  • Introducing new content can be a larger cognitive load and should be a slower transition.

 

Type
Duration
Change of a state on a button or form field; icon transitions
(Example: hamburger to x, or play to pause)
Fastest
Dismiss modal; dismiss alert; close off-canvas menu
Fast
Introduce modals; open off-canvas menu; image galleries; introduce alerts
Slow
Page transitions
Slower

Do

  • Keep animations simple

Don’t

  • Animate separate items in different directions at the same time