search

swup / swup

Versatile and extensible page transition library for server-rendered websites 🎉
https://swup.js.org
MIT License
4.63k stars 195 forks source link

Is it possible to start the transition of both pages (the leaving page & the coming page) at the same time? #447

Closed TanimMahbub closed 2 years ago

TanimMahbub commented 2 years ago

Discussed in https://github.com/swup/swup/discussions/443

Originally posted by **TanimMahbub** July 9, 2022 [This is a simple demo of what I'm trying to make](http://preview.tanim.me/swup-demo/). The **Go Back** button is for `window.history.back()` and it's working fine. For an easier way to discuss, I made a [codesandbox example](https://codesandbox.io/s/swup-example-sim23p?file=/index.html). 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 commented 2 years ago

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.

If you require that feature out of the box, you could check out barba.js which has a sync mode built in.

TanimMahbub commented 2 years ago

Thank you so much for the answer, I'll let you know the update when I try to solve it this way.

daun commented 2 years ago

I'll close this for now as this is more of a question than an issue. Let us know how you managed to implement a synchronous animation, might be useful for later visitors.

daun commented 1 year ago

We've just released swup 4 which supports parallel animations.