Jump to content
Search Community

Combining GSAP Timelines and Flip

Laurie test
Moderator Tag

Recommended Posts

Hello everyone,

 

I am testing the new Flip plugin and I'm wondering how to use it with Timelines. Here's an example of my curiosity : I'd like to animate an element with a timeline, then use the Flip method pour add a class name to the body for a fixed position. Am I right with it ? It seems the position is not working as I exepected... I attached my CodePen to my post to illustrate it.

 

Thank you, Laurie

See the Pen QWONVzy by LaurieVince (@LaurieVince) on CodePen

Link to comment
Share on other sites

The main problem is that you set props: "position, top, left, transform"

 

That's telling Flip to record all those values with the state (whatever they happen to be at that point) and then when you call Flip.from(), force them to animate from those values to whatever they are when you call the Flip.from(). There's absolutely no need to record any of those - just let Flip handle the positioning for you. It's really the core of what it does anyway (uses transforms to make things match up with the previous state). 

 

Updated demo:

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

 

Is that what you wanted? 

 

By the way, you don't even really need a timeline there - you could just put the Flip logic in an onComplete of a simple tween. But a timeline is fine too. :)

  • Thanks 1
Link to comment
Share on other sites

Hello Jack,

 

Thank you for the answer and the demo ! 😃

However, I'm still wondering how to achieve this kind of animation : I try to add a clearProps: 'scale' to my animation, because it seems the Flip does not working with the transform. I just want to animate 2 steps :

- 1st step : change the background color and the scale of the square

- 2nd step : Center the square in the body (as a fixed element) - and I think the Flip plugin is perfect to do that, right ?

 

Here's the new CodePen I did, with clearProps (but we can still see the square is not centered because of the transform properties)

See the Pen wvPWKym by LaurieVince (@LaurieVince) on CodePen

 

Thank you again, Laurie

Link to comment
Share on other sites

Yes, that's because you're wiping out all the transforms BEFORE you get the current state.

 

It's always best to set transforms directly via GSAP, just so you know. Please read this: 

 

 

You can either gsap.set() the transforms when you change the state -OR- just clearProps: "transform" at that time because you're using the CSS class to define them: 

See the Pen YzEWwXE?editors=0110 by GreenSock (@GreenSock) on CodePen

  • 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.
×
×
  • Create New...