Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Reversing animations on ScrollTrigger

Go to solution Solved by akapowl,

Recommended Posts

Hi, I'm very new to GSAP and I would like to know if what I'm trying to do is possible.


The CodePen I made is a simplified form of the animation I want, but the elements and the way I'm trying to animate them is essentially the same. I'm wondering if it's possible to have an animation like that play on the initial page load and then have it reverse completely when a ScrollTrigger is triggered. 


The other animations I made for the page I'm building have different closing animations that trigger on scroll, but this particular animation is one that I want to reverse back to it's initial state. The rest work as expected, but I can't seem to get reverse animations right.


Any help would be greatly appreciated, thank you very much!

See the Pen QWgMZEd by KivxD (@KivxD) on CodePen

Link to comment
Share on other sites

  • Solution

Hey @KivxD


It could be as easy as calling a tl.reverse() in an onEnter callback of a ScrollTrigger.

But depending on how and when exactly you want things to happen, the logic behind that could become more complex.


See the Pen b1d5b33091bf0c258f7784bba4c37c71 by akapowl (@akapowl) on CodePen


  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Hi @akapowl! This works perfectly for me, thank you so much! I only needed the animation to reverse when scrolling from one section to another, so this is more than sufficient.

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