View animation
An example of animating a layout change using the View Transitions API via Motion's simple view function.
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.