Using GSAP (TweenMax) on css varabiles

[ankush 0 Likes (Newbie)]

 

Just want to say that I've posted the same question on StackOverflow, but figured I would post it here too  

 

I'm really into Google's Polymer and I love GSAP - and so far I've been using the two in conjunction without a hitch. Unfortunately I have now hit a problem - how do I use GSAP (TweenMax to be specific) with custom css variables? 

 

For example: 
To change 

someCssProperty

 of 

someElement

 I would 

TweenMax.to(someElement, 1, someCssProperty: "value"); 

but the 

someCssProperty

part becomes an issue when I'm trying to animate a css variable, which take on the form 

--some-custom-css-variable

 I have tried to use 

TweenMax.to(someElement, 1, --some-custom-css-Property: "value"); 

(obviously gives me errors) and I also tried to use

TweenMax.to(someElement, 1, "--some-custom-css-Property": "value"); 

(quotes around the some-custom-Css-property) - however this results in no change/animation and an invalid tween value error message on the developer console.

 

So the question is: how would I go about animating custom css variables with TweenMax (GSAP)?

 

Thanks for any help

 

EDIT:

 

I have tried using classes through 

TweenMax.to("SomeElement", 5, {className:"class2"});

But this changed the element style as if I had declared it in css with a 

SomeElement:hover {}

style (as in it does not animate, just changes immediately)

[OSUblake 9,990 Likes (Superhero)]

The CSSRulePlugin didn't seem to work, so for now you're probably going to have to manually update the variable using a generic object.

See the Pen f3a6dffce455ecb1caa48641e3ecd278?editors=0010 by osublake (@osublake) on CodePen

[Carl 9,066 Likes (Superhero)]

Nice solution, Blake.

 

Yes, there currently isn't support for animating CSS variables. 

[ankush 0 Likes (Newbie)]

The CSSRulePlugin didn't seem to work, so for now you're probably going to have to manually update the variable using a generic object.

See the Pen f3a6dffce455ecb1caa48641e3ecd278?editors=0010 by osublake (@osublake) on CodePen

Thank you so much for a clear and simple solution Hopefully in the near-future greensock's Css plugin will be able to support css variables - until then thanks for the quick and awesome solution! 

[GreenSock 8,117 Likes (Superhero)]

It seemed to make the most sense to add that feature to CSSPlugin, so here's simple example with a preview version of the upcoming release:

See the Pen OgJmbg?editors=0110 by GreenSock (@GreenSock) on CodePen

(notice it's animating a px-based blur as well as a color variable). Look good? Any other suggestions? 

[ankush 0 Likes (Newbie)]

Yep that looks perfect. I did some testing with a simple div and other CSS properties, and so far it's worked perfectly I'm glad it's being added to the CSSplugin.  

[Carl 9,066 Likes (Superhero)]

here is another quick demo that shows how this can work by tweening properties of a parent that are inherited by children:

 

See the Pen mwyMxZ by GreenSock (@GreenSock) on CodePen

 

[danehansen 5 Likes (Newbie)]

On 6/2/2017 at 11:13 PM, GreenSock said:

It seemed to make the most sense to add that feature to CSSPlugin, so here's simple example with a preview version of the upcoming release:

See the Pen OgJmbg?editors=0110 by GreenSock (@GreenSock) on CodePen

(notice it's animating a px-based blur as well as a color variable). Look good? Any other suggestions? 

this is great, i was just gonna post on here asking about css variable support. any word yet if it hinders performance? on one hand, we can tween the properties of many items by changing one variable, but on the other hand it utilizes window.getComputedStyle and style.setProperty, which might offset any savings.

[Carl 9,066 Likes (Superhero)]

Not sure of the exact performance implications. I'd imagine a lot depends on how many elements are being updated when the variables change and what properties you are tweening. Please let us know if you run into any problems. 

[GreenSock 8,117 Likes (Superhero)]

@danehansen I wouldn't worry about the window.getComputedStyle() since that happens only at the start of the tween and it's the same as any other regular tween (of a DOM element) anyway. style.setProperty() isn't terribly expensive either. 

 

According to my preliminary tests, the CSS variable tweening is extremely performant because it's only making the change in one place. For example, if you were tweening 500 elements simultaneously with regular tweens, it'd have to write the inline styles 500 times per tick whereas the CSS variable is only in one spot. The browser still has to render the change on 500 elements, but at least we don't have to write the string values 500 times. 

 

Frankly, in most cases, you'll probably never notice a difference. But from what I can tell, if you're animating a ton of elements, tweening CSS variables is actually faster. I tried it with 2000 divs and definitely noticed a difference: 

See the Pen 2a11d3d6b43af2b49e29941e0849ccd6 by GreenSock (@GreenSock) on CodePen

 

[OSUblake 9,990 Likes (Superhero)]

@GreenSock

 

Here's a good article to check out. It's about some of the CSS variable hackery that went into Angular's animation engine if you're looking to support older browsers.

https://www.yearofmoo.com/2015/04/cross-browser-custom-css-properties.html

 

And something to think about in the future, AnimationWorklet. Run animations in the compositor thread.

https://www.chromestatus.com/feature/5762982487261184

 

[GreenSock 8,117 Likes (Superhero)]

Thanks, @OSUblake - I don't really think it's worth all the hackery to support older browsers for CSS variables, do you? 

 

And the AnimationWorklet sounds cool, but have you heard anything about broad support across other browsers? It'd kinda suck to add a bunch of code that'd only work in Chrome or something.

[OSUblake 9,990 Likes (Superhero)]

4 hours ago, GreenSock said:

Thanks, @OSUblake - I don't really think it's worth all the hackery to support older browsers for CSS variables, do you? 

 

Not really. Browser support is getting pretty good for CSS vars. And if somebody wants to support older browsers, the CSSRulePlugin can do pretty much the same thing with a little work.

 

5 hours ago, GreenSock said:

And the AnimationWorklet sounds cool, but have you heard anything about broad support across other browsers? It'd kinda suck to add a bunch of code that'd only work in Chrome or something.

 

At the end of the Journey section here, it says that Apple, Google, Microsoft and Mozilla all expressed interest. Whether it ends becomes part of the spec is anybody's guess.

 

I haven't messed with any of the code from the demos, but it'd be interesting to see if, and how much, it can improve request animation frame performance. It's supposed to be resilient to main thread jank.

[danehansen 5 Likes (Newbie)]

just found something that applies to this topic that i thought i would share here. it appears that when tweening a parent element's css variable to tween multiple children, it causes repaints on each child. where doing the same tween on the children themselves can cause no repaints. check out the following jsfiddle example with your dev tool's paint flashing turned on and see the difference between the two: https://jsfiddle.net/k95c51yy/3/

 

kind of a bummer but oh well.

[OSUblake 9,990 Likes (Superhero)]

Hi @danehansen

 

You might be looking at that wrong. In browsers that have implemented will-change, animating scale is going to behave a little different than other transforms. 

https://jsfiddle.net/OSUblake/h8j24tn4/