Motion

Duration and easing tokens, plus safe motion patterns for WCAG 2.3.3 compliance.

Every transition in ePassLive conveys meaning. A fast fade signals a state change; a slow slide signals a context change. Motion tokens pair duration and easing into named recipes so transitions feel consistent across the product.

A fast fade signals a state change; a slow slide signals a context change. Motion tokens pair duration and easing into named recipes so transitions feel consistent across the product.

Duration scale

Three durations cover every transition. If a motion needs a fourth step, the design is overcomplicating the interaction.

--ep-duration-fast150msMicro-interactions: hover states, focus rings, toggles, icon rotations.

--ep-duration-normal200msStandard transitions: dropdown open/close, tab switch, card expand.

--ep-duration-slow300msMajor transitions: modal open/close, drawer slide, page-level reveals.

Easing curves

Easing controls how a transition accelerates and decelerates. The three named curves match natural physics: things slow down when they arrive, speed up when they leave.

--ep-ease-outcubic-bezier(0, 0, 0.2, 1)Elements entering the viewport. Decelerates to rest.

--ep-ease-incubic-bezier(0.4, 0, 1, 1)Elements leaving the viewport. Accelerates away.

--ep-ease-in-outcubic-bezier(0.4, 0, 0.2, 1)Elements moving between positions. Symmetrical acceleration/deceleration.

Animation demonstrations

The dots below animate continuously using each easing + duration token so you can compare them at a glance. The animation runs at the same cadence in every demo so the curves tell a visual story: ease-out settles quickly, ease-in jumps away, ease-in-out rides a smooth arc.

--ep-duration-fast + ease-out

--ep-duration-normal + ease-out

--ep-duration-slow + ease-out

--ep-duration-fast + ease-in

--ep-duration-normal + ease-in

--ep-duration-slow + ease-in

--ep-duration-fast + ease-in-out

--ep-duration-normal + ease-in-out

--ep-duration-slow + ease-in-out

What to avoid

Animating for the sake of motion.
Mixing durations on the same interaction — opening a dropdown in 150 ms and closing it in 300 ms feels broken.
Using linear easing outside of color/opacity tweens.
Forgetting prefers-reduced-motion.