Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Anya

Stagger groups of paths

Recommended Posts

Hi guys,

I'm trying to stagger groups of paths. I have 4 groups, that I want to simultaneously start drawing but stagger the paths inside of each group with 0.5s.

Currently, I'm just writing it 4 times starting them at the same label, and repeating the same tween code. Is there a way to shorten the code so I don't repeat it 4 times? If I add elements into the array, the timing is off.  I could also write a function and pass the elements, but would it start at the same time? Is there a keyword maybe in tweenmax stagger feature for this? Thank you!

  const tl = new TimelineMax();

  tl
   .staggerFromTo( '[id^=top-left] path[id^=top-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )
   .staggerFromTo( '[id^=top-right] path[id^=top-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )
   .staggerFromTo( '[id^=bottom-left] path[id^=bottom-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )
   .staggerFromTo( '[id^=bottom-right] path[id^=bottom-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )

 

See the Pen MroLXN?editors=1010 by slyka85 (@slyka85) on CodePen

  • Like 1
Link to comment
Share on other sites

Sure, you could just wrap that in a function and reuse it like this: 

See the Pen d27c9ff3f2998e168057c5d2a3f19ca5 by GreenSock (@GreenSock) on CodePen

 

That way, it's much easier to tweak that animation in just one spot. There are a bunch of ways you could do this actually. Does this help? 

  • Like 3
Link to comment
Share on other sites

Hi @Anya :)

 

Welcome to the forum.

 

Looks like @GreenSock beat me to it, but I'll throw out my two cents for you. When I have several groups in which I want the child elements to stagger and they're all the same, I usually just use a loop. Not that it's any better than a reusable function -- just another option.

 

See the Pen eyGEpW by PointC (@PointC) on CodePen

Happy tweening and welcome aboard.

:)

 

  • Like 3
Link to comment
Share on other sites

Thank you guys, both solutions helped!

  • Like 1
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.
×