CODEWITHSUNDEEP
javascriptcssanimationthree.jsgsap
Lucas Altamirano
Lucas Altamirano

Reputation: 115

three js + GSAP - Renderer Color Transition

I'm trying to do a simple color transition with gsap, modifying the renderer color(background)

The thing is, the transition from black to white works perfectly, but when i try the one from white to black, it just change the color without any transition, just switches from white to black without any fade.

Here is the code from black to white:

gsap.to(renderer,{setClearColor:'rgba(255,255,255,1)', duration: 2});

And here is the one from white to black ( I tried both these possibilities, with all possible color inputs(hex, rgb, rgba, etc.) with and without new THREE.Color ):

gsap.fromTo(renderer,{setClearColor: new THREE.Color( '#ffffff' )},{setClearColor:new THREE.Color( '#000000' ), duration: 2});

And this:

gsap.to(renderer,{setClearColor:'rgba(0,0,0,1)', duration: 2});

Its as if the value was cached to rgb(0,0,0), so it just make a transition from rgb(0,0,0) to rgb(0,0,0)

Upvotes: 0

Views: 1095

Answers (1)

Lucas Altamirano
Lucas Altamirano

Reputation: 115

Never mind, solved it.

For anyone who may come to this specific (lol) problem, here is how to fix it:

It seems that renderer.clearcolor and scene.background has colors from 0 to 1 in RGB, so:

gsap.to(scene.background,{ r:1, g:1, b:1, duration: 2 })

and

gsap.to(scene.background,{ r:0, g:0, b:0, duration: 2 })

Upvotes: 1

Related Questions