Stagger animation

[Eugene Rayner 25 Likes (Newbie)]

Hello there,

 

quick question, how do I go about making a stagger effect?

Currently the whole line is fading in all at once, but I would like each element inside the line to animate separately

Just need to get my head around this.

 

Cheers

See the Pen MprdRo by erayner (@erayner) on CodePen

[PointC 14,465 Likes (Superhero)]

Hi erayner_45092 

 

You're close. You just forgot the stagger amount so it defaulted to 0. From the docs:

 

stagger : Number

 

(default = 0) — Amount of time in seconds (or frames for frames-based tweens) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: TweenMax.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+=100", opacity:0}, 0.2).

 

Does that make sense?

 

Happy tweening.

[Eugene Rayner 25 Likes (Newbie)]

awesome, thanks a bunch.

 

Now I have the problem that my SVG elements are staggering from different points.

take a look at my codepen and let me know how I could best fix this issue?

 

Cheers

[PointC 14,465 Likes (Superhero)]

Do you mean the order in which they are fading in? If that's the case, you can rearrange their order in the SVG.

 

If that's not what you meant, could you elaborate?

 

Happy tweening.

[Eugene Rayner 25 Likes (Newbie)]

Awesome, works perfectly. Just have to pay close attention.

 

1 last question, is there a way I can make both animations work at the same time?

I have updated codepen so that I have stagger1 and stagger2 running at the same time (my code makes it run one after the other and I would like at the same time.)

 

EDIT: I think I just need to add an extra class - but not working the way I thought it would.

[PointC 14,465 Likes (Superhero)]

You'd need to use the position parameter like this:

var svgTween = new TimelineMax({delay: 0.5});
svgTween.staggerFrom(".stagger1", 0.5, {opacity: 0}, 0.1)
svgTween.staggerFrom(".stagger2", 0.5, {opacity: 0}, 0.1, 0);// the 0 on the end is the position parameter

More info about that parameter:

https://greensock.com/position-parameter

 

Just an FYI - you had a stagger property in your vars object (which I removed in my answer), but the stagger only goes on the end.

 

Also - in a non-stagger tween, you could just target both of those classes in the tween as GSAP can target an array, but with a stagger tween that wouldn't have solved the 'start at the same time' problem.

 

Happy tweening.