Jump to content
GreenSock

Juku123

Page transitions not work on browser back button click

Recommended Posts

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.

 

1472042519_Image1.thumb.png.4842bdf71050e27867e403cdc0bf97c2.png

 

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 by Juku123
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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. :(

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×