Page wipe
An example of combining a full page wipe with a shared element transition using Motion's view function. The view function is built on the browser's native View Transition API.
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.