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!

[srdavo]

Hello, what if i really need it to be scale: false to avoid shape distortion but at the same want a nicely smooth spring animation?

[Rodrigo]

Hi @srdavo and welcome to the GSAP Forums!

 

Yeah you can't have both ways, especially with something that could affect the document's layout. For example if you use height/width and that doesn't affect how other elements before/after that element are positioned, you reduce the probability of a performance issue. But if the element is on the document's flow and affects the position/size of other elements after it, the browser will be force to do a complete reflow and repaint on every update which could be very expensive.

 

Other alternative is to apply the correct counter-scale to other elements at the same time in order to avoid said distortion, but for that you need to know that value in order to apply it to a GSAP Tween/Timeline that runs at the same time as the Flip animation is happening.

 

If you keep having issues or questions, remember to include a minimal demo so we can have a better look at this.

 

Hopefully this clear things up

Happy Tweening!