Nested childs start acting weirdly when scale:true in Flip

[xyliss]

When i add scale:true to the flip anim all the childs starts distorting, some things i need to achieve are -

1. I need to use scale to get the spring easing to work, which doesn't work with width/height or would be expensive to run.
2. I am using w/h in css styles instead of scale because in production code i'm using a JS framework to change reactive state, which triggers the layout change so it's not possible to know the dimensions or position beforehand.

See the Pen NWQzNwB by XYLIS-333 (@XYLIS-333) on CodePen.

[Rodrigo]

Hi @xyliss and welcome to the GSAP Forums!

 

The distortion is ought to be expected since you're applying a scale change on the parent element.

 

As for using a framework like Vue, Svelte or React for state management and making DOM updates, which is the correct way to work with those, what you have to do is tell Flip that the targets are different from the state, since the DOM elements that were captured in the getState() method are not the same after the app's state was updated:

https://gsap.com/docs/v3/Plugins/Flip/static.from()#special-properties

 

This react demo shows how to run Flip using that approach while reparenting an element using component state for that:

https://stackblitz.com/edit/vitejs-vite-bpwfpk?file=src%2FApp.jsx

 

Hopefully this helps

Happy Tweening!

[xyliss]

Thank you very much for your solution, though in my case -

i have a parent container with 2 child elements, one of which i,m dynamically rendering based on a boolean state which brings changes to the parent layout thus distorting the other child as well when used with scale:true.

My flip works absolutely smoothly without scale:true & spring ease.

my only query is  -

Is there a way to make spring easing work with scale:false ? , because if do a simple gsap.to on any element's w/h properties spring works fine but with flip it acts weird while animating w/h.

[Rodrigo]

Most likely the elastic easing is not giving the expected results beacuse of subpixel rendering.

 

What you could try is add the background and the content as siblings in a parent element, give the background a position: absolute and then update the size of the parent element, that should update the position of the text and icon as well as the size of the background. That would allow you to create two different Flip animations, one for the background that you can scale with not problems or deformations for the text and counts using the elastic easing and another for the text and icon with the easing you want.

 

That's the simplest way I can think of in order to get this done the way you intend.

 

Hopefully this helps

Happy Tweening!