Jump to content
Search Community

animating pseudo elements, ie ::after

fcdobbs test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

:)

  • Like 3
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

 

 

 

 

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