CSS view-transition: Scroll Navigation with Automatic Animations

▶

Can you imagine being able to animate view changes between pages or sections without using external frameworks or libraries?
With View-transition in CSS, that's now possible. This new browser API allows for creating smooth transitions between document states, natively and controlled only with CSS (and optionally some JavaScript).

In this article, I'll show you how it works, how it compares to the classic scroll-behavior: smooth, and how you can apply it today to improve your users' visual experience.

I'm going to show you how you can make internal navigation animated in an HTML document with just one line of CSS code.

Let's remember the basics: we have a link that points to a heading identifier:

<a href="#heading-0" class="block text-lg mt-0 mb-0 text-blue-600 hover:underline ">
view-transition </a>
<h2 id="heading-0">view-transition </h2>

As we know, an identifier must always be unique on the HTML page.

What is view-transition and what is it for

View-transition is a technology that allows animating the visual change between two DOM states—for example, when navigating between pages or dynamically modifying content.

Until recently, achieving something like this required JavaScript, opacity or transform, or even an SPA (Single Page Application) framework.
Now, thanks to the View Transition API, the browser automatically manages the captures before and after a change, and animates them using CSS.

When I started experimenting with smooth animations using scroll-behavior, I noticed that the jump to view-transition was the natural step: the same fluidity, but with total control over the views.

How do we make navigation animated using CSS and the @view-transition rule?

The magic begins with the @view-transition rule in CSS.
It defines how the visual transition behaves when a view change occurs.

html {
  scroll-behavior: smooth;
}

By applying it to the HTML document, navigation automatically becomes animated. It's that simple. With that, every time you clicked a link with href="#section", the page would smoothly slide to the destination. It's that simple.

Alternative with JavaScript

We can also do it very easily with JavaScript.
In the viewer on my academy website, when I click on a link, the same logic is executed: the scroll is automatically performed in an animated way:

document .querySelector(".YourElement")
.scrollIntoView({ behavior: "smooth", block: "center" });

Compatibility and Limitations

Like all new technology, @view-transition still has partial support; to check compatibility, we have:

if (document.startViewTransition) {
 // Usa la API nativa
} else {
 // Fallback con animación manual
}

For this, the scrollIntoView method is used on an HTML element.
You can check the parameters online, but basically, they serve to make the animation smooth and position the viewer in the middle.

Another alternative is to apply it globally on the window object, instead of associating it with a specific element:

  window.scroll({
    top: 0,
    behavior: "smooth",
  });

Conclusion

The arrival of the View Transition API marks a before and after in how we animate the web.
It's no longer just about moving elements, but about creating visual continuity between states, something we previously only saw in native apps.

In my case, moving from scroll-behavior: smooth to view-transition was like leveling up: more control, more fluidity, and the same simplicity.

It's that simple, but with professional results.

Frequently Asked Questions (FAQs)

• What is the difference between View Transition API and scroll-behavior?
  scroll-behavior only animates the viewport scroll, while view-transition animates the complete content change.
• Does it work on all HTML pages?
  Yes, as long as the pages belong to the same domain (origin).
• Can I combine it with frameworks like React or Vue?
  Yes, and in fact, it's a great option for SPAs. You just need to control the renders and call startViewTransition() when changing routes.
• What happens if the browser doesn't support it?
  Nothing serious: the content is displayed immediately, without a transition.