Guide

Playground

One example, and every option that changes what you see. Change one thing, zoom in and out, and the code below shows the line you need. Nothing else.

Live exampleOpen ↗

Motion duration 1s ease cover The covers are square and the albums are wide, so cover has something to decide. Round tracks open round views: nothing to decide there.

Behind effects animate them hide trigger stagger 0 What happens to the views waiting behind the current one. Zoom two levels deep to see both layers.

Navigation back button sibling bar Every option of both controls, live: Navigation controls.

Gestures and engine gestures follow driver With follow, scroll down or swipe on the example and the zoom-out moves with you. GSAP, Anime.js and Motion: Drivers.

Nothing set is the default. The code shows only what you changed.

How to use it

Change one thing at a time and zoom in and out a few times. Motion comes first: once duration and ease feel right, the rest is a layer on top. Every option here can also be set on a single trigger with a data-with-* attribute, so one zoom can behave differently from the others. The API reference lists them all.