Jump to content
Search Community

GSAP 3 stagger syntax

LK1037 test
Moderator Tag

Recommended Posts

In GSAP 2 we did a stagger of multiple objects this way...

tl.staggerTo( [ thing1, thing2, thing3], 1.5, { scale:0.97, autoAlpha:0, ease:Back.easeOut}, 0.3, "f3-=1")

 

In GSAP 3.0, I expected it to be...

tl.to( [ thing1, thing2, thing3] { duration:1.5, scale:0.97, autoAlpha:0, ease: "back", staggger:0.3}, "<-1")

How should the new syntax be formatted—couldn't find an example.

Link to comment
Share on other sites

Hey LK and welcome. 

 

The only thing wrong with your syntax is the missing comma after the target. It should be tl.to( [ thing1, thing2, thing3], { duration:1.5, scale:0.97, autoAlpha:0, ease: "back", stagger:0.3}, "<-1")

 

Without a minimal demo it's impossible for us to say if that's the issue or not though.

 

You can view the formatting and more info about staggers in GSAP 3 here: 

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

 

See demo here for proof:

See the Pen vYEOVyO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites

AAAAHG! Blast those pesky commas. Yep, that was it. 

I've looked at that sample you suggested, but it deals with a single ".box" element, not multiple items.

 

Encasing the elements in brackets [ thing1, thing2, thing3 ] unifies them and animates as a single unit — ignoring the stagger.

tl.to( [ thing1, thing2, thing3], { duration:1.5, y:50, scale:0.75, autoAlpha:1, ease: "back", staggger:0.5}, ">-0.5")

So to stagger each element by 0.5? 

tl.to(  thing1, thing2, thing3, { duration:1.5, y:50, scale:0.75, autoAlpha:1, ease: "back", staggger:0.5}, ">-1")

 

Link to comment
Share on other sites

4 minutes ago, LK1037 said:

I've looked at that sample you suggested, but it deals with a single ".box" element, not multiple items.

It animates multiple box items. An array of targets is the same for all tweens, stagger or no stagger.

 

2 minutes ago, LK1037 said:

Encasing the elements in brackets [ thing1, thing2, thing3 ] unifies them and animates as a single unit — ignoring the stagger.

As shown in the demo I posted in the post above, it staggers them... Maybe you should make a minimal demo so we can see what's going on?

 

3 minutes ago, LK1037 said:

tl.to(  thing1, thing2, thing3, ...

No, that's invalid.

Link to comment
Share on other sites

  • 3 weeks later...
  • 3 months later...

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