Smoothing between keyframes seemingly unaffected by ease

[philcharitou]

I'm rather new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this boat to appear to "float" in a static position using keyframes. However, between each keyframe there is a distinct pause for a quick moment before the next one begins. I've tried every easing function listed in the docs, I think sine.inOut works best sorta but none of them are smooth. Is this something simple I'm missing? Or perhaps the type of animation I'm trying to achieve is more complex than 5 keyframes.

 

Thank you!

See the Pen rNgxOMM by Phil-Charitou (@Phil-Charitou) on CodePen

[Rodrigo]

Hi @philcharitou and welcome to the GSAP Forums!

 

Just a syntax issue! In keyframes land the easing for each keyframe is easeEach not ease:

// Wrong
gsap.to(".animate-sway", {
  keyframes: {
    y: [0, 18, 8, -8, 0],
    rotate: [-8, 3, 8, -3, -8],
    ease: "none",
  },
  repeat: -1,
  duration: 3,
});

// Right
gsap.to(".animate-sway", {
  keyframes: {
    y: [0, 18, 8, -8, 0],
    rotate: [-8, 3, 8, -3, -8],
    easeEach: "none",
  },
  repeat: -1,
  duration: 3,
});

https://gsap.com/resources/keyframes/#percentage-keyframes---v39

 

Here is a fork of your demo:

See the Pen YzbwwYz by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!