Gsap hooks with Vue js

[Nasr Galal]

I am using Vue js and the behavior will be hard to explain in here, so i recorded a 3 mins video:
 

glad to discuss..

 

thanks!

[ZachSaucier]

Hey Nasr.

 

It's hard to say because we don't have a minimal demo to make sure. Even if you just post the relevant code in the post (not a whole demo, though a demo is preferable) it'd help. 

 

But I believe that the issue is that you are using relative tweens every time. So the second time you run it, it doesn't have as far to animate because the starting values are the same (or near) the end values already. That's actually one of the most common GSAP mistakes:

 

Your options are outlined in the post above:

Quote

The fix for this is simple: use a .fromTo(). Alternatively you could create the animation beforehand and use a control method (we'll talk more about this approach later in this article).

 

[Nasr Galal]

Hey Zach,

HYG,

 

See the Pen mdVYEQo by nasr3090 (@nasr3090) on CodePen

[ZachSaucier]

Why are you using onStart and onComplete listeners for this? It'd be much easier to set things up completely in one timeline and using the position parameter to position things.

 

Additionally, it'd make your code much shorter, easier to change, and easier to understand if you used a loop to create the gear animations. Here's how I'd do it:

See the Pen oNbRooE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Not using loops is one of the common GSAP mistakes. I highly recommend reading the whole article:

 

Side note, you can just use ease: "none" instead of ease: Linear.easeNone.

[Nasr Galal]

Hmm,.. You are absolutely right!
I need to change the way I think of things when it comes to problem solving

 

I am still reading the referred article. I really thank you for that reference.