Back to components

Gallery → Lightbox

Compose Radix Dialog, Embla, and Motion into one gallery → lightbox interaction

The whole composition hinges on one line: watchDrag: () => !isZoomedRef.current. Embla evaluates the predicate before each drag, and a shared ref flips it off the moment the active slide zooms past scale: 1 — Motion's onPan claims the gesture instead.

Tap to zoom, drag to pan; release the zoom and Embla takes the drag back. Radix Dialog handles the shell.

View source