Transition of both pages (leaving & coming page) at the same time

[TanimMahbub]

This is a simple demo of what I'm trying to make. The Go Back button is for window.history.back() and it's working fine.

But, there is a small delay between the pages that are coming and leaving. I mean, if you go to a page, the existing page will finish the leaving first, and then the transition of the next page (the page you clicked for) will start. The same thing happens when you try to go back to the previous page. I tried deleting the transition from .is-leaving but that makes it worse.

• I was wondering if the transition of both pages (the page that is leaving and the page that is coming) can start at the same time

• OR if there is any way to control that delay in between (remove, reduce or increase).

• Thanks

[daun]

As this has been answered in the corresponding issue, I'll quote it here for future visitor:

Swup currently doesn't provide an official way of running both the in and out animations in parallel. The current and the next page's content are never in the DOM at the same time.

You can implement this yourself by hooking into swup's lifecycle events and managing the containers yourself: clone the current container after the transitionStart event and then remove it after the transitionEnd event. This will need special care regarding scroll position, absolute positioning, etc.

Feel free to post your solution here for others.