Laurie Posted February 2, 2022 Share Posted February 2, 2022 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 More sharing options...
GreenSock Posted February 2, 2022 Share Posted February 2, 2022 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. 1 Link to comment Share on other sites More sharing options...
Laurie Posted February 2, 2022 Author Share Posted February 2, 2022 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 More sharing options...
GreenSock Posted February 2, 2022 Share Posted February 2, 2022 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 1 1 Link to comment Share on other sites More sharing options...
Laurie Posted February 2, 2022 Author Share Posted February 2, 2022 THANK YOU Jack! I didn't know the Most common GSAP mistakes! I'm gonna read it immediately! 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