Layout shift after Flip animation completes

[Evoke Canale]

I'm trying to create a Flip animation that swaps grid items on click.  I am basing it off of this GSAP demo: 

See the Pen BawpNeV by GreenSock (@GreenSock) on CodePen

 

 

The Flip animation completes fine, but then all of the grid items move and then shift back to their correct position.  I've tried using both absolute: true and absolute: false.  absolute: true provides the smooth animation but has the shift after it completes.  absolute: false has a jerky animation, but no shift after it complete.

 

I've created a minimal demo here:  

 

Thank you for any help! 

See the Pen bGJaQZq by canalecomm_dev (@canalecomm_dev) on CodePen

[Rodrigo]

Hi,

 

This happens because you have this on your CSS:

.grid-tile {
  box-sizing: border-box;
  border-radius: 1em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  overflow: hidden;
  transition: 0.6s ease-out all; /* <- HERE */
  background-color: darkseagreen;
}

That transition all kicks in after Flips handles all it's magic. If you comment that out everything seems to work as expected:

See the Pen VwNQPjV by GreenSock (@GreenSock) on CodePen

 

Word of advice: NEVER use transition all in your css, that could lead to unexpected problems like this 😉

 

Hopefully this helps

Happy Tweening!

[Evoke Canale]

Thank you!!