scrolltrigger animation reverse

[Lovestoned]

Hi

here is my pen. I want to make my scenario like this;

* when text1 animation complete .greenbox bottom to 20px

* when I scroll back to top .greenbox bottom to default css position

 

Is it possible to animate greenbox back without to add it timeline?

 

thanks.

See the Pen LYbagja by ersenturgut (@ersenturgut) on CodePen

[Patrick Rijkee]

Is there any particular reason you don't wanna add it to the timeline?

Since that is the easy fix here.

 

See the Pen OJbqdxN by parpar78 (@parpar78) on CodePen

[Lovestoned]

OK I know that. But I want to animate greenbox out of scrolling event...

I want users to see the animation without needing to scroll...like a short video I mean...

[ZachSaucier]

Hey Lovestoned. What's wrong with the approach in your original demo in this thread? 

[Lovestoned]

Hi Dear Zach

I want to make kind of animation group...text1 oncomplete must fire greenbox animation...I don't want to make greenbox animation with scroll...a group of animation must play like a little video...is it possible?

 

[ZachSaucier]

7 minutes ago, Lovestoned said:

text1 oncomplete must fire greenbox animation

That's exactly what your demo does in the first post here...

[Lovestoned]

Oh yes sorry...I couldn't make greenbox animation reverse...that is what I need especially...

[Lovestoned]

I think if I give toggleActions to text1 it will be ok...right?

[ZachSaucier]

You can't have a scrub and use toggleActions on a single ScrollTrigger. So you could either use two ScrollTriggers, one for the pin and scrub and one for the toggled animation, or you could use the onLeave and onEnterBack callbacks of one ScrollTrigger (instead of using the onComplete like you're doing now).