Animation sequence on clicking link during transition

[kkopp001]

Hey Swup folks,

I've been a long-time user of barba.js, but I'm really digging swup and thinking of making the switch. Hoping to get it running smoothly for my next projects!

I've encountered an issue with the animation sequences when navigating between pages.

Situation:
When the transition of new content begins (animation:in:start), if I click on another link before this animation completes, it correctly triggers the animation:out:start to begin the transition out for the subsequent page request.

Problem:
However, instead of following the expected sequence and progressing to animation:out:end, the system prematurely jumps to animation:in:end. Immediately after, the visit:end event is fired. This out-of-order sequence creates an apparent lag or glitch in the animation, disrupting the smooth transition experience.

Expected Behavior:
When a link is clicked during the animation:in:start phase, the current "in" animation should be properly interrupted or ended. The system should then start the "out" animation for the subsequent page request, ensuring the correct sequence of events: animation:out:start followed by animation:out:end.

I believe there might be an underlying state management or event handling issue that's causing this behavior.

Has anyone else experienced this, or can offer guidance on how to ensure the animations don't overlap or become out of sync when links are clicked mid-animation? Any insights or suggestions would be greatly appreciated.

Thank you for your assistance!

[hirasso]

Hi @kkopp001 ,

thanks for bringing this up again. The promise-based nature of swup makes it very hard to exit/abort currently running page visits smoothly. It's a hard problem that probably would need a major overhaul of swup's internals. I'll create an issue so that we can think about this again.

[daun]

@kkopp001 Out of curiosity, how does barba handle this scenario? When a new visit was just started and a new link is clicked in the meantime, how does barba ensure the current animation is ended correctly? Does it wait for the current visit to finish completely before starting the next visit? Is there a specific hook you can use to finish these types of animations?

And what's the perfect scenario here? Finishing the current animation every time before starting the next one? Or finding a way to "short-circuit" the running animation and then immediately starting the next one? Or something else?

[kkopp001]

@daun In my experience with barba.js using JavaScript animations, it handles these scenarios by simply interrupting the current page transition animation and then starting the new one. There's no waiting for the current visit to finish completely before initiating the next; it's more about an immediate transition from one animation to the next.

Regarding the ideal scenario, I believe it aligns with what I described in my initial message:

"When a link is clicked during the animation:in:start phase, the current "in" animation should be properly interrupted or ended. The system should then start the "out" animation for the subsequent page request, ensuring the correct sequence of events: animation:out:start followed by animation:out:end."

[daun]

Thanks for the clarification! We'll think about how to handle this scenario best. Interrupting JS animations should be simple enough, let's see how to do this for swup's CSS-based animations.

[hirasso]

@kkopp001 Rapid navigation has been greatly improved with swup 4.5. Could you install it and give us feedback here? 🙂

[kkopp001]

Thats great to hear!! I’m working on a project where I’ll need to use swup. Give me a few days and I’ll give you some feedback 😄