Jump to content
Search Community

Animate pseudo element of specif tag

RobyEvo test
Moderator Tag

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,

 

I need to animate the pseudo element of a specific target.

For example if i have an unorder list, on mouseover of a single list item, i want to animate its pseudo element without affecting other list item.

In the codepen below, for example, i would like to show the red line over the <li> only on mouseover. I've tried using cssrule plugin, but it affects all <li> item.

 

See the Pen ayobKg by anon (@anon) on CodePen

 

 

Anyone can help me?

Thank you!

Link to comment
Share on other sites

Hi @mikel,

 

Thank you for your reply! 

The over effect on list item was only a simple example, i don't need to create the same effect, but i only want to know if is possibile to get the same results working with pseudo elements :after or :before.

 

Hope i explain what i need,

Thank you!

  • Like 1
Link to comment
Share on other sites

Hello @RobyEvo and Welcome to the GreenSock Forum!

 

Nice solution Mikel.

 

@RobyEvo  In order to animate CSS pseudo-elements you must use the GSAP CSSRulePlugin and make sure that you use the single colon syntax ( :after or :before) and not the new double colon syntax ( ::after or ::before)  for pseudo-elements, this is very important.

 

The reason you have to use the GSAP CSSRulePlugin  is because pseudo-elements are generated content and not in the DOM.

 

Your example with the CSSRulePlugin:

 

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

 

Another example showing how you can animate 1 element with 2 tweens..  pseudo-elements with GSAP

 

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

 

Resource:

CSSRulePlugin: https://greensock.com/docs/Plugins/CSSRulePlugin

 

Happy Tweening :)

  • Like 6
Link to comment
Share on other sites

Hi @Jonathan

Thank you for your reply. Css rule plugin is exactly what i was looking for.

Unfortunately if i declare a rule in css like .selector:after, I can't use a different, but more specific target such as #myDiv .selector:after.

I will use a simple tween and append to my element a div/span.

 

Thank you all for help!

 

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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.
×
×
  • Create New...