Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Timed animation doesn't work with Scroll Trigger

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.



  • Like 4
Link to comment
Share on other sites

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],


  • Like 4
Link to comment
Share on other sites

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 😀

  • Like 1
Link to comment
Share on other sites

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

  • Haha 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.