Multiple Scrolltriggers with timelines that move SVGs overlapping each other and not finishing

[fdev]

Hi,

 

As you can see in my codepen below (it is a bit buggy because I have tried to only put in the relevant code) the svg which is the green down arrows should animate as per the screenshot attached but you can see that if you scroll fast you get some of the svg paths still showing as if the timelines havent had time to finish properly.

 

If you scroll slowly you can see the desired effect but I am unable to get it so that the timelines are forced to finish when the next scrolltrigger is triggered and if you scroll fast you are left with random svgs on the page.

 

 

(please note it is best to view this on a full screen as there is styling to change the layout from 768px and lower and will not show issue, thanks)

 

Thanks

See the Pen zYyVLBQ?editors=0110 by fayskerritt (@fayskerritt) on CodePen

[Rodrigo]

Hi,

 

Your demo is far from being minimal (over 600 lines of JS) and is not really clear which GSAP part is the one we should be looking into. That's why we ask for a minimal demo with just some colored divs and not full projects or parts of projects.

 

Based on what I can see the only advice I can offer is to give preventOverlaps and fastScrollEnd a try:

https://gsap.com/blog/3-8/#preventoverlaps-and-fastscrollend

 

Whatch the video @Carl made in order to understand how they work.

 

You can also read about them in the ScrollTrigger Docs:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object

 

Hopefully this helps.

Happy Tweening!

[fdev]

Sorry about that I have edited the demo so it is a lot more minimal and have taken out a lot of unnecessary code.

 

I watched the video you sent and can't see how I can mimic this because the animations it is doing are within a foreach loop and it is the same animation each time whereas my animation is completely different so I can't figure out how to add them all within one scrolltrigger.

 

Let me know if you can see the issue here, if you scroll slow you can see the animation works fine but if you scroll fast there are parts of the svg that are left visible.

 

See the Pen zYyVLBQ by fayskerritt (@fayskerritt) on CodePen

 

Thanks

[Rodrigo]

Hi,

 

I think your example is too convoluted and that you are extremely over-engineering this.

 

For the time being you should completely forget about ScrollTrigger and focus on creating a single timeline that animates the logo in the way you want. Then you can create three different ScrollTrigger instances that play/pause the logo animation using the onEnter/onLeave/onEnterBack/onLeaveBack callbacks. You can use addPause() in order to pause your timeline between sections and use labels as well in order to tell ScrollTrigger to play/reverse the timeline from a specific point:

https://gsap.com/docs/v3/GSAP/Timeline/addPause()

https://gsap.com/docs/v3/GSAP/Timeline/addLabel()

 

I made a fork of your codepen without any ScrollTrigger instances and is quite clear that your animation is not working as expected, looks really weird especially when reversing:

See the Pen KKbOvvO by GreenSock (@GreenSock) on CodePen

 

IDK if that is the issue you have in your setup, but unfortunately we don't have the time resources to do all of this for you.

 

Hopefully this helps.

Happy Tweening!