Introduction
The Lightbox example shows how to create an image gallery with smooth shared element transitions. When you click an image in the gallery, it expands into a full-screen lightbox overlay with a seamless animation that morphs the thumbnail into the enlarged view.
This example uses press from Motion to detect clicks on images, animateView to create smooth view transitions between the thumbnail and lightbox states, and spring for natural, physics-based animations.
Compared to traditional JavaScript approaches that require manually calculating positions and animating transforms, Motion's animateView function leverages the browser's View Transition API to automatically handle the complex math of morphing elements between states. This means you can focus on what changes rather than how to animate those changes.