Jump to content


Noob question : Three object property resets before tween

Recommended Posts

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 !





  • Like 1
Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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


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.