The View Transitions API animates between two states of a page, like a filter change or a navigation, with a smooth cross-fade by default. It replaces heavy JavaScript animation libraries.

Same-page transition with JavaScript

Wrap the DOM change inside document.startViewTransition(). The browser captures the old and new state and animates between them.

function lotgrafixUpdate( callback ) {
    if ( ! document.startViewTransition ) {
        callback();
        return;
    }
    document.startViewTransition( callback );
}

document.querySelector( '.lotgrafix-toggle' ).addEventListener( 'click', function () {
    lotgrafixUpdate( function () {
        document.body.classList.toggle( 'is-dark' );
    } );
} );

Customize the animation

css">::view-transition-old( root ) {
    animation: 0.3s ease both lotgrafix-fade-out;
}

::view-transition-new( root ) {
    animation: 0.3s ease both lotgrafix-fade-in;
}

@keyframes lotgrafix-fade-out {
    to { opacity: 0; }
}

@keyframes lotgrafix-fade-in {
    from { opacity: 0; }
}

Morph a single element between states

Give the element a unique view-transition-name. Each name must be unique on the page at the same time.

.lotgrafix-card-image {
    view-transition-name: lotgrafix-hero-image;
}

Multi-page transitions with only CSS

Add this rule to the stylesheet of both pages, and normal navigations between pages of the same site will animate with no JavaScript.

@view-transition {
    navigation: auto;
}

Respect reduced motion

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

Support note

Same-document transitions work in all modern browsers. Multi-page transitions with @view-transition have narrower support, so treat them as an enhancement. Browsers without support simply navigate normally.