Jump to content


play with ::pseudo-class before and after

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 all

I don't have any code for my question about css pseudo-class usage.


I'd like to build ::after and ::before with set() and i failed.

So in my wishes i'd like to make a cool animation with ::after ans ::before and I'm afraid to fail again.


I saw a tuto on GreenStock which speak about CSSRulePlugin (here) but I don't know if this plugin is in the TweenMax.min.js file that I utilise to be sure to have the max of possibility.


hummm I think i'm a little bit lost  :shock:  :-P


thank you for your help

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

Link to comment
Share on other sites

Hello kri2sis, and welcome to the GreenSock Forum!


You must use the old syntax :before and :after, but not the new CSS3 syntax for pseudo-elements ::before and ::after


I believe this has been answered in a previous Forum topic: CSSRulePlugin not animating pseudo element before


And my codepen example from that forum topic:


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


TweenMax.js includes all of the following:

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax
  • EasePack
  • CSSPlugin
  • RoundPropsPlugin
  • BezierPlugin
  • AttrPlugin
  • DirectionalRotationPlugin
But Jack and Carl would be the best to confirm it.
  • Like 1
Link to comment
Share on other sites

Ok..... I understand now if i had a doubt...

So for me to keep in my mind, :

- first, we place css rules in css file

- and then, we could use these css rules into GSAP script file..

Isn't it ? I'm wrong ?


whatever, a big thank to you both for your help  :|

Link to comment
Share on other sites

Yep, you are right kri2sis..

  1. add the CSS rules to your stylesheet
  2. then choose the CSS rules you want GSAP to animate

Just fork and play with our above codepen examples and you will be animating CSS rules in no time.


Hope this helps! :)

  • Like 1
Link to comment
Share on other sites

a great help yeah

I'm seeing that if I set() css into GSAP file it's ok too... instead of full my css file...

Link to comment
Share on other sites

Yes that's fine. Just try to make sure that when you create a CSSRule tween that the selector (eg :after) you target already has a value for the rule (eg backgroundColor, opacity) set, otherwise GSAP has to guess where to start and it may not always be what you expected.

Link to comment
Share on other sites

ok I understand


CSS = Start

GSAP = the way to walk...

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.