FIG-001/ VARIANTS

function-form variants.

Seven cards. One variants map with three function-form states (fanned, exploded, stacked). Each card resolves the active state by passing its own index in via custom={i} — per-instance values without writing seven keyframe blocks.

  • Each variant value is a function — (i) => keyframes — instead of a literal object. The function receives whatever the motion component's custom prop holds, and resolves at evaluation time.
  • custom={i} on each card forwards its array index into the variant function. x: offset * 22, rotate: offset * 9, etc. become per-card values; the variants map stays a single source of truth.
  • Hovering a card raises it via whileHover — a plain object since hover doesn't need custom. Function and object form variants co-exist in the same map.
↩ all examples
pattern · dynamic variants mode · live running source
№1
№2
№3
№4
№5
№6
№7

// state: fanned — every card resolves variants[fanned](i)

category · variants
sheet · sheet 01 / 01
⟳ to re-run