How zoom animate for :before and :after element?

[Nickicool]

I'm trying to animate the appearance of an svg icon with a description below it. The icon has a wrapper with the pseudo elements :before and :after with a different background color. I want to animate the zoom of a pseudo element, but nothing works. The background color changes, but the zoom doesn't work.

 

gsap.registerPlugin(ScrollTrigger, CSSRulePlugin);

gsap.to( CSSRulePlugin.getRule(".icon-wrapper:before"), {
        duration: 3, 
        cssRule: {
            transform: 'scale(3)',
            background: 'red'
        }
    });

Help me, please. I don't know what to do.

[Visual-Q]

I think you just want use scale: 3 not transform: 'scale(3).

 

See the Pen LYNWLrY by Visual-Q (@Visual-Q) on CodePen

[Nickicool]

2 hours ago, Visual-Q said:

I think you just want use scale: 3 not transform: 'scale(3).

 

Yes, this is what you need! Thanks!!!