Gsap Flip fit() to a moving element

[Michael31 12 Likes (Newbie)]

Hello, 

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

[Carl 11,064 Likes (Superhero)]

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.