GSAP v3 easing issues

[cv9]

I have noticed that with the new convention for selecting the easing type by string doesn't seem to work when I try it.

I have gone to the page https://greensock.com/docs/v3/Eases and even copied the easing settings and they still do not work.

The easing types of step and rough do nothing. As for regular easing types like power, I have noticed that they don't work unless I rename them with a capitalized first letter or it could be reverting to some default type - hard to tell the difference!

Is there something I'm doing wrong?

 

In my example, the cube should rotate left or right on mouse move with easing applied. It obviously doesn't work at the moment!

Thanks for any help.

See the Pen dyZaBoa by vcad (@vcad) on CodePen

[OSUblake]

Hi cv9,

 

I'm not seeing anything move in your demo, but even if there was, you aren't going to see any easing because you are creating a brand new animation on every tick. Try moving the animation to your mouse handler 😉

[cv9]

Hi Blake,

It wasn't supposed to work unless you removed the easing part or renamed "power4.inOut" to "Power4.inOut".

As for moving the animation to the mouse handler - onMouseMove() - that actually helped. Now, "steps(12)" works for easing, although "rough" easing doesn't seem to be working.

Thanks anyway.

EDIT: I've updated the codepen to steps easing!

[OSUblake]

Hi @cv9

 

RoughEase, ExpoScaleEase, and SlowMo are not part of the core, so you'll need to load the EasePack to use one of those. I'd also suggest using GSAP's ticker as you don't need an additional request Animation Frame running. It's less code too.

 

gsap.ticker.add(() => {
  renderer.render(scene, camera);
});

 

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