LK1037 Posted December 5, 2019 Share Posted December 5, 2019 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 More sharing options...
ZachSaucier Posted December 5, 2019 Share Posted December 5, 2019 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. 1 Link to comment Share on other sites More sharing options...
LK1037 Posted December 5, 2019 Author Share Posted December 5, 2019 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 More sharing options...
ZachSaucier Posted December 5, 2019 Share Posted December 5, 2019 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 More sharing options...
LK1037 Posted December 5, 2019 Author Share Posted December 5, 2019 LOL - I was assembling a codepen for you and realized what I did wrong. Thanks for your help. Again. 2 Link to comment Share on other sites More sharing options...
creativeboxer Posted December 23, 2019 Share Posted December 23, 2019 On 12/5/2019 at 10:44 PM, LK1037 said: staggger:0.3 remove one "g" 3 Link to comment Share on other sites More sharing options...
HomTom Posted April 16, 2020 Share Posted April 16, 2020 In this example: tl.to( [ thing1, thing2, thing3], { duration:1.5, scale:0.97, autoAlpha:0, ease: "back", stagger:0.3}, "<-1") What does the last <-1 means? Link to comment Share on other sites More sharing options...
mikel Posted April 16, 2020 Share Posted April 16, 2020 Hey @itsthomas@outlook.com Hey @HomTom, From the DOCS //insert 2 seconds before the END of the most recently added animation (negative number) tl.to(".class", {y: 100, duration: 1}, ">-2"); // Hint: think of "<" and ">" as pointers to the start or end of the most recently-added animation. Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 16, 2020 Share Posted April 16, 2020 40 minutes ago, HomTom said: What does the last <-1 means? It means one second before the start of the previous tween. Check out this page for more info about the position parameter (which is the parameter that it's in): 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now