Jump to content
GreenSock

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

Timing animation

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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).

  • Like 2
Link to comment
Share on other sites

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! 🤦‍♂️

Link to comment
Share on other sites

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

  • Like 2
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.
×