DIMAS' TOOLBOX

CSS VIEW TRANSITIONS GENERATOR

Design a page or element transition, play it live, then copy the CSS, HTML and script.

In short

Build a CSS View Transitions animation with seven effects: crossfade, slide, cover, zoom, blur dissolve, wipe and circle reveal. Pick the direction, duration and easing, play it on a live preview, and copy the ::view-transition CSS, the HTML and the startViewTransition script, for the whole page or one named element. It runs in your browser and nothing is uploaded.

PAGE A
Press the button to switch pages
@keyframes vt-out {
  to { transform: translateX(-100%); }
}

@keyframes vt-in {
  from { transform: translateX(100%); }
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 450ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: both;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation-name: vt-out;
}

::view-transition-new(root) {
  animation-name: vt-in;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Example output (default settings)

CSS
@keyframes vt-out {
  to { transform: translateX(-100%); }
}

@keyframes vt-in {
  from { transform: translateX(100%); }
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 450ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: both;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation-name: vt-out;
}

::view-transition-new(root) {
  animation-name: vt-in;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
HTML
<main id="app">
  <!-- the content that changes -->
</main>

<button id="next">Next</button>
JS
function withTransition(update) {
  // Browsers without View Transitions just apply the change.
  if (!document.startViewTransition) {
    update();
    return;
  }
  document.startViewTransition(update);
}

document.querySelector("#next").addEventListener("click", () => {
  withTransition(() => {
    // change the DOM here: swap content, toggle a class, render a route...
  });
});

How to build a view transition

  1. 1

    Press Play transition to run the animation on the preview. Browsers without View Transitions support only switch the content.

  2. 2

    Pick a preset (Slide, Soft crossfade, Circle reveal, Cover, Zoom pop, Blur dissolve) or choose the effect, direction, duration and easing yourself.

  3. 3

    Choose whether to animate the whole page (root) or one element with its own view-transition-name. Tick the multi-page option to add @view-transition for normal link navigation.

  4. 4

    Open the CSS, HTML and JS tabs and copy each one into your project.

  5. 5

    Wrap your DOM change in the generated withTransition() function, or add the @view-transition rule to both pages of a multi-page site. Use Copy link to share your settings.

Questions

What is the View Transitions API?
It lets the browser animate between two states of a page. When you call document.startViewTransition(update), the browser takes a snapshot of the current page, runs your update, takes a snapshot of the new state and cross-fades the two. The snapshots appear as pseudo-elements, ::view-transition-old(root) and ::view-transition-new(root), which you can restyle with ordinary CSS animations. This tool writes those rules for you.
Which browsers support it?
Same-document transitions (startViewTransition) work in current Chromium browsers, Safari and Firefox. Cross-document transitions (@view-transition { navigation: auto; }) are newer and support is narrower, so check caniuse.com for your audience. The generated script checks for document.startViewTransition and falls back to a plain update, so nothing breaks where it is missing. The preview on this page tells you when your browser lacks support.
What is the difference between animating the page and one element?
With the page (root) option, the whole viewport is snapshotted and animated, which suits route changes. With the named-element option, the element gets a view-transition-name and the browser animates only that element, moving and resizing it from its old to its new position. Names must be unique on the page at the moment of the transition. The generated CSS adds overflow: clip to the element's group so sliding content stays inside its box.
How do I animate links between separate pages?
Tick the multi-page option and add the generated @view-transition { navigation: auto; } rule to the CSS of every page involved. Both pages must be on the same origin. The browser then animates normal link clicks using the same ::view-transition rules, with no JavaScript. You can combine it with named elements to morph a thumbnail into a detail image across pages.
Does it respect reduced motion?
Yes. The generated CSS ends with a prefers-reduced-motion: reduce block that sets animation: none on every view-transition pseudo-element, so visitors who ask their system for less motion get an instant change instead. The preview does the same, so if you have reduced motion switched on, it will not animate.
Why do some effects only animate the new page?
Wipe, circle reveal and cover keep the old snapshot still and animate the new one on top of it with clip-path or a transform, which gives a cleaner reveal than fading both. The generated CSS sets mix-blend-mode: normal and puts the new snapshot above the old one for these effects. Crossfade, slide, zoom and blur animate both snapshots.

Related tools

All Color & CSS Tools →

Updated