Flip not animating border radius

[sjorsr]

Hi! I'm using the Flip plugin to animate an element to a new state. It works perfect, except for the border radius. It just seems like it is not picking up the border radius value.

 

Have a look at the pen below. Is this a known problem or am I missing something?

See the Pen yLGPoBE by sjorsroelofs (@sjorsroelofs) on CodePen

[akapowl]

38 minutes ago, sjorsr said:

Have a look at the pen below. Is this a known problem or am I missing something?

 

As far as I know, for performance reasons FLIP will only ever automatically target properties that are relevant for positioning of elements on the page.

If you want it to also tween on properties that might not be relevant for that - such as border-radii - you'll have to manually add them as props to the Flip.getState() method.

 

This is from the docs:

Flip only concerns itself with position, size, rotation, and skew. If you want your Flip animations to affect other CSS properties, you can define a configuration object with a comma-delimited list of props, like:

 

https://greensock.com/docs/v3/Plugins/Flip/

 

Does that work like you had in mind?

See the Pen dywZzEW by akapowl (@akapowl) on CodePen

[sjorsr]

That solved it, awesome! Thanks