I want animation to run forward and reverse

[artyor]

Hello guys,
1st of, I want to say that I did alot of research on this one, and the solutions I found weren't the best, so I was hoping somebody could help me here.
I'm also aware that ScrollMagic is not made by Greensock, and that people try to keep forum focused on GSAP, but I had no better place to ask, since scrollmagic issue page is very inactive. I hope you wont mind my question.

I use GSAP(TimelineLite) and ScrollMagic to animate element once it gets triggered by ScrollMagic's TriggerElement. And that works fine,
if I keep scrolling, element will stay in animated state, unless I scroll up again, way about trigger element, and then the animation will reverse (usually not visible because of tiggerElement position). And then it plays again once i scroll down to triggerElement, this also works fine, just as I wanted.

But another thing that I want, is also, when I scroll down past the animated element, I want it to do reverse animation (or just fades out, doesnt matter as it wont be visible since we scrolled out of viewport). And then i want animation to run again once I scroll up.

TL;DR: I want animation to play on both, scroll down and scroll up ways, once it is in triggerElement. 

The solutions I have found: 
The solutions I found were the make 2 scenes one for animate in and other to overwrite it, however, Jan Paepke said this can be glitchy and not working properly depending how fast user scrolls, and here is his look at this problem: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another
(My CodePen doesn't have this solution included)

Now, this solution is from 2014, and I dont think it's very clean one, so I was hoping that someone can help me find better solution.
PS
Im also aware that Blake has solution without ScrollMagic, but Im JS noob so I would rather not. 
Thanks in advance for your time

See the Pen qzPrdL by artyor (@artyor) on CodePen

[PointC]

I don't really understand this:

 

1 hour ago, artyor said:

I want it to do reverse animation (or just fades out, doesn't matter as it wont be visible since we scrolled out of viewport).

 

You want to animate something that isn't in view?

 

The warning you posted is if you animate the same properties. That's when an overwrite will occur. If you simply want the first scene to scale and then fade out, a second scene with a new trigger would work fine. They aren't animating the same properties.

 

See the Pen RzLZyr by PointC (@PointC) on CodePen

 

Happy tweening.

[artyor]

@PointC Hello, thanks for answering.

I do want to animate same properties when I enter the view port, either from scroll up or scroll down, that's the problem.
But I dont care how will they be animated out when exiting the viewport as I wont see it or will only see small part of it.
I also dont need them to be necessary animated when exiting the viewport, but just them to reset to orginal position so animation works when scrolling up.
I wish the orginal animation when scrolling down also plays when scrolling up.

This can get alot tricky when animating a lot of properties, codepen was just fast example I made. 

 

[PointC]

Well, you'd have to have some kind of second trigger to set the animation back to the beginning. You'd also want to use ScrollMagic's events to play the animation rather than setting the tween in the scene.

https://scrollmagic.io/docs/ScrollMagic.Scene.html#event

 

Something like this:

scene.on("enter", function(event) {
  tlbox.play(0);
});

 

You could use an onComplete to rewind the animation back to the beginning, but that probably isn't a good solution since the user may have stopped scrolling at that point. A lot of this will be tricky since you don't have a duration set. The enter/leave triggers are the same so this will definitely be odd. 

 

ScrollMagic does have premium support available:

https://support.scrollmagic.io/

[artyor]

@PointC Thanks for your time! And sorry for bothering too much about something that is not gsap directly. Really couldnt find anything on net.

[PointC]

Yeah, I wish we had the resources to help with everything, but there are only so many of us and we need to focus on GSAP questions and problems. 

 

Just to be clear on your project — setting a duration for the scene will make your life easier because the enter and leave triggers won't be sitting on top of each other. So you could do something like this:

 

See the Pen RzLBQq by PointC (@PointC) on CodePen

 

Hopefully that helps a bit. Good luck and happy tweening.

[artyor]

@PointC Hey mate, that's exactly what I needed!
I will only replace tlbox.pause with .reverse.
I have been playing with on enter and on leave but couldn't figure it out alone.

Thank you again