logo svelte /motion v0.8.2
FIG-001/ TRANSFORM

generated transforms, custom order.

The payload still uses Motion shorthand x. transformTemplate receives the generated translateX(...) string and adds a matching vertical lift plus skew before writing the final CSS transform.

  • The card's x MotionValue generates the normal horizontal translateX(...) transform.
  • The template uses that same latest x value to add lift and skew before the generated transform.
  • Because the template owns the final string, transform order stays explicit and inspectable.
↩ all examples
api · transformTemplateinput · style={{ x }}mode · live mode · live running source
// transform-template state: start
// generated straight transform
without template straight
// transformtemplate lift + rotate + generated
with template composed
same MotionValue x template rewrites the transform string
category · transform
sheet · sheet 01 / 01
⟳ to re-run

transformTemplate