CodeCora UI

Motion

The duration and easing tokens, and the overlays that use them. Replay enter and exit, then compare with reduced motion.

Applies what the tokens do under prefers-reduced-motion: every duration 0 ms, spring falls back to ease-out.

Scale

Durations run with ease-out. Curves run at slow so their shape shows.

Use the tokens
css 
.panel {
  transition:
    opacity var(--cc-duration-normal) var(--cc-ease-out),
    transform var(--cc-duration-slow) var(--cc-ease-spring);
}
.panel[data-state='closed'] {
  transition-duration: var(--cc-duration-fast);
  transition-timing-function: var(--cc-ease-exit);
}
/* Under prefers-reduced-motion the tokens are 0ms and the spring is ease-out. */
  • duration-instant 70ms
  • duration-fast 140ms
  • duration-normal 240ms
  • duration-slow 400ms
  • ease-out Entries: fast start, soft landing.
  • ease-exit Exits: leaves at full speed.
  • ease-in-out Moving between two resting places.
  • ease-spring Movement and scale only, never opacity or colour.

Enter and exit

Exits run one step shorter than entries, so closing never feels slower than opening.

  • Dialog

    Enter
    fade normal · ease-out, rise slow · spring
    Exit
    fade and drop fast · ease-exit

  • Sheet

    Enter
    slide normal · ease-out
    Exit
    slide fast · ease-exit

  • CommandPalette

    Enter
    fade normal · ease-out, drop slow · spring
    Exit
    fade and lift fast · ease-exit

  • Popover

    Enter
    fade and scale fast · ease-out
    Exit
    fade and scale instant · ease-exit

  • Toast

    Enter
    fade normal · ease-out, rise slow · spring
    Exit
    fade and drop fast · ease-exit

State changes

Use each one to see it move. Replay arrivals remounts Avatar and Alert, which only move when they appear.

  • Button

    Press
    scales to --cc-press-scale instant · ease-out; reduced motion keeps it at 1
    Hover
    fill fast · ease-out

  • Accordion

    Open
    height and fade normal · ease-out
    Close
    fast · ease-exit; chevron turns fast · in-out

  • Tabs

    Select
    underline slides slow · spring

  • Tooltip

    Enter
    fade and scale fast · ease-out
    Exit
    instant · ease-exit

  • DropdownMenu

    Enter
    fade and scale fast · ease-out
    Exit
    instant · ease-exit

  • Select

    Enter
    fade and scale fast · ease-out
    Exit
    instant · ease-exit

  • Combobox

    Enter
    fade and scale fast · ease-out
    Exit
    instant · ease-exit

  • Checkbox

    Check
    fill fast · ease-out, mark slow · spring
    Uncheck
    instant · ease-exit

  • Slider

    Step
    keyboard steps glide fast · ease-out
    Hold
    thumb grows fast · ease-out; drags never lag
    Monthly quota 40 GB

  • ToggleGroup

    Change
    fill and colour fast · ease-out

  • Pagination

    Change
    fill and colour fast · ease-out

  • Avatar

    Load
    image fades in normal · ease-out

  • Alert

    Arrive
    fade and settle normal · ease-out

    Key saved

    ci-deploy can now write.

  • RadioGroup

    Select
    dot fades fast · ease-out, scales slow · spring

  • Field

    Error
    fade and settle normal · ease-out

    Error: Enter an address like ada@example.com

  • Input

    Invalid
    border and ring fast · ease-out

  • Table

    Row
    hover and selection fill fast · ease-out
    Keys to hover
    NameScope
    ci-deployread, write
    dashboardread
    old-importerread