Flip.fit() with Grid children

[Web Bae]

Hey all,

 

I'm having a heck of a time flipping grid children around.

 

In this example I'm trying to flip images from grid-one over to target divs in grid-two.

 

I experimented a bit with some grid CSS properties (grid-column-start grid-row-end etc.) thinking that might be making them not fit properly but haven't been able to get something proper working. I thought maybe making a wrapper div that controlled the div position and the just flipping the image between those two divs might be the way to go but still no joy.

 

Any help is appreciated!

 

Have a great weekend.

 

Keegan

See the Pen KKGvpGB by webisbae (@webisbae) on CodePen

[Rodrigo]

Hey Keegan!

 

Just use the absolute option in the fit() configuration:

Flip.fit(image, targets[index], {
  duration: 3,
  ease: "power1.inOut",
  absolute: true,
});

From the Flip docs:

absolute

Boolean - if true, the target will have its position CSS property set to absolute. This can solve layout challenges with flex and grid layouts, for example.

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[Web Bae]

Thanks Rodrigo!

 

Worked great - I am working on a more advanced example with hover effects that aren't playing nicely - will post another thread on that one.

 

Keegan