sjorsr Posted September 19, 2023 Share Posted September 19, 2023 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 Link to comment Share on other sites More sharing options...
Solution akapowl Posted September 19, 2023 Solution Share Posted September 19, 2023 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 3 Link to comment Share on other sites More sharing options...
sjorsr Posted September 20, 2023 Author Share Posted September 20, 2023 That solved it, awesome! Thanks 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now