Motion study

Grid Card Zoom

Loading…
Part

Overview

Transform the whole grid (origin 0,0) so one cell fills the frame.

Build

  1. 01

    Know panel size + target index.

  2. 02

    zoom scale + tx/ty.

  3. 03

    One CSS keyframe.

.dash { animation: dash-zoom; --zoom-tx; --zoom-ty; --zoom-scale }
Example source React / TSX

examples/grid-card-zoom.tsx · Uses the catalog’s shared composition helpers.

Loading source…