Jump to content


CSSRulePlugin Scope Issue

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



I've got 3 links with an :after which I'm animating on 'mouseenter' but is there anyway to give scope to the 'getRule' so that the animations happen independently, rather than all the :after's animating when only interacting with one link? (without referencing the .icon- individually class of course). Please see my pen to see what I mean.





See the Pen QEGqga by petebarr (@petebarr) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Yeah, this is a tricky situation and as far as I can tell not a good use for CSSRulePlugin as animating a rule will alter all elements that have that rule applied.

We generally recommend that you create an animation for each button and then tell that button to play() or reverse() it's own animation when you interact with it.

In your case you probably don't need the reverse part.


Here is a basic example:




I also want to point out that in your code your condition is not necessary as it will always evaluate to false.



socialLink.mouseenter(function() {
  var time = 0.4;
  var rule = CSSRulePlugin.getRule(".social-link:after");
  var tl = new TimelineMax();
    tl.fromTo(rule, time, { cssRule: { y: 0 }}, { cssRule: { y: 100 }, ease: Expo.easeIn })
      .fromTo(rule, time, { cssRule: { y: -100 }}, { cssRule: { y: 0 }, ease: Expo.easeOut });



Note that the code above will run EVERY time you mouseenter which means a new timeline will be created on every mouseenter. try adding this code before your condition

console.log(!tl.active()) // always false

Using the approach I showed above, your timelines are only created once. You can just decide whether they need to be played or reversed when the interaction happens.


I think your best route is to ditch the :after and just create a new DOM element.

  • Like 2
Link to comment
Share on other sites

Hey Carl,


Yeah I thought this would be the case. Wanted to avoid throwing in a little extra markup but not a complete sin ;-) Oh and good point about the new timeline each time, a little oversight on my part. Does .active() only work on TweenMax?



Link to comment
Share on other sites

Cool. TweenLite, TweenMax, TimelineLite, TimelineMax all have an isActive() method.

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.