Timed animation doesn't work with Scroll Trigger

[WebDeveloper096 2 Likes (Newbie)]

Hello everyone!
I'm trying to animate those circles when the arrow passes through them. With just the timeline it works perfectly, I used GSDevTools as you can see but when I add ScrollTrigger to the timeline it doesn't work as expected. 
I really can't understand why, can someone help me out?

See the Pen JjMQrNy by VSeminara (@VSeminara) on CodePen

[PointC 14,010 Likes (Superhero)]

Hi @WebDeveloper096 

 

Welcome to the forum.

 

The appearingCircles part of the timeline was just running on its own as it wasn't part of the ScrollTrigger. Moving the ScrollTrigger to the timeline vars takes care of the problem.

 

See the Pen 5fd2a6919e62d43675cabcb07f2589bf by PointC (@PointC) on CodePen

 

Happy tweening and welcome aboard.

 

[mvaneijgen 526 Likes (Leader)]

This doesn't really matter, but I would like to point out that instead of:

gsap.set("#arrow", {
   xPercent: -50,
   yPercent: -50
});

You can add this `alignOrigin: [0.5, 0.5]` to the `motionPath` object to align it

motionPath: {
  path: "#aboutPath",
  autoRotate: true,
  align: "#aboutPath",
  alignOrigin: [0.5, 0.5],
}

 

[WebDeveloper096 2 Likes (Newbie)]

Thank you so much @PointC!!
I really appreciate your help and I needed it so bad.
Thanks for the explanation, I'm at the very beginning with GSAP, but love it already!
Have a nice day 😀

[PointC 14,010 Likes (Superhero)]

Good tip @mvaneijgen.

 

[WebDeveloper096 2 Likes (Newbie)]

@mvaneijgen 
I'll defintely change it, thanks a lot!
I saw it in an old video to be fair 😆