Timing animation

[Andy1708]

Hello again

starting the mainFishTL on my project (see on the codepen).

the mouthScaleTween (a scale of the mouth with a yoyo) , the moveFishTween ( a slight up and down movement) and the switchFishTween run after each other and not at the same time…

what am i doing wrong ?

Thanks for your answer

 

Yves

See the Pen qBdWREz by YVES_V (@YVES_V) on CodePen

[ZachSaucier]

Hey Andy,

 

I see that Shaun is answering so I will let him post about your question, but when creating demos for us in the forums it would be very useful if you only included the relevant parts of your work that you're asking about. So in this case if you left out the squiggly cyclops and the squiggles and their respective animations we'd really appreciate it  

 

Maybe also make the fish a bit bigger because it's pretty hard to see right now.

[ZachSaucier]

Looks like Shaun backed out. 

 

Looking more closely at your demo,  the mouth scale and the vertical movement are synced. They just appear not to be because of easing. If you add ease: "none" to both tweens then they are visually more synced (though technically just as synced).

[Shaun Gorneau]

Ah, sorry @ZachSaucier! I had just started to reply when I got pulled away from my desk. I should know to back out fully when that happens! ?‍♂️

[mikel]

Hey @Andy1708,

 

Eases change the speed in the phases (in / out) of the animation.
Therefore: Same duration, but different eases do not necessarily make tweens appear synchronous.
In mouthScaleTween you didn't set any ease - but GSAP uses a default ease of "power1.out".
Same duration, same ease = sync

Tip: If you set the graph to box in the bottom line of the GreenSock Ease Visualizer,

you will see the difference between the selected eases and power versions.

 

See the Pen jOEdOqM by mikeK (@mikeK) on CodePen

 

Happy easing ...

Mikel