Gsap flip very stiff with spring easing

[xylis]

spring ease feels very stiff when i use it with Gsap flip,  I have added a simple demo of a single transitioning between 2 heights with flip to showcase the issue.

Click on the green div to see the transition.

https://stackblitz.com/edit/vue-x7dbrl?file=src%2FApp.vue

[mvaneijgen]

Hi @xylis welcome to the forum!

 

There are a few properties you're better off not animating, because some of them cause a browser repaint which is very resource intensive on the browser. Animating transform properties are much more performant, in your case you can set scale: true on the flip setup, below from the docs https://gsap.com/docs/v3/Plugins/Flip/

 

Quote

 

Boolean - by default, Flip will affect the width and height CSS properties to alter the size, but if you'd rather scale the element instead (typically better performance), set scale: true.

 

This is just a demo of course, so I'm not sure what it is you're trying to do, but in this case you don't even need flip if you just use a gsap tween, but again you're better of not animating the height of an element. Hope it helps and happy tweening! 

 

See the Pen BaeWwYe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Rodrigo]

Indeed as always, Mitchel hit the nail right in the head, is far better in this case to use scale for this:

 

https://stackblitz.com/edit/vue-hzx8ql?file=src%2FApp.vue

 

Hopefully this helps.

Happy Tweening!