CSSRulePlugin and setting "content"

[mickFli]

Hi GSAP Team!

 

I'm just playing around with animating Font Awesome elements, and have found that while the CSSRulePlugin does find the rule, it does not apply the value for "content" property.

 

Any thoughts?

 

Thank you!

 

-Dan 

See the Pen gmXPbe by dotComb (@dotComb) on CodePen

[Jonathan]

Hello mickFli and Welcome to the GreenSock forum!

 

I believe it is a limitation of all modern browsers, and not GSAP. Not sure why its doing that? I will report this to the powers that be!

 

But in the mean time, instead of trying to change the content CSS property directly with the CSSRulePlugin.

 

Just toggle a class that has that C as the content CSS property

 

See the Pen bqoqpZ by jonathan (@jonathan) on CodePen

 

On Line 56 inside your codepen CSS panel

// change this:
tl.set(CSSRulePlugin.getRule('.outer-animation-container .fa-circle-o:after'), { cssRule: { content: "C" } }, 1.40);

// to this toggling the className with GSAP:
tl.set(".outer-animation-container .fa-circle-o", {className: '+=content-C'}, 1.40);

And add the following CSS rule after your .outer-animation-container .fa-circle-o CSS rule to your CSS codepen panel:

.outer-animation-container .fa-circle-o.content-C:after {
       content: "C";
}

Let us know how that works out while i ask why the CSSRulePlugin is not applying CSS content property.

 

CSSPlugin Docs : https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• className

  Allows you to morph between classes on an element. For example, let's say myElement has a class of "class1" currently and you want to change to "class2" and animate the differences, you could do this:

  TweenLite.to(myElement, 1, {className:"class2"});
  

  And if you want to ADD the class to the existing one, you can simply use the "+=" prefix. To remove a class, use the "-=" prefix like this:

  TweenLite.to(myElement, 1, {className:"+=class2"});
  

Please standby while we look into this for you

[mickFli]

Just a note of thanks for the prompt reply and suggested resolution! 

[GreenSock]

Yep, it sure looks like a browser thing. You can verify like this: 

var rule = CSSRulePlugin.getRule('.outer-animation-container .fa-circle-o:after');
rule.content = "A";
console.log(rule.content); //logs "F" ...oops.