Motion study

Panel Slide In

Loading…
Motif

Overview

translateX(panelWidth → 0). Prefer CSS over onFrame.

Build

  1. 01

    offsetPx = panel width.

  2. 02

    duration 300–500ms.

  3. 03

    ease-out.

.panel { animation: 400ms panel-in both }
Example source React / TSX

examples/panel-slide-in.tsx · Uses the catalog’s shared composition helpers.

Loading source…