Jump to content
GreenSock

MadG

Performance issues with nested FLIP animations

Recommended Posts

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

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: 

  1. 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(...)

     

  2. 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(...);

     

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

@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

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

 

  • Like 1
Link to comment
Share on other sites

@OSUblake ok that's a good call, thanks for the help!

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