MadG Posted February 1, 2022 Share Posted February 1, 2022 Hey all! Below is a sample of a rather complex animation I'm doing using FLIP on one of my sites. It performs totally fine here, but it's rather complex and in the context of the site with other active scrollTriggers and such going on, it's catching a bit in the middle, when the cards shuffle out from the bottom and sides. Any suggestions on how to make this more performant and just clean up the timeline in general? I get a little stuck with FLIP sometimes since it appears it can't be chained into a timeline like a normal tween. See the Pen dyZMVjy by kslaton (@kslaton) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted February 1, 2022 Share Posted February 1, 2022 It's beyond the scope of help we can offer in the forums to do a performance audit or do a general sweep of all your code to offer suggestions, but here are a few minor things that stuck out to me: You don't need to use so many onComplete calls. Flip.from() returns a timeline, so you can probably just add tweens to that: // BEFORE Flip.from(..., { ... onComplete: () => { gsap.to(...) } }); // AFTER Flip.from(...).to(...) When you're doing a .set(), there's no need to use an onComplete because the .set() will fire IMMEDIATELY: // BEFORE gsap.set(... { onComplete: () => { gsap.to(...); } }); // AFTER gsap.set(...); gsap.to(...); Performance-wise, it can be expensive to animate height or width. It's always better to use scaleY/scaleX if you can (but I realize that can produce a different effect so it may not be possible) If you want to progressively build out a timeline animation step-by-step (which is what you'd need to do with Flip animations since they're so dynamic by their very nature), you could use the helper function here: https://greensock.com/docs/v3/HelperFunctions#progressiveBuild But I'd guess that 95%+ of performance problems boil down to graphics rendering in the browser (not GSAP), so you'll need to look for ways you're stressing the browser out in terms of layout and/or graphics rendering. Keep areas of change to a minimum and animate cheap properties like transforms. Good luck! Link to comment Share on other sites More sharing options...
MadG Posted February 1, 2022 Author Share Posted February 1, 2022 @GreenSock thanks, totally understand and this is all super helpful. I do have one question about Flip returning a timeline. So currently in my code I have Flip.from(... { onComplete: () => { gsap.set(... { onComplete: () => { Flip.from(...) } }) } }) I understand what you're saying about being able to chain the .set onto the Flip.from, but if I've already captured the second FlipState earlier in my code, can I just chain the second .from after the .set? Link to comment Share on other sites More sharing options...
OSUblake Posted February 1, 2022 Share Posted February 1, 2022 It might help if you put the flip into a tl variable just to make it more obvious that you are working with a timeline. let tl = Flip.from(...) tl.set(...) tl.add(Flip.from(...)) 1 Link to comment Share on other sites More sharing options...
MadG Posted February 2, 2022 Author Share Posted February 2, 2022 @OSUblake ok that's a good call, thanks for the help! 1 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