Page transitions not work on browser back button click

[Juku123 3 Likes (Newbie)]

Hi, I'm trying to create page transitions. Everything seems to be working fine but I discovered that when I use the browser's back button then the transition freezes. The browser goes back to the previous page but out animation hideLoad(); does not work. It just won't go away. I hope you understand what I mean. Sorry, I can't share the live webpage right now. CodePen only.

 

That's how it stays. I need to refresh the page to make it go away. Hopefully someone can help me.

 

 

Here is the full page demo: https://cdpn.io/pen/debug/VwryELd?authentication_hash=VJrxxRxOdGzr

 

 

See the Pen VwryELd by mrWilson123 (@mrWilson123) on CodePen

Edited February 17, 2022 by Juku123

[OSUblake 18,535 Likes (Superhero)]

Hi Juku,

 

I think you would need to prevent the back button behavior, kind of like how you are doing preventDefault on your links. This looks like a good topic to start researching how to do that.

 

https://stackoverflow.com/a/40400661/2760155

 

If that doesn't work, you may need to use a library that specializes in doing page transitions.

 

[Juku123 3 Likes (Newbie)]

Thank you for the reply. Unfortunately, preventing the back button is not the solution. Especially for mobile devices. That would be a very bad user experience.

[GreenSock 18,878 Likes (Superhero)]

I wish we could help more, @Juku123 but this isn't a GSAP issue. It sounds like something related to your routing or the framework you're using. Perhaps it leaves duplicate elements on the screen? I'd recommend trying to add console.log() calls right before your animation code that check for the existence of the elements you're trying to animate at that time. I'm not sure what else to tell you - we can't troubleshoot blind (the codepen didn't replicate the behavior for me). We really try to keep these forums focused on GSAP-specific questions (please read the forum guidelines). 

 

Good luck with the project!