Jump to content


CSSRulePlugin and setting "content"

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!



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

Link to comment
Share on other sites

  • Solution

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 :)
  • Like 5
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.