Lightbox
Matt Perry
In this tutorial, we're going to build the Lightbox example step-by-step.
This tutorial is rated beginner difficulty, which means we'll spend some time explaining the Motion APIs that we've chosen to use (and why), and also any browser APIs we encounter that might be unfamiliar to beginners.
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Lightbox tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
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.
