Screen animations and easing

When an interaction changes the screen, the Animation decides how: at once, with a fade, with layers moving into their new places, or with one screen sliding over the other. The curve and duration decide how it feels. Both live in the interaction’s popover, under the action.

Pick an animation

Open an interaction whose action is Navigate to, Back, or an overlay action, and choose its Animation:

Animation	What happens
Instant	The new screen shows at once.
Dissolve	The new screen fades in over the old.
Match layers	Layers with the same name on both screens move and resize between them; the others fade.
Move in	The new screen moves in over the old one, which stays still.
Move out	The old screen moves away, uncovering the new one.
Push	The new screen pushes the old one out.
Slide in	The new screen slides in and fades up, while the old one drifts a little.
Slide out	The old screen slides away and fades, while the new one drifts in a little.
Curtain	A panel of colour covers this screen, then moves on to uncover the next, both screens drifting the way it goes.

All but Instant, Dissolve and Match layers have a Direction: Left, Right, Up or Down.

Overlays offer fewer: see Overlays.

Match layers

Match layers works best when the two screens share layers with the same names, such as a card that becomes a header. uxdeck matches them by name and by where they sit, then moves, resizes and recolours them. Layers only on one screen fade in or out. Rename layers so they match when the result looks like a dissolve.

Curtain

Curtain starts travelling Up, over 1,200 ms, on Ease in and out, with a black panel. Change the panel in Colour, as six hex digits (for example 1A1A1A). It suits a change of chapter, such as a menu that covers a whole site.

Easing

The Easing field opens a picker that plays each curve at your animation’s own speed as you point at it.

• On top: the curves people reach for: Ease out (fast start, soft stop), Ease in and out, Ease in, Ease out back (goes past, settles back), Gentle (a spring) and Linear.
• More curves:
  • Basic: Ease in back, Ease in and out back, Expressive and Smooth (the others are on top).
  • Easings: thirty classic curves, ten families from Sine to Bounce, each In, Out, or In and out.
  • Springs: Quick, Bouncy and Slow, with Gentle on top.
  • Custom: Custom bezier, with handles you drag, and Custom spring.

Any bezier curve can be fine-tuned under Edit curve; dragging a handle makes it a custom bezier.

Duration

Duration runs from 1 to 10,000 ms. A spring has no duration to type: it takes as long as it needs to settle, and the field says so (“… ms, set by the spring”). A Custom spring has Stiffness (1 to 1,000), Damping (0.1 to 100) and Mass (0.1 to 10).

Use your motion variables

The easing and duration accept Timing and Easing variables, so a team’s motion scale applies everywhere it is used. Press Apply variable beside the field to pick one. See Variables and modes.

Swipe between screens

Set the trigger to On drag with Move in, Move out, Push, Slide in, Slide out or Curtain: the next screen follows the finger or pointer, and goes back if you let go early.

Catches

• Springs are for interactions. Appear on scroll, While scrolling and loops take named curves only.
• Elastic and Bounce have no handles to edit.
• Match layers needs matching names. Without them it looks like a dissolve.
• Older browsers without view transitions (such as Firefox before version 144) change pages at once on your exported site, with no animation.

Animations and every curve are on every plan.