Page wipe
Matt Perry
In this tutorial, we're going to build the Page wipe 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 Page wipe 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 Page wipe example shows how to create smooth full-page color transitions combined with shared element animations. When clicking a color button, a circular wipe expands from the click position to reveal the new background color, while a white ring seamlessly transitions between buttons.
This effect uses two Motion APIs: animateView, which wraps the browser's native View Transition API to coordinate both animations in a single transition, and press to handle button clicks. The View Transition API is a powerful browser feature that makes it easy to create smooth transitions when the DOM changes.
Motion makes it easy to create these polished interactions with just a few lines of code. The animateView function handles the complex orchestration of updating the DOM and animating the changes, while the browser's native View Transition API ensures the animations are smooth and performant.
