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.
Default swup installation with two containers and a fade animation between pages.
Slide pages into view horizontally.
Cover content while loading the new page.
Use swup's animation classes for other elements than the main content containers.
Animate between pages as a horizontal slideshow. Uses the Parallel Plugin to show both pages at the same time.
Reveal the next page using masks and gradients. Uses the Parallel Plugin to show both pages at the same time.
Load sub-pages as modals. Uses the Fragment Plugin to dynamically select containers based on route.
Uses the Fragment Plugin to replace only the items of a list when applying filters.
Animate form submissions using the Forms Plugin.
Submit simple forms in place without full page loads using the Forms Plugin.
Persist items loaded with infinite scroll between page visits.