Lightbox

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.

Get started

Let's start with the basic HTML structure for our image gallery and overlay:

<nav>
    <ul class="items-container">
        <li>
            <img src="your-image-1.jpg" alt="Image 1" width="200" height="150" />
        </li>
        <li>
            <img src="your-image-2.jpg" alt="Image 2" width="150" height="200" />
        </li>
        <li>
            <img src="your-image-3.jpg" alt="Image 3" width="200" height="150" />
        </li>
        <li>
            <img src="your-image-4.jpg" alt="Image 4" width="200" height="150" />
        </li>
        <li>
            <img src="your-image-5.jpg" alt="Image 5" width="150" height="200" />
        </li>
        <li>
            <img src="your-image-6.jpg" alt="Image 6" width="200" height="150" />
        </li>
    </ul>
</nav>

<div id="overlay">
    <img src="" alt="" />
</div>

<style>
    /** Copy styles from example source code */
</style>

We have a grid of thumbnail images and a hidden overlay that will contain the enlarged image. The overlay is positioned to cover the entire viewport with a semi-transparent black background.