Skip to content

Transitions

This activates the View Transitions API with cross-document animations.
CSS properties can be changed via Config.

src/base/transitions.css

css
@view-transition {
    navigation: auto;
}

::view-transition-group(main) {
    animation-duration: var(--view-transition-main-duration);
}

::view-transition-new(main) {
    animation-delay: var(--view-transition-main-duration);
}

Add view-transition-main class to any element you want to animate page navigation.

src/utilities/view-transition.css

css
.view-transition-main {
    view-transition-name: main;
}

Released under the MIT License.