Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kri2sis

play with ::pseudo-class before and after

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

×