WhatTheStar · /design
foundations motion

    Motion

    — Springs

    Click a spring to fire it. Each curve below is a real simulateSpring simulation rendered into a Web Animation.

    snap k=400 c=32
    glide k=180 c=26
    drift k=80 c=22

    — Durations & easings (CSS fallback)

    --motion-duration-instant80ms
    --motion-duration-quick150ms
    --motion-duration-base240ms
    --motion-duration-slow400ms
    --motion-easing-standardcubic-bezier(.2,.8,.2,1)
    --motion-easing-entercubic-bezier(0,.6,.3,1)
    --motion-easing-exitcubic-bezier(.4,0,1,.6)