Looking for a demo of swup animations in action? You are in fact looking at one! These docs are built with swup and CSS-only animations. See below for more isolated examples showcasing swup's features and options.

Click the Edit on Glitch button of each demo to see the code and fork it for experimenting yourself.

Basic animation

Default swup installation with two containers and a fade animation between pages.

Slide animation

Slide pages into view horizontally.

Overlay animation

Cover content while loading the new page.

Multiple animations

Use swup's animation classes for other elements than the main content containers.

Slideshow animation

Animate between pages as a horizontal slideshow. Uses the Parallel Plugin to show both pages at the same time and the Preload Plugin to preload the slides.

Reveal animation

Reveal the next page using masks and gradients. Uses the Parallel Plugin to show both pages at the same time.

Fragment support: modal

Load sub-pages as modals. Uses the Fragment Plugin to dynamically select containers based on route.

Fragment support: list

Uses the Fragment Plugin to replace only the items of a list when applying filters.

Animated forms

Animate form submissions using the Forms Plugin.

Inline forms

Submit simple forms in place without full page loads using the Forms Plugin.

Infinite scroll cache

Persist items loaded with infinite scroll between page visits.