Jump to content


Gsap Flip fit() to a moving element

Recommended Posts


I've been playing with the Flip plugin and it looks super powerful.

I still have an issue though : I want to simply Flip.fit() an element regarding another.

My problem is that the output element is moving and scaling.


At the moment my element doesn't follow the output one. It only goes to its initial state.

Is there a way to update the fit() value during its animation so my fit() element follow the other one during the animation ?

I made a codepen to illustrate my problem.

Thanks you very much


See the Pen bGaWmZV by michaelgrc (@michaelgrc) on CodePen

Link to comment
Share on other sites

the reason Flip (first, last, invert, play) is so powerful is that it requires that you provide the first and last states.

All greensock animations are based on a known start and end state.


You are doing something very different than what Flip was designed for.

I suspect you will need to use an onUpdate that constantly calls a quickSetter() where you pass in new values that you calculate OR create new tweens constantly (not great for performance but may work).


Check out the demo in the quickSetter docs as a starting point. It could get really tricky though if you need to calculate positions that are affected by margins or nesting. You may need to reach for getRelativePosition. Definitely not a small undertaking.


Lastly, i guess you could repeatedly create new flip states on an onUpdate on the elementB tween but that doesn't seem very efficient.


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