Motion study

Product Tile to Well Morph

Loading…
Partportrait

Overview

On --ef-transition-out-start, lerp the tile rect into the well rect.

Build

  1. 01

    fromRect = hero tile.

  2. 02

    toRect = well.

  3. 03

    overlap window.

.tile { animation: hero-tile-to-well var(--ef-transition-out-start) both }
Example source React / TSX

examples/product-tile-to-well-morph.tsx · Uses the catalog’s shared composition helpers.

Loading source…