Motion study

Before After Strikethrough Swap

Loading…
Sceneportrait

Overview

Old card in. Strike through + dim. VS pop. New card slams. Chips stagger up.

Build

  1. 01

    Old card slides in and holds.

  2. 02

    SVG stroke-dash strike + grayscale.

  3. 03

    VS pops.

  4. 04

    New card slams (overshoot).

  5. 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…