Overview
Old card in. Strike through + dim. VS pop. New card slams. Chips stagger up.
Build
- 01
Old card slides in and holds.
- 02
SVG stroke-dash strike + grayscale.
- 03
VS pops.
- 04
New card slams (overshoot).
- 05
Stat chips stagger.
.strike { animation: strike-draw 280ms both }
.new { animation: 420ms slam cubic-bezier(0.34,1.56,0.64,1) both }Example source React / TSX
examples/before-after-strikethrough-swap.tsx · Uses the catalog’s shared composition helpers.
Loading source…