All motion keywords
Toggletoggle-slide

Slide stack

Old value slides out, new slides in from the side.

Day
tap / hover to play
<AnimatePresence mode="popLayout" initial={false}>
  <motion.div
    key={index}
    initial={{ x: 40, opacity: 0 }}
    animate={{ x: 0, opacity: 1 }}
    exit={{ x: -40, opacity: 0 }}
    transition={{ type: "spring", stiffness: 320, damping: 30 }}
  >
    {value}
  </motion.div>
</AnimatePresence>

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-slide and the recipe lands in your code.

Personality

Pairs naturally with the snap seed (instant, decisive).

Related Toggle moves

Flip
3D Y-axis card flip between two faces
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