CSSRulePlugin Scope Issue

[Barman]

Hi,

 

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.

 

Cheers!

 

Pete.

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

[Carl]

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:

 

http://codepen.io/GreenSock/pen/BzQYpW?editors=1010

 

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();
  if(!tl.isActive()){
    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.

[Barman]

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?

 

Cheers!

[Carl]

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