Micro View Transitions

View Transitions are awesome. I love to see examples showing how they can genuinely improve user experience by visually communicating what is happening.

But what about interactive components? Little animated touches, when done right, make interfaces feel more responsive and fun. Most micro-interactions can be handled with CSS transitions and animations but I was curious whether view transitions deserve a place in the design engineer’s toolbelt for component-level animation too.

The example: “arrange the words” UI

If you use Duolingo, yo’ve seen this type of excercise type where you need to translate phrases by arranging the English words in the right order:

This kind of animation used to take tons of JavaScript and was often impractical for performance reasons. Words move between two containers, the remaining items reflow to fill the gaps, and every position change needs to animate. You would typically reach for a FLIP-based library like GSAP or motion/react to track positions and interpolate between them.

Setup

To match the Duolingo example, we need two containers:

<div id="sentence-container">
  <!-- words will be moved here -->
</div>

<div id="word-container">
  <button class="word">hello</button>
  <button class="word">world</button>
</div>

To add a view transition, we can just move a word into the sentence container and wrap the DOM update in startViewTransition:

document.startViewTransition(() => {
  sentenceContainer.appendChild(wordElement);
});

Nos gusta aprender sobre View Transitions.

Nice!

The standard animation is a crossfade. If we want the words to move to their new position, each word needs to have a view-transition-name. For same-document view transitions, we can use match-element to derive a unique name from the element identity:

.word {
  view-transition-name: match-element;
}

Nos gusta aprender sobre View Transitions.

Nice!

Much better. But in the Duolingo example, there are visible visible gaps where the words used to be. If we add a wrapper element around each word and give it a fixed width, we can achieve a similar effect:

Nos gusta aprender sobre View Transitions.

Nice!

That’s it! The browser snapshots the element’s position before and after the DOM update and animates between the two.

Where it breaks down

You may have already spotted this but see what happens if you try to click the words fast one after another in this slowed down example:

Nos gusta aprender sobre View Transitions.

Nice!

As you can see, the animation is blocking interaction while it’s ongoing. This happens because view transitions replace the page with screenshots while animating, so pointer events are blocked until the transition settles. Unfortunately, this makes them unsuitable in many situations. If you need interruptible animations, an animation library using the FLIP technique continues to be your best bet.

NOTE

Scoped view transitions will allow running view transitions on any element, with pointer events only blocked within that subtree rather than a whole page. It wouldn’t have helped with our Duolingo example though since all the words share the same container.

Conclusion

View Transitions are great for interactions where one thing moves at a time and the user waits for it to complete. A progressive disclosure flow, re-ordering a list or updating parts of the page in response to content updating. They’ve been baseline available since October 2025, so it’s a great time to start using them more.

However, if you’re building an interaction that is fast or concurrent — rapid tapping, anything where you need to interrupt mid-flight, something like the Web Animation API or a FLIP-based animation library is still the right move.