logo svelte /motion v0.6.4
FIG-001/ LAYOUT

toggle switch.

A single layout prop turns a CSS flex flip into a smooth FLIP animation. Each direction picks its own transition — snappy spring on the way up, playful bounce on the way down.

  • Flipping align-items between flex-end and flex-start reflows the ball — adding layout on the motion.div turns the resulting CSS reflow into a measured FLIP animation.
  • Transitions are per-direction. spring with high stiffness on the way up gives a confident snap; a custom bounceEase on the way down lets the ball settle playfully.
  • The transition value is typed as MotionTransition — passing a custom easing function (anything (t: number) => number) works just as well as the built-in keywords.
↩ all examples
pattern · flip-toggle mode · live running source
category · layout
sheet · sheet 01 / 01
⟳ to re-run