Get the same pseudo element

[robberfree]

when I use CSSRulePlugin. for example,I only write

.navbar__nav__li::before
{
   content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
    z-index: -1;
}

in a .css file. when I want only to animate the first li of ul

var rule = CSSRulePlugin.getRule(".navbar__nav__li:nth-child(1)::before");
TweenLite.to(rule, 1, { cssRule: { backgroundColor: "#ff0000"} });

I can't get the pseudo element rule. can it possible?I read the code.now CSSRulePlugin just search the cssRule,not really detect computed style.

Thanks a lot.

[jackdoyle]

CSSRulePlugin.getRule() is just for finding an existing rule that you already have set up - it's not for creating a new rule or anything like that. Sorry.

[robberfree]

I have this idea,because I want to keep Dom clean, and want to do almost decoration animation on pseudo element.Maybe I should write a plugin to do thing like this or just do decoration animation on common Dom element.

thanks very much. GSAP is wonderful.

[jackdoyle]

Yeah, you'll probably get better performance if you directly animate the DOM elements inline styles anyway rather an a CSS rule (unless it's affecting a LOT of elements simultaneously).

Happy tweening!