View animation
Matt Perry
In this tutorial, we're going to build the View animation 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 View animation 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 View animation example shows how to animate layout changes using the browser's View Transitions API with Motion's animateView function. When you click the toggle, the handle smoothly slides from one side to the other - but instead of manually animating the position, we just change the CSS layout and let animateView handle the animation automatically.
This example also uses the press gesture from Motion to detect clicks, and the spring easing function to create a bouncy animation.
One of the biggest benefits of using animateView over traditional CSS transitions is that it can animate between completely different layouts. With CSS, you'd need to manually animate the translate property. With animateView, you simply change the layout (like switching from justify-content: flex-start to flex-end) and Motion figures out the animation for you.
