Reversing animations on ScrollTrigger

[KivxD]

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

[akapowl]

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

 

[KivxD]

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.