ScrollTrigger start/stop, gsap.set, weird behavior at in or out animation.

[[email protected]]

Hey! I tried to read through the documentation (well, I tried to research hard and RTFM), looked for the common mistakes, watch the video, etc... Still, I can't build what I'm trying to.

 

What I'm trying achieve is to simply have an object containing basic in/out animation setup for repeating elements, like headers, a paragraphs, dividers, etc., and trigger the animation when the element enters to the viewport, and reverse it when leaves it. 

When the start/end set to the top/bottom of the viewport, it works ok, but when not, weird things start to happen. Somehow I can't make it work. I could write more what is wrong, but I think it's just easier to show:

See the Pen jOVEmVM by marxcie (@marxcie) on CodePen.

 

[ZachSaucier]

Hey [email protected] and welcome to the GreenSock forums.

 

2 minutes ago, [email protected] said:

When the start/end set to the top/bottom of the viewport, it works ok, but when not, weird things start to happen.

That sounds like one of our most common ScrollTrigger mistakes.

[ZachSaucier]

Also did you mean to post this in the GSAP forums? Or here in the freelance forums (i.e. you want to pay someone to help you with this)?

[[email protected]]

Thank you for your quick reply. I swear I've read this, but now I don't know anymore. And no, I didn't meant to post this to the freelancer topic. Sorry, I'm struggling with this too long, and I'm very tired. I'll delete this post ASAP. 

Only if I could. Please delete it for me. 

[ZachSaucier]

@[email protected] I went ahead and migrated it for you  

 

Did you look at the most common ScrollTrigger mistakes article?

[GreenSock]

I think you may have been overcomplicating things a bit - is this what you're looking for?: 

See the Pen 7142c976841451f497dbfe6c4f063736?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

[[email protected]]

Hi @ZachSaucier, perfect, thank you. Honestly, I thought I've read it through, but obviously I did not. Or I was lost among my many GSAP tabs, and eventually skipped it, I don't know. ?‍♂️ Anyways, thanks for your help, and I will try to pay more attention to docs and how-to's before I post. ?

Hi @GreenSock yep, exactly. I was playing around with the toggleActions, but somehow I didn't work for me, I think I messed up the loop, and it didn't call the the right elements. Thanks again, I think I can pick it up from here, build the basic animations, and I have to start to think about more complex animation sequences. 
Ahh, btw, it's good to be back, and I'm excited to learn GSAP, again. I used your library a long time ago when Flash websites and banners were a thing. I haven't done too much development since then, but looks like GS never lost its awesomeness! 

[GreenSock]

5 hours ago, [email protected] said:

Hi @GreenSock yep, exactly. I was playing around with the toggleActions, but somehow I didn't work for me, I think I messed up the loop, and it didn't call the the right elements. Thanks again, I think I can pick it up from here, build the basic animations, and I have to start to think about more complex animation sequences. 

No problem! Yeah, let us know if you need any more GSAP-specific help and we'd be happy to jump in. 

 

5 hours ago, [email protected] said:

Ahh, btw, it's good to be back, and I'm excited to learn GSAP, again. I used your library a long time ago when Flash websites and banners were a thing. I haven't done too much development since then, but looks like GS never lost its awesomeness! 

Yay! Welcome back. I love hearing from folks who used GSAP back in the Flash days. We do keep iterating and making it better over the years, and there are no plans to stop

 

Enjoy!