Grid Masonry animation with Flip

[Alex.Marti]

Hello,

 

I'm using

See the Pen WNGQyvX by chriscoyier (@chriscoyier) on CodePen

to create masonry style in a Grid. I'm hidding the content of the boxes to make them smaller.

 

I'm stuck with this issue : I'd like to animate with a timeline and Flip the text entrance when I click on a grid Item. For now it is working but I have to use a gsap.set() to make it works and the text is coming to quickly.  At the end of my click event I'm using the resizeAllGridItems() function to calculate the height of each grid items.

 

I'd like to use a timeline to have more control for the text entrance, but I don't know how to managed the timeline with resizeAllGridItems()and Flip.

 

Could you help me with this issue?

 

Thanks a lot,

 

Alex

See the Pen KKJYxEb by iamalexm (@iamalexm) on CodePen

[mvaneijgen]

Hi @Alex.Marti I've restructured your pen a bit and placed some comments in the JS to better explain things. I've copied the logic for this demo from the docs (https://gsap.com/docs/v3/Plugins/Flip/) because on item resize you want to flip ALL the items, right? Not just the one that is being clicked. 

 

See the Pen zYqLjre?editors=0010 by GreenSock (@GreenSock) on CodePen

 

What I think is the easiest is creating a timeline for each of the items and then .play() or .reverse() them  on click and I think you can only recalculate the elements location when the current card has expanded. I'm not sure if there is a way to include the timeline in the flip calculations, but I hope this is a great starting point to get you further in your project. Hope it helps and happy tweening! 

 

See the Pen YzBMdxq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

Since you already have a visible class for the paragraph tag, why not toggle that class and let Flip do the heavy lifting for you? That's what Flip is for, make your life super simple and fun!

items.forEach((item) => {
  let visible = false;
  item.addEventListener("click", () => {
    const text = item.querySelector("p");
    if (text) {
      const state = Flip.getState([".content", text], {
        props: "opacity"
      });
      text.classList.toggle("visible");
      const tl = gsap.timeline();
      visible = !visible;

      resizeAllGridItems();

      Flip.from(state, {
        duration: 0.5,
        absolute: true
      });
    }
  });
});

Here  is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[Alex.Marti]

Thanks both of you @mvaneijgen and @Rodrigo for your answers. It helped me a lot to better understand how Flip works and how to improve my code.

 

@Rodrigo your way of doing is almost what I'd like to achieve.

 

EDIT : why my codepen is now showing up? : https://codepen.io/iamalexm/pen/KKJYxEb

 

 

I used your code to try to animate the text with more control with a tween (or a timeline). But I think there's a better way to do this. I was thinking of using the idea of showDetails() and hideDetails() from this exemple : 

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

 

But it seems to complicated for what I'm trying to do.

[Rodrigo]

Hi,

 

You were complicating things a bit with your approach, this seems simpler:

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

 

Hopefully this helps.

Happy Tweening!

[Alex.Marti]

15 hours ago, Rodrigo said:

Hi,

 

You were complicating things a bit with your approach, this seems simpler:

 

 

 

Hopefully this helps.

Happy Tweening!

 Thanks @Rodrigo, that's what I wanted !

 

Alex