← Playground

Four volumes · CSS 3D

A field guide to easing

Each book is one curve. Rest on a cover to peek inside, open it to watch the curve move.

  • Vol. 01 expo.out

    Vol. 01 Ease out A field guide to easing
    Vol. 01

    Ease out

    Starts fast and lands softly.

    Use it for
    Things arriving: a menu opening, a toast, a card sliding in.
    Avoid it for
    Things leaving. They seem to hesitate on the way out.

    01 expo.out

  • Vol. 02 power3.inOut

    Vol. 02 Ease in-out A field guide to easing
    Vol. 02

    Ease in-out

    Eases away, then settles.

    Use it for
    Something moving from one place on screen to another.
    Avoid it for
    Replies to a click. The slow start reads as lag.

    02 power3.inOut

  • Vol. 03 back.out(1.7)

    Vol. 03 Back A field guide to easing
    Vol. 03

    Back

    Overshoots a little, then comes back.

    Use it for
    Small pops: a badge, a like, a toggle snapping on.
    Avoid it for
    Large panels. The overshoot turns into a wobble.

    03 back.out(1.7)

  • Vol. 04 elastic.out(1, 0.4)

    Vol. 04 Elastic A field guide to easing
    Vol. 04

    Elastic

    Springs past and wobbles to rest.

    Use it for
    A playful moment, used once.
    Avoid it for
    Anything people see every day.

    04 elastic.out(1, 0.4)