[Unable to use css variables to animate to]

Thank you! you guys are awesome. I knew it was gonna be a silly overlook.

[Unable to use css variables to animate to]

Hello everyone,

 

I have been using this awesome library for years to make amazing things and finally got a problem I can't seem to figure out on my own.

 

Whenever I put a value from a custom css property into TweenMax, it does not behave as expected. for example

 

var variableColor = getComputedStyle(document.documentElement).getPropertyValue('--color');

console.log(variableColor) // #f00

console.log(typeof variableColor) // String

 

TweenMax.to(el, 1, { backgroundColor: variableColor });

does not work and background will just turn black. In the code pen it also seems like it does not respect the initial background value from css.

 

el.style.backgroundColor = variableColor // does work.

 

var color = '#f00'

TweenMax.to(el, 1, { backgroundColor: color }); // does work as expected

 

I am not sure what I am doing wrong. This seems to work for other people as I read here.

 

https://greensock.com/forums/topic/21422-how-to-animate-using-css-variables-as-target-values/

 

See the Pen poowMzK?editors=1111 by m_truong (@m_truong) on CodePen