Keep three animations in sync

[alint]

Hello,

 

I have three animations running in the same time. The top part of a Law Balance Scale, the left weighting platform and the left weighting platform.

 

All three animaitons have the same duration and they are in sync when the page loads. After I scroll up/down on the page the three animations are out of sync. The top is moving fine but the left/right weighting platforms are out of wack.

 

Is there a way to keep the three animations in sync all the time?

 

Thank you.

 

Alin

[Jonathan]

Hello alint,

 

Do you have a code example of the behavior you describe.

 

Here is a nice video tut by GreenSock on how to create a codepen example demo.

 

This way by seeing your code in a live editable environment to better help you. We are glad to help, but it will be better to see code we can test and edit live!

 

Thanks!

[GreenSock]

Like Jonathan said, it'd be super helpful to see sample code because I can assure you that the entire GSAP system is completely synchronized across the board, so I'm really curious to see what you're doing. As far as I know, it's literally impossible to get things out of sync unless you have your own code that's not creating/starting the animations in sync.

 

Are you using TimelineLite or TimelineMax? Or are you just using TweenLite/TweenMax?

[alint]

Here is a pen:

 

See the Pen qykJL by alinticlea (@alinticlea) on CodePen

 

The problem is that I can not replicate the behaviour on codepen. The issue is related to something else on the page that I am building. The animation container comes in and goes out on scroll down/up. To animate the container move on scroll I am using ScrollScene from ScrollMagic.

 

I think I should stop the animation when scroll is detected. Is this possible?

 

Thank you.

 

Alin

[alint]

Ok, I found the problem. As I suspected it was related to the ScrollScene.

 

TweenMax is rock solid, it works perfect.

 

Thank you.

 

Alin

[Jonathan]

Glad you got it figured out.. just a side note.. GreenSock awesome ScrollToPlugin ...

 

Simple scrollToPlugin usage example:

See the Pen AsLfc by jonathan (@jonathan) on CodePen