Split transforms into axes

Split transform into typed --x and --y, and time each axis apart.

From design-motion-principles, cookbook §7. See @jh3yy on X ↗.

Same keyframes, two paths

Press Throw. Same three keyframes, different paths.

One transformBad
transform at 0% · 50% · 100%
Split --x / --yGood
--x at 0% · 100%, --y at 50%

Shape the arc

Drag the handle to move the peak, then Throw.

Split --x / --yLive
--y: -250% at 50%

Toss into a tray

Add a tag and compare the two flights.

translate(dx, dy)Bad
invoices
0 tags
transform 400ms ease-in-out
--tx / --tyGood
invoices
0 tags
--tx ease-in, --ty ease-out

Why it matters, pros and cons

Why it matters

One transform moves both axes in a line. Split axes ease apart, and curve.

Pros

  • Pure CSS, no motion-path SVG
  • Per-axis easing gives an exact parabola
  • Each axis can be retimed on its own

Cons

  • Custom properties recalc style on the main thread
  • Needs @property, or values flip at 50%
  • Menus and dialogs should move in straight lines