Animate growing grid items

[Alex.Marti]

Hello there,

 

I'm trying to animate grid items. I have a grid with big items and small items.

 

What I try to achieve : when I click on small items, they will grow with a transition and push other items away to the next space available in the grid. The others items should also have an animation when beeing pushed away. If an item is at the end of a row, it should jump to next row with a animation.

 

What I have so far (see codepen) : I used GSAP to make items grow by changing their grid-column-end and grid-colum-row but for now there's no animation and the others items are jumping to their next position. I've also noticed a small delay when clicking on a small box, why is there this delay?

 

My question : I know it's a complexe animation/behavior to create. Before I dive deeper in this direction, I'd like to know if it's possible to achieve this with GSAP? I've seen some others posts with grid animation questions and @ZachSaucier often redirect people to use FLIP and it's helper function. Is that something that I can achieve with FLIP?

 

Thanks for your help

 

Alex

 

See the Pen poWNYJM by iamalexm (@iamalexm) on CodePen.

[OSUblake]

Welcome to the fourms @Alex.Marti

 

Flip is the only way to do grid and flexbox layout animations. Check it out. ?

 

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

 

[Carl]

crazy to see Flip do all that heavy lifting with such little code. wow. 

[Alex.Marti]

Thanks a lot @OSUblake for your help! It's exactly what I tried to achieve!

 

As @Carl said, I'm also truly amazed of the power of GSAP and FLIP.

 

I have no more excuses to purchase the ShockinglyGreen plan now ?

 

I'm looking forward to experiment FLIP and all the other plugins!

 

Alex

[GreenSock]

Welcome aboard, @Alex.Marti! Thanks for joining Club GreenSock. 

 

Have fun, and tween responsibly

 

[Alex.Marti]

Hello again,

 

So I improved my grid and add a filter.

 

I took the exemple in this codependand add it to my grid. It works well. But now I'd like to add a footer or another div below my grid.

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

 

I have the following issue : If I put absolute : true to my Flip function, the boxes leaves and enter the way I like. But the footer jump up and down during the animation. And if I put absolute : false the footer stay in place but I lost the exit animation of the boxes. How can I have animation AND a footer that stays put?

 

Here is my codepend :

 

See the Pen poWNmyZ by iamalexm (@iamalexm) on CodePen.

 

Thanks,

 

Alex

[OSUblake]

Hi @Alex.Marti

 

The next version of Flip will include some additions that should improve this. You can specify what elements to be absolute, because you usually want to exclude the container, and there is also a setting to automatically apply absolute to elements that are leaving. 

 

Check it out. 

 

See the Pen 20ea8a7853be775238b48511a31a3386 by GreenSock (@GreenSock) on CodePen.

 

[Alex.Marti]

Awesome! Thank you @OSUblake for the tip!

I updated FLIP to version 3.9.0 and it works like a charm ?

 

I'll keep working on my grid animation and let you know if I'm stuck again ?

 

 

[Cassie]

Just dropping in to say hi to your dog. ?

[Alex.Marti]

18 hours ago, Cassie said:

Just dropping in to say hi to your dog. ?

He says Hi too! ?

[Alex.Marti]

Hello again @OSUblake how are you?

 

I'm having an issue with FLIP with my website. I'm using FLIP to perform a growing/shrinking effect of my grid element like the exemples above.

 

When I click on a small box to make it bigger, the other big boxes are moving smoothly from one row to another. But the small boxes are weirdly jumping between rows.

 

You can see my website here (the boxes are displayed randomly, so you may have to refresh the page to see the issue properly) : https://aureverre.abiesco.ch/pourquoi-reutiliser-le-verre/

 

My js code is exactly the same as your last codepen so I don't understand why it behaves like this.

 

Do you have any idea?

 

Thx

 

Alex

[OSUblake]

I'm not sure. Do you think you can into a CodePen so we can play around with the code?

 

 

 

[Alex.Marti]

5 minutes ago, OSUblake said:

I'm not sure. Do you think you can into a CodePen so we can play around with the code?

 

 

 

I tried but on a CodePen I was not able to repeat this behavior, it works the way I want. Maybe it's not gsap related and it's a css issue. I'll make a few tests

[Alex.Marti]

1 hour ago, OSUblake said:

I'm not sure. Do you think you can into a CodePen so we can play around with the code?

 

 

 

Ok I found the issue, it was css indeed.

 

I switch my small boxes transition property from

transition: all 0.3s linear;

to

transition : transform, box-shadow 0.3s linear;

 

And it works.

[Alex.Marti]

So it works pretty well now, but I'm sure I can improve my timeline code.

 

if(isOpen){      
   masterTL.add(flipTL.play()).add(textTL.play()).play();      
}else{
   masterTL.add(textTL.reverse(0)).add(flipTL.play()).play();
}

 

Is there a way to make it less verbose?

 

Here is my copepen :

See the Pen ExwzrdG by iamalexm (@iamalexm) on CodePen.

[OSUblake]

You keep adding animations to your master timeline, which makes it longer and longer. 

 

if(isOpen){      
   masterTL.add(flipTL.play()).add(textTL.play()).play();      
}else{
   masterTL.add(textTL.reverse(0)).add(flipTL.play()).play();
}

// keeps increasing
console.log("duration", masterTL.duration());

 

So you should skip the masterTL part and simplify it a bit like this.

 

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

 

 

[Alex.Marti]

Thanks for the tip @OSUblake !

 

I didn't realized that my timeline got longer and longer