Jump to content
Search Community

Timed animation doesn't work with Scroll Trigger

WebDeveloper096 test
Moderator Tag

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

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.
×
×
  • Create New...