Unable to use css variables to animate to

[md_t]

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.

[GreenSock]

Congrats on your first post, @md_t, especially after being a user for so long! 

 

It looks like the problem is that there's an extra space at the beginning of the value, so it's actually " #f00" instead of "#f00"

 

If you just add a .trim() at the end of it, that should fix the problem. Or in your CSS, make sure there's no space between the colon and the value, like --color:#f00

 

Happy tweening!

[md_t]

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