play with ::pseudo-class before and after

[kri2sis 0 Likes (Newbie)]

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   

 

thank you for your help

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

[Jonathan 5,389 Likes (Superhero)]

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.

[Rodrigo 5,044 Likes (Superhero)]

Hi,

 

You can also check this samples of using pseudo elements and the CSS Rule Plugin:

 

See the Pen ibHAt by jamiejefferson (@jamiejefferson) on CodePen

 

See the Pen cEBbg by rhernando (@rhernando) on CodePen

[kri2sis 0 Likes (Newbie)]

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 

[Jonathan 5,389 Likes (Superhero)]

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!

[kri2sis 0 Likes (Newbie)]

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...

[jamiejefferson 1,199 Likes (Superhero)]

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.

[kri2sis 0 Likes (Newbie)]

ok I understand

 

CSS = Start

GSAP = the way to walk...