Is it possible to tween the psuedo selectors with psuedo elements :nth-child:before

[harishv6665]

Is there any way to target the pseudo selectors with pseudo elements? I was playing around with GSAP from couple of days and i ran through a scenario where I want to animate and pseudo element which is the second element of the list.

target "li:nth-child(2) .box:after"

[Jonathan]

Hello harishv6665, and Welcome to the GreenSock Forum!

 

In order to animate a CSS pseudo-element in GSAP you have to use the CSSRulePlugin.

 

See the Pen WxjGXW by jonathan (@jonathan) on CodePen

// get and store the CSS rule in a varaible
var rule = CSSRulePlugin.getRule("li:nth-child(2) .box:after");

// animate that CSS rule with a to() tween
TweenMax.to(rule, 3, {
    cssRule: {
        backgroundColor: "#F43C09"
    }
});

Just make sure when using the CSSRulePlugin that you animate the same selector that is in your style-sheet. Also only use the single colon syntax : for pseudo-elements instead of the new double colon syntax ::.

 

If you were just animating the selector for a pseudo-class li:nth-child(2) .. then that could be animated without the CSSRulePlugin and then just use the CSSPlugin as you would normally.

 

Resources:

CSSRulePlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSRulePlugin/

CSSPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/