Jump to content
Search Community

staggerTo on pseudo element?

Robert Wildling test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 6
Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...