Tween is not smooth at the beginning of animation when compared with simple power function when animating threejs shader material uniform value

[SirCitrus]

I've been stumped on this one for a bit now. Made a minimal codepen demo to demonstrate my problem here:



I'm building a fractal viewer that has an animation feature. I am planning on using GSAP to do all the animation. It's working great so far, except for one issue. For longer duration tweens with a slow rate of change the animation is not smooth. It's not a performance issue, as the framerate is sitting solidly at 60fps. I'm on a Retina Macbook using chrome, in case you do not see the same issue. I think it might be some threejs/GSAP issue around both requesting animation frames but that is basically just a guess. That or something more fundamental with GSAP. 

 

In my demo at the very top there is a const called 'useGSAP'. I've built my own power function that does the same animation as the GSAP animation. If you watch the GSAP one, from about 3-10 seconds you'll notice the movement is jerky. If you switch the flag to false and watch it again, it is much smoother. 

 

In my actual project I'm animating at an even slower rate sometimes and on a larger view window, so the effect is worse. Would really love to keeping using GSAP but if I can't get things smoother I may have to roll my own animation utility. 

 

Would appreciate any help thanks in advance!! 

 

PS to see best make codepen window of result as large  as possible.

See the Pen emmQEWz by JGPare (@JGPare) on CodePen.

[SirCitrus]

Looks like this has to do with default rounding in GSAP. I found a similar post here: 
 

I think I will use a proxy object for mine. There's a plugin that's provided in this other post, but it's for an older version of GSAP and I can't seem to get it working. Regardless a proxy object with scaled values should be an effective method to avoid issues with rounding. If anyone has a better options let me know! 

[ryan_labar]

That plugin should work with the current version of GSAP. The proxy object is a good option though. 

[Rodrigo]

Hi,

 

Also try a different easing function like ease: "none" and see if that helps somehow. As Ryan mentions the plugin should work as expected.

 

Finally you're adding the Plugin configuration in the wrong place:

const tl = gsap.timeline({
  repeat: -1,
  repeatDelay: 0.1,
  defaults: { duration: 60, ease: "power2.inOut" }
});
tl.to(shaderMaterial.uniforms.uFocusX, {
  value: -0.651,
  ease: "power2.inOut"
}, 0, {
  precise: {
    value: 0.000000001
  }
}
     );
tl.to(shaderMaterial.uniforms.uFocusY, {
  value: 0.371,
  ease: "power2.inOut"
}, 0);

Right now you have the following:

to(target, { /*tween config*/ }, /*position parameter*/, { /*Plugin config*/ }

The Plugin config object should be inside the Tween config object:

to(target, { /*tween config*/, precise: { /*Plugin config*/ } }, /*position parameter*/);

So in your case:

const tl = gsap.timeline({
  repeat: -1,
  repeatDelay: 0.1,
  defaults: { duration: 60, ease: "power2.inOut" }
});
tl.to(shaderMaterial.uniforms.uFocusX, {
  value: -0.651,
  ease: "power2.inOut",
  precise: {
    value: 0.000000001
  },
}, 0);
tl.to(shaderMaterial.uniforms.uFocusY, {
  value: 0.371,
  ease: "power2.inOut"
}, 0);

Finally it might be a good idea to use the plugin on both tweens (uFocusX, uFocusY).

 

Hopefully this helps

Happy Tweening!

[SirCitrus]

Thanks for the swift replies appreciated! I've had luck with a proxy object, but may try plugin again if needed.