Chris_9111 Posted February 8 Share Posted February 8 Hello motion wizards, I need help with preventing that layout shift/jump that happens to the grid layout items when the Flip animations triggers. It appears that the clicked box leaves the grid and grid "fills" it with the next item in line which moves the rest of the items of the grid to fill the last item the was moved. Can I prevent it, is my approach wrong? See the Pen MWxBxbE by Chris_9111 (@Chris_9111) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted February 8 Solution Share Posted February 8 Hi @Chris_9111 welcome to the forum! Just wrap your elements in an extra element that takes up the space and move the inside element. Here I've given 02 an .outer outlined in red which stays in place when the animation happens. Hope it helps and happy tweening! See the Pen RwdYWyN?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 8 Share Posted February 8 Hi, Hopefully this demo helps as well: See the Pen XWOeLEb by GreenSock (@GreenSock) on CodePen Happy Tweening! 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