Animate only when next page is loaded and ready to be displayed

[YoanRouleau]

Hi there!

I've been trying Swup which happened to be extremely good, and way easier than (for instance) barbaJS. I'm trying to get the same result as this website : https://www.7h34.fr/projets/aquarium-la-rochelle/. Basically, when you scroll at the bottom end, you can direclty access the next page without delay between "in" and "out": everything looks in sync.
Right now, i'm using the SlideTheme and managed to remove the opacity effect so i'm getting quite the same result, but since there's a delay between page 1 and page 2 (load state I guess), i'm almost "done".

Any ideas ?

[daun]

Do you mean having both pages visible at the same time? Or only starting the transition once the page HTML was loaded?

[YoanRouleau]

Yeah, that's about being able to see both pages at the same time. :)

[daun]

Update: the recently released swup 4 supports parallel animations.

Previous answer: it can be done with some customization by hooking into swup events. See prior issues/discussions for details:

• Sync option like Barba?
• Is it possible to start the transition of both pages at the same time?

[YoanRouleau]

Alright! Thanks for your time and answers. :D