animating pseudo elements, ie ::after

[fcdobbs 1 Likes (Newbie)]

Hi,

 

I'm attempting place a CSS hover effect inside a longer GSAP sequence.

 

Is it possible with GSAP to animate the CSS property of a particular element's ::after psuedo element?

 

In the example below the scaleY property is animated for all menu items.  I'd like to set the scaleY property for the particular menu item with the hover event and to separately set the ::after scaleY property for that element's sibling elements.

 

Or is there an alternate way of animating a background that is contiguous with each menu item?

 

Thanks!

See the Pen bGLvBWM?editors=0010 by ripmurdock (@ripmurdock) on CodePen

[PointC 14,183 Likes (Superhero)]

Hi @fcdobbs 

 

Welcome to the forum and thanks for being a club member. 🎉

 

It's almost always easier to use CSS variables rather then the CSSRuleplugin. Here's a fork with that change. 

 

See the Pen 439cdf2bdddcefdfd533e9c2a852747b by PointC (@PointC) on CodePen

 

You'd also want to avoid any CSS transitions on elements that will be animated with GSAP so you don't cause any conflicts.

 

Happy tweening and welcome aboard.

[fcdobbs 1 Likes (Newbie)]

Thanks.  Animating the variable value in the pseudo element fixed my issue.

[fcdobbs 1 Likes (Newbie)]

In the CSS variables example above, I'd like to also set "--scaleY": 0 for the sibling "a"s on mouse enter.

 

How can I select the sibling "a"s, excluding the "a" with the mouseenter event, in order to set their CSS variables?

 

Thanks for your help.

 

 

[GreenSock 18,251 Likes (Superhero)]

I don't understand your question - please give it a try and then if you're stuck, post a minimal demo with as little code as possible and we'd be happy to take a peek and answer any GSAP-specific questions. 

 

By "sibling" are you talking about the element before and after (DOM-wise) the one that the mouse is over? 

[PointC 14,183 Likes (Superhero)]

Yeah, I'm a little confused too.

 

Isn't scaleY:0 the default value? 

[fcdobbs 1 Likes (Newbie)]

Thanks. 

 

Here's a revised codepen based on the CSS variables example with the 3rd menu item highlighted initially.

See the Pen dydeyrj by ripmurdock (@ripmurdock) on CodePen

 

I was planning on having one of the menu items already highlighted on page load.

 

On mouseenter, I'd like to turn on the highlight (--scaleY,  color update) for the current item and turn off the highlight for all  other menu items.

 

I'd like to reverse those changes on mouseleave.

 

I'm guessing it would be most efficient to add the animation for the values of all the other (not current) menu items to "tween".

 

Is there any way to select all of the menu items, excluding the current item in ".menu_1 ul li a"?

 

Or should I iterate through the array of ".menu_1 ul li a"s and check each for whether they are equal to the current item?

 

Thanks for your help.

 

 

[PointC 14,183 Likes (Superhero)]

So, mouseenter on 1,2 or 4 causes that button to animate and #3 to reverse? Is that correct? All the animations are mouseenter/mouseleave only? Does anything happen on click? 

 

I'd probably assign all the tweens/timelines just like above and then create an active variable so you can reverse the active timeline when one of the non-active others is hovered. If something happens on click, there may be a bit more to the logic.

[fcdobbs 1 Likes (Newbie)]

Thanks.

 

Yes, for this page on mouseenter for #1, #2, or #4, that button animates and #3 reverses.   On mouseleave these animations are reversed.

 

On click the user navigates to a different page with the menu item for that page highlighted.

 

Any examples using an active variable would be appreciated.  Thanks again.

 

 

 

 

[PointC 14,183 Likes (Superhero)]

This should work.

 

See the Pen 3bd8fbccb6ed4a2c47de269ddaac0cb9 by PointC (@PointC) on CodePen

 

Happy tweening.