Skip to content
Site volume
Colourway

Motion

Curves

Twenty named curves, each drawn live with a dot riding it. Copy a value, and see which moments use each one.

  • Experimental
On this page

Every animation in Overprint eases on one of twenty named curves, printed as --mk-ease-<name> and exported as numbers from @maxgrits/overprint-tokens/motion. Each has a job: out for arrivals that land fast and settle long, stamp for a hard landing, snap for ink jumping into register, pop for things that overshoot and come back. Pick by the job, never by taste in the moment.

Every curve#

  • --mk-ease-popcubic-bezier(0.34, 1.56, 0.64, 1)Hover lifts, a sticker's pop, ticks: past the mark and back.Used by Sticker land, SFX pop, Balloon pop, Impact star, Hover and press, Loader
  • --mk-ease-outcubic-bezier(0.16, 1, 0.3, 1)Panels, the SFX pop and most arrivals: fast, then a long settle.Used by Panel entrance, Sticker peel, Stamp, Proof pick, SFX pop, KeyPop, Focus lines, Speed lines, Hover and press, Pending key, Toast, Disclosure, Dialog, Drawer, Menus and the nav panel, Gauge, Comic hit, Cursor
  • --mk-ease-in-outcubic-bezier(0.7, 0, 0.2, 1)Symmetric moves, like the paper crossfade.Used by Re-ink and theme
  • --mk-ease-stampcubic-bezier(0.2, 0.8, 0.2, 1)A stamp's fall and a cover's print: a hard landing.Used by Stamp, Cover print
  • --mk-ease-dropcubic-bezier(0.2, 0.9, 0.3, 1.1)A row or sheet dropping in, with a small bounce.No kit moment uses it yet: it is yours for your own moments.
  • --mk-ease-landcubic-bezier(0.2, 0.9, 0.3, 1.2)A number landing: a bigger bounce than drop.No kit moment uses it yet: it is yours for your own moments.
  • --mk-ease-titlecubic-bezier(0.2, 0.8, 0.3, 1)A title's arrival and the width stretch-in.Used by Title arrival, Splash title
  • --mk-ease-squeegeecubic-bezier(0.45, 0, 0.35, 1)The press run's passes and the paper wiping off.Used by Press run
  • --mk-ease-foldcubic-bezier(0.6, 0, 0.3, 1)Folding away, and the 404's dominoes.Used by 404 topple
  • --mk-ease-flycubic-bezier(0.5, 0, 0.3, 1)Flights: something crossing the page.No kit moment uses it yet: it is yours for your own moments.
  • --mk-ease-splitcubic-bezier(0.55, 0, 0.8, 0.2)Letters leaving the frame: a slow start, a fast exit.No kit moment uses it yet: it is yours for your own moments.
  • --mk-ease-snapcubic-bezier(0.3, 0, 0.3, 1.6)Snapping into register: overshoots hard and returns.Used by Press run
  • --mk-ease-registercubic-bezier(0.5, 0, 0.2, 1)The second ink's approach to its rest offset.Used by Press run, Second-ink register
  • --mk-ease-slapcubic-bezier(0.2, 0.8, 0.3, 1.3)Rave's panels and stickers slapped on.Used by Panel entrance
  • --mk-ease-squashcubic-bezier(0.5, 0, 0.6, 1)A number squashing out.No kit moment uses it yet: it is yours for your own moments.
  • --mk-ease-wipecubic-bezier(0.25, 0.1, 0.2, 1)The page wipe's bands coming in.Used by Page wipe, Comic panels
  • --mk-ease-wipe-holdcubic-bezier(0.75, 0, 0.25, 1)A wipe band holding the middle of the view.No kit moment uses it yet: it is yours for your own moments.
  • --mk-ease-wipe-exitcubic-bezier(0.6, 0, 0.35, 1)The page wipe's bands leaving.Used by Page wipe
  • --mk-ease-hopcubic-bezier(0.25, 1, 0.5, 1)A block's hop.Used by Block hop, Block loader
  • --mk-ease-fallcubic-bezier(0.3, 0.7, 0.3, 1)A CSS block dropping onto the pile.Used by Block drop, Blocks build on scroll
Every curve: controls

Each dot rides its curve: time runs left to right, the value bottom to top. The band is 0 to 1; an overshoot leaves it and comes back.

Reading a graph#

Time runs left to right; the value runs bottom to top. The dashed lines are 0 and 1: where a move starts and where it rests. A curve that leaves the band overshoots (pop, snap, slap, land, drop) and comes back to rest, which is how a sticker lands past its size or ink jumps past register. The square under each graph crosses its track on the same curve, so you can feel the move without the maths.

In code#

Use the token in CSS, so the curve stays the system's:

.quote-card[data-sent] {
  animation: arrive var(--mk-dur-panel) var(--mk-ease-out) backwards;
}

In script, easeCss returns the cubic-bezier() for the Web Animations API:

import { easeCss } from "@maxgrits/overprint-tokens/motion";

el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, easing: easeCss("out") });

The six curves no kit moment uses yet (drop, land, fly, split, squash, wipe-hold) are named for the moments a site builds itself: a row dropping into a table, a number landing on a stat, letters leaving the frame.