swup swup Demos
GitHub swup on GitHub

Demos

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 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.

Try this demo with Replit

Slide animation

Slide pages into view horizontally.

Try this demo with Replit

Overlay animation

Cover content while loading the new page.

Try this demo with Replit

Multiple animations

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

Try this demo with Replit

Slideshow animation

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

Try this demo with Replit

Reveal animation

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

Try this demo with Replit

Fragment support: modal

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

Try this demo with Replit

Fragment support: list

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

Try this demo with Replit

Animated forms

Animate form submissions using the Forms Plugin.

Try this demo with Replit

Inline forms

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

Try this demo with Replit

Infinite scroll cache

Persist items loaded with infinite scroll between page visits.

Try this demo with Replit