RobyEvo

Animate pseudo element of specif tag

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.

 

 

 

Anyone can help me?

Thank you!

Share this post


Link to post
Share on other sites

Hi RobyEvo,

 

Welcome to GreenSock Forums.

 

Is this a solution you expect?

 

 

Happy tweening ...

 

Mikel

 

 

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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:

 

 

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

 

 

Resource:

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

 

Happy Tweening :)

  • Like 5

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Your Welcome @RobyEvo

 

Just make sure the CSS rule your targeting with the CSSRulePlugin is the same exact CSS rule selector in your CSS style sheet.

 

:)

Share this post


Link to post
Share on other sites

animating the rule will affect every element that has that rule applied so I don't think you want that on mouseenter as shown here:

 

Animating a css rule is not a good solution for hover effects.

  • Like 2
  • Thanks 1

Share this post


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.