GSAP Flip grid animation makes grid items jump

[Gulg]

When I use GSAP with Flip to animate changing grid layout, certain items jump down and flicker for some reason (click them to see the animation). Why does it happen and how can I prevent it?

See the Pen ogLQKae by GulgDev (@GulgDev) on CodePen.

[Rodrigo]

Hi @Gulg and welcome to the GSAP Forums!

 

When working with Grid/Flex layouts, is better to use the absolute config option in your Flip instances, in order to use position absolute during the Flip animations:

https://gsap.com/docs/v3/Plugins/Flip/#absolute

 

In the case of your demo it would end up like this:
 

const grid = document.querySelector("#grid");
for (const card of grid.children)
  card.addEventListener("click", () => {
    const state = Flip.getState([grid, ...grid.children]);

    card.classList.toggle("expanded");

    Flip.from(state, {
      duration: 0.5,
      ease: "power1.inOut",
      absolute: true
    });
  });

Hopefully this helps

Happy Tweening!

[Gulg]

Hello @Rodrigo and thank you for your response! I have already tried this option, but unfortunately it isn't a viable solution for me because it makes the parent collapse while the animation is running as it now has no statically positioned content.

[Rodrigo]

Yeah if you want to avoid those layout jumps, I see two choices. Include the elements below the container in the getState() method so Flip includes and animates them as well or set the height of the grid container up front, use a set instance to avoid jumps, remove the grid container from the getState() method and finally animate the height of that element in order to avoid that jump.

 

Here is a fork of your demo that uses the second approach:

See the Pen raLoLOd by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!