All motion keywords
Toggletoggle-flip

Flip

3D Y-axis card flip between two faces.

Off
On
tap / hover to play
const [on, setOn] = useState(false);

<motion.button
  onClick={() => setOn((o) => !o)}
  animate={{ rotateY: on ? 180 : 0 }}
  transition={{ type: "spring", stiffness: 260, damping: 22 }}
  style={{ transformStyle: "preserve-3d", perspective: 800 }}
/>

How to use it

Copy-paste

Grab the code above and drop it onto any motion.* element.

Or name it

In Claude Code / Cursor, run /ss-motion toggle-flip and the recipe lands in your code.

Personality

Pairs naturally with the spring seed (bouncy, energetic).

Related Toggle moves

Slide stack
Old value slides out, new slides in from the side
Morph
Shape morphs — pill ⇄ circle, width + radius
Curtain
Top→bottom clip-path wipe reveals the panel
20+ named motion moves
All copy-paste, all in StyleSeed’s design engine. MIT.
Browse the gallery Star