Transition showcase

Motion-first transitions demo

Use the buttons below to swap the slide transition without reloading the page.

Preview next transition
Transition showcase

Compare every visual change clearly

The slider keeps the same image set so the transition itself stays easy to evaluate.

Preview next transition
Transition showcase

Randomized controls on each transition

Control styles and dot styles are randomized each time to stress-test the UI combinations.

Preview next transition
Transition showcase

Full Width Scoped presentation only

This page stays fixed to fullWidthScoped so the transition test remains consistent.

Preview next transition

Navigation dot selection

Choose dots, numbers, and tooltip styles

Selecting a dots style disables numbers navigation. Selecting a numbers style disables dots navigation. Tooltip rows apply to their respective active navigation family and default to none.

Dots styles

Dots tooltip styles

Numbers styles

Numbers tooltip styles

Layout Transition Thumbs Dots Dot Style Numbers Nav Numbers Style Control Style Control Icon Progress

Navigation styles

Dots

Inspect dots styles, numbers styles, and tooltip content modes on the same fullWidthScoped slider. Dots and numbers stay mutually exclusive so each navigation family is easier to evaluate on its own.