Noob question : Three object property resets before tween

[JuVince]

Hi !

Apologies in advance, I'm a musician / digital artist and a total beginner with gsap (like 2 days ago) but also very new to Js, React and Three.js.

I'm really amazed how easily gsap handles animation of any params compared to other solutions I found in the past.

It will make my life so much easier, I'm already considering to join the Greensock club soon...!

 

Since yesterday I've been hitting my head against the wall and I can't figure this out.

Here's the sandbox : https://7cuco.csb.app

 

I have this button that triggers random variations of color and rotation speed of a cube.

I wanted gsap to smooth every random value by a few seconds.

I managed to make this happen very easily for the rotation speed (I guess because I worked from a simple object)

but for some reason it doesn't work as excepted with the Three.color object.

Every click resets the color to black, before moving gradually to the selected color. Almost...

 

I'm really sorry in advance, I expect this to be a really stupid mistake.

Thanks in advance for your help !

 

 

 

 

[GreenSock]

Welcome to the forums, @JuVince! 

 

The reason that isn't working is because the THREE.Color object doesn't actually have a property that represents its color, like object.color. It has a bunch of methods. You were trying to animate its "set" value which is a method (not a property), thus at the start of the tween GSAP recognizes it as a function and CALLS that function as if it's a getter (because it needs to get the starting value). But of course it's not a getter - it's only a setter. GSAP has methods that are both getters and setters (it's a pretty common practice), but Three.js doesn't do that. So basically it's always starting at black because the values are all zeroed out since color.set() isn't returning anything. 

 

You can easily solve this in various ways...

 

You could use a proxy object and then set things in an onUpdate. Sorta like:

let proxy = {color: cubeColor.getStyle()};

gsap.to(proxy, { 
  duration: gest_dur, 
  color: "random(['red', 'purple', 'pink', 'yellow', 'blue', 'green', 'white'])",
  onUpdate: () => cubeColor.set(proxy.color)
});  

 

Or you could directly animate the "r", "g", and "b" values of the color object since Three.js seems to accommodate that (if I'm reading the docs correctly)

 

Or you could create your own plugin that does all the conversion for you. 

 

Lots of options. 

 

I hope that clears things up. Happy tweening!

[JuVince]

Fantastic, thank you Jack it worked beautifully.

I tried using a proxy object at first but I was missing the onUpdate part, makes total sense now.

Tweening is definitely super happy...!