staggerTo on pseudo element?

[Robert Wildling 19 Likes (Newbie)]

Hi, dear GSAP-community,

 

I would like to animate an :after element width "staggerTo" and did read up on the "CSSPluginRule". What is unclear to me:

 

- Is this plugin already included in TweenMax or not? If not, is is there any way to download it separately? (I only fund the configuration download, which include TweenLite...)

- Is it even possible to use a "staggerTo" anim on pseudo elements? I prepared a pen, but that one does not work...

 

Any tips would be greatly appreciated - thank you!

See the Pen wqQPdy?editors=1111 by rowild (@rowild) on CodePen

[PointC 11,936 Likes (Superhero)]

Hi @Robert Wildling

 

The CSSRulePlugin is not loaded with TweenMax. The following is loaded with TweenMax:

• TweenLite
• TweenMax
• TimelineLite
• TimelineMax
• CSSPlugin
• AttrPlugin
• RoundPropsPlugin
• DirectionalRotationPlugin
• BezierPlugin
• EasePack

You can load that plugin separately here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSRulePlugin.min.js"></script>

 

I don't think you can stagger that since it's affecting the CSS rule itself, but I'm no expert with that particular plugin so I'm sure someone will correct me if I'm wrong. I usually avoid pseudo elements except in rare cases of a little style. For elements I want to animate, I always loop through and append them as needed so they're actual DOM elements.

 

Hopefully that helps. Happy tweening.

[Carl 9,895 Likes (Superhero)]

Yup, Craig is exactly right. A tween using CSSRulePlugin can't be staggered. 

 

A staggered animation implies that there are multiple targets (an array of objects) that will be animated with delays. When you animate a CSSRule it is a single thing which can't be staggered. 

[Robert Wildling 19 Likes (Newbie)]

Fantastic help! Thank you all!