Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Wilson Kamau

Sequencing Flip Animations

Recommended Posts

Hello,

 

What is the best way to add Flip animations to a timeline? So I understand that Flip.from() returns a gsap timeline object that you can then add() to other timelines. The issue I'm facing is that in order to return the timeline I would have to call the function. When the function is invoked in the add() parameter , (e.g. t1.add(function()), Flip.getState() and everything else in the function being called will run prematurely. I don't want Flip.getState() and all the other code to run until the flip timeline is next up in the master timeline.  Additionally, timeline.call will wait to call the function, but it will simply run the function, instead of call the function and insert the returned flip timeline into the master timeline which is the desired behavior. The code pen I've attached should do a better job of illustrating my issue. Notice how flipSquaresRow and flipSquaresColumn animations are running at the same time, even though the position parameters in masterTL() are telling them to run sequentially. The problem is the both ">" previous animation pointers are pointing back to the first tween because the timeline considers the other two just plain old functions and not animations, even though they're performing animations.  Thanks everyone. Let me know if you need clarification on my question. 

See the Pen zYEeXZj by wilsonknjoroge98 (@wilsonknjoroge98) on CodePen

Link to comment
Share on other sites

Welcome to the forums @Wilson Kamau

 

One option might be to use .addPause() to wait for the Flip animation to finish. I added a tiny delay to the second add pause here so it doesn't fire at the exact same time as the first one.

 

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

 

  • Thanks 1
Link to comment
Share on other sites

You might want to check out the helper function from the docs: 

https://greensock.com/docs/v3/HelperFunctions#progressiveBuild

 

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

 

Is that what you're looking for?

 

As you seem to understand, Flip animations aren't ideal for building out long timelines because they're very much dependent on whatever the current state is when they start (which can be quite dynamic). So pre-baking them isn't really possible. The user might resize the screen or click on things that change state or whatever...AFTER you created the timeline. Typically Flip animations are best treated as one-off kind of things where you call a function and it handles it. But if you're trying to sequence things (like multiple Flip steps), then that helper function is a great way to do it. 

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