Samuele Posted April 13, 2022 Share Posted April 13, 2022 Hi all, I'm using Gsap's flip plugin (which works very well) to change randomly the position of the square item in a grid. I simply set a css rule to the container: display: grid; grid-template-columns: repeat(7, 1fr); And to every child (to keep it square): aspect-ratio:1; The fact is that the red section under the grid goes up whenever the animation is running. I guess it is a rule that the flip plugin sets to all the elements, like an "absolute" position? Is there a way to keep the section fixed without specifying the heights in pixels of the item? See the Pen popLMgX by sml-k (@sml-k) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 13, 2022 Solution Share Posted April 13, 2022 7 minutes ago, Samuele said: I guess it is a rule that the flip plugin sets to all the elements, like an "absolute" position? It is right there, set in your Flip.from() ...without that setting it works like you probably expected (?) . // Animate the change Flip.from(state, { absolute: true // <---- }); See the Pen YzYOYrq by akapowl (@akapowl) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Samuele Posted April 13, 2022 Author Share Posted April 13, 2022 My bad, I was totally focused on css rules that I missed out that Js setting. Super! @akapowl 2 Link to comment Share on other sites More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 You can also specify what elements should be absolute. There are times where you might need to include the container as part of the Flip animation, but have the elements inside of it be absolute. See the Pen VwyGyXa by GreenSock (@GreenSock) on CodePen 3 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