Jump to content

Alex Salicki

How reverse animations when i leave the page ?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello everyone :) 

I'm a beginner of JS and GSAP animations and i would like to reverse all animations with tl.reverse() when i leave my page , when i come back to home page for example.

This is my code but it work just when i click to a button of my page...


Can you help me ? 

Screen Shot 2018-01-27 at 14.33.11.png

Link to comment
Share on other sites

Hi Alex,


I'm not sure I understand what you mean – if you leave the page, wouldn't it be replaced by the new page that you opened? So, your timeline wouldn't be visible anymore...?

Link to comment
Share on other sites

Hi :) 

Yes,  if i leave the page it be replaced by the new page but i would like animations on my element when i leave the page to go back to the homepage for example.

This is a perfect example that i would like to have on my website when i go back to a page :http://fantasy.co/work/tinder-for-travel

Link to comment
Share on other sites

Do you mean that when you press "go back" on your browser, the current page stays visible and animates back to what was shown before?

If that's the case, you need to use functionality that's beyond the scope of GSAP to intercept the browser's 'go back' behaviour. You should have a look at this page: https://developer.mozilla.org/en-US/docs/Web/API/History_API and potentially History.js which is no longer maintained but could still be useful. Once you successfully detect that the user is trying to go back and prevent the default browser behaviour of actually reloading the previous page, then you can look into how to reverse your timelines to make your website 'smoothly' go back to the state it was in before. 

  • Like 2
Link to comment
Share on other sites

Very thank you very much for your help! 
I looked at the API and it is has little hard to understand for bit me... I am going to forget it at the moment... 
But I would like when I click we have button in my which returns page me in

to my homepage, that my animations are made in reverse when I leave my page! This is my code but no animations are made …
It works perfectly when  I use  .mouseover (when I overfly my the button) but when I click on the button to reach my homepage, any animations are made in reverse…

Do you think able to help me on this problem? Miss it things in my code?

Screen Shot 2018-01-28 at 16.59.43.png

Link to comment
Share on other sites

Alex, I'm afraid we don't have enough context to help you as it is... There's nothing in the code you posted that suggests anything should happen with mouseover, and there's nothing immediately wrong that I can see assuming everything else is set up right – except that your code should end with }); not })}. With no more information, it's hard to point you in the right direction beyond that.


Please consider sharing more code, and if possible use a codepen following the instructions here: 


  • Like 1
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.