Jump to content
Search Community

Stagger animation

Eugene Rayner test
Moderator Tag

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

  • 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, 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.
×
×
  • Create New...