SteveS Posted May 16, 2021 Share Posted May 16, 2021 Having read some forum posts about the difficulties of animating flex properties, I still figured that the `gap` property would be tweenable given it is a numerical value, but I can't seem to. Is this a known gap in GSAPs abilities? Link to comment Share on other sites More sharing options...
SteveS Posted May 16, 2021 Author Share Posted May 16, 2021 Nevermind, I had confused a few options. Link to comment Share on other sites More sharing options...
GreenSock Posted May 17, 2021 Share Posted May 17, 2021 No worries. Let us know if you need anything else. Happy tweening! Link to comment Share on other sites More sharing options...
Chiggsy Posted June 21, 2023 Share Posted June 21, 2023 @SteveS Sorry did you manage to get flex gap to animate? I can't seem to get it to work either. Link to comment Share on other sites More sharing options...
akapowl Posted June 21, 2023 Share Posted June 21, 2023 Welcome to the GSAP forum @Chiggsy What have you tried so far? Steve is right, since gap uses numeric values, it should easily be animatable. Here is an example - note, that I set autoRound: false here, to smoothen things out a bit. See the Pen gOQwgJZ by akapowl (@akapowl) on CodePen https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin autoRound By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you’d rather disable that behavior, pass autoRound: false in the CSS object. You can still use the SnapPlugin to manually define properties that you want rounded. 5 Link to comment Share on other sites More sharing options...
Cassie Posted June 21, 2023 Share Posted June 21, 2023 🔥 worth mentioning that just because a property is *able* to be animated, doesn't mean it's performant. Make sure you test on a few lower end devices! 3 Link to comment Share on other sites More sharing options...
Chiggsy Posted June 27, 2023 Share Posted June 27, 2023 Thanks everyone! Appreciate the rapid replies! 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