View animation

An example of animating a layout change using the View Transitions API via Motion's simple view function.

JavaScript
Tutorial time: 5 min
Difficulty

Matt PerryJanuary 6, 2025

Tutorial

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.

Get started

Let's start by creating a simple toggle button with a handle inside:

<button class="toggle-container">
    <div class="toggle-handle"></div>
</button>

<script type="module">
    let isOn = false
</script>

<style>
    /** Copy styles from example source code */
</style>

The button uses flexbox with justify-content to position the handle. When we add the on class later, the handle will jump to the other side.

Notice the .toggle-handle has a special property in the CSS: view-transition-name: toggle-handle. This tells the browser which element should be animated when we use the View Transitions API. You can think of it like giving the element an ID for animations.

Source code

<button class="toggle-container">
    <div class="toggle-handle"></div>
</button>

<script type="module">
    // Note: animateView is currently in alpha and importable via the "motion-dom" package
    import { press, animateView } from "motion-dom"
    import { spring } from "motion"

    let isOn = false

    press(".toggle-container", (element) => {
        animateView(
            () => {
                isOn = !isOn

                if (isOn) {
                    element.classList.add("on")
                } else {
                    element.classList.remove("on")
                }
            },
            { type: spring, bounce: 0.3, visualDuration: 0.3 }
        ).add(".toggle-handle")
    })
</script>

<style>
    .toggle-container {
        width: 100px;
        height: 50px;
        background-color: var(--hue-3-transparent);
        border-radius: 50px;
        cursor: pointer;
        display: flex;
        padding: 10px;
        border: none;
        justify-content: flex-start;
    }

    .toggle-container.on {
        justify-content: flex-end;
    }

    .toggle-handle {
        width: 50px;
        height: 50px;
        background-color: var(--hue-3);
        border-radius: 50%;
    }
</style>