Jump to content
GreenSock

Eugene Rayner

Stagger animation

Go to solution Solved by PointC,

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

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

Link to comment
Share on other sites

  • Solution

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.
:)
  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

:)

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