swup / parallel-plugin

A swup plugin for animating the previous and next page in parallel  🎏

swup 4 is released  🎉  Check out the release notes and upgrade guide.

Swup

Versatile and extensible page transition library for server-rendered websites.

Features • Demos • Plugins • Themes • Documentation • Discussions

Overview

Swup adds page transitions to server-rendered websites. It manages the complete page load lifecycle and smoothly animates between the current and next page. In addition, it offers many other quality-of-life improvements like caching, smart preloading, native browser history and enhanced accessibility.

Make your site feel like a snappy single-page app — without any of the complexity.

Features

• ✏️ Works out of the box with minimal markup
• ✨ Auto-detects CSS transitions & animations for perfect timing
• 🔗 Updates URLs and preserves native browser history
• 🏓 Manages the scroll position between pages and anchor links
• 🚀 Uses a cache to speed up subsequent page loads
• 📡 Offers hooks to customize and extend the page load lifecycle
• 🔌 Has a powerful plugin system and many official and third-party plugins
• 🎨 Provides ready-to-go themes to get started quickly

Demos

Explore our interactive demos to see swup in action.

Documentation

Visit our official documentation to learn more.

Plugins

Swup is small by design. Extended features can be added via plugins:

• Display a progress bar while loading
• Enable smooth scrolling between visits
• Update meta tags and stylesheets after page loads
• Add support for preloading pages in the background
• Improve accessibility for screen readers
• Perform your animations in JS instead of CSS transitions
• Animate form submissions
• Get help in debug mode

Check out the list of official plugins and third-party integrations.

Themes

Get started quickly with one of three official themes: fade, slide, and overlay.

Examples

Take a look at the interactive demos and sites using swup for more examples.

Having trouble?

If you're having trouble implementing swup, check out the Common Issues section of the docs, look at closed issues or create a new discussion.

Want to Contribute?

We're looking for maintainers!   👀

Become a sponsor on Open Collective or support development through GitHub sponsors.

This project is tested with BrowserStack.

parallel-plugin's Issues

is-next-container class is not applied during transition.

Hi there,

First of all, thanks for this great plugin, it is a very welcome addition to swup.

When using this plugin, the is-previous-container class gets applied to the previous container as described in the docs, however, the is-next-container-class does not get applied to the newly inserted next container.

This can also be seen in the demo that is linked on the plugin's doc page:
https://replit.com/@swupjs/Swup-Demo-Slideshow

[Bug]: sometimes styles are not applied to .is-next-container

What did you expect? 🧐

Styles to apply to .is-next-container before class is removed

What actually happened? 😵‍💫

Styles are not applyed to .is-next-container before class is removed.

This issue only occurs when plugin is included from a CDN as UMD module (as it is suggested in documentation). It took me a while to figure out that forceReflow function is not included in output file - class is applied and then immediately removed:

Although it is included in module file, that's why it works correctly in your demo (it uses CDN link with module), but have inconsistent behavior in this demo (same code, but uses CDN UMD link)

Swup and plugin versions 📝

• swup: 4.5.1
• parallel-plugin: 0.3.0

What browsers are you seeing the problem on? 🧭

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output 🤓

No response

URL to minimal reproduction 🔗

https://stackblitz.com/edit/web-platform-bmtpwk?file=index.html,page-2.html,page-3.html,page-4.html,base.css,pages.css,transitions.css,swup.js

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

Add `content:insert` and `content:remove` hooks

Describe the problem

• There's currently no way of accessing the new container before it's inserted into the dom
• This makes debugging and adding initial styles to containers harder than necessary
• Discussed in #8

Describe the proposed solution

• Create a new hook content:insert
• Create a new hook content:remove
• Or maybe content:enter and content:leave

Alternatives considered

• Modify the HTML with initial styles

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it

Clarify lifecycle documentation

The docs are a bit unclear about when exactly the is-next-container class is added, and when it is removed. Also, the description of the styles is misleading in defining them as the style of the next container when done — they're actually the styles when starting the animation.

Check accessibility

• Duplicate content
• Announcements?

Allow keeping the previous container indefinitely

Describe the problem

• Currently, the plugin discards the previous content after the animation
• Some layouts require keeping a copy of the previous content indefinitely
• Stacked layouts, multi-column slideshows, etc.

Describe the proposed solution

• Add an option to keep X previous content containers around
• Think about browser history visits

Alternatives considered

• Create a project-specific plugin or use hooks with custom logic

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it

Check compatibility with fragment plugin