Animate CSS Grid Column Count

[Unthink]

Hello!

 

I've built a css grid that uses a rangesider to change the grid column sizes. The changes are stored so that the grid choice is persistant across the site. It works but i'd love to add some staggering animation to the size changes.

https://unthinktest.xyz/levine-leavitt/ (as you can see it needs some transition animations!)

 

The codepen demo i've built is using this pen (

See the Pen rNxPKjL by animadraw (@animadraw) on CodePen

) as inspiration, and it's using the Flip plugin.

 

Perhaps i'm now getting confused between the 2 ideas, so any help or pointers would be much appreciated. Currently the staggering animations are not overlapping...

 

Thanks

Philip

See the Pen BaxwoWy by phlp (@phlp) on CodePen

[Rodrigo]

Hi Phillip,

 

Right now I don't have time to go through your example. I noticed that the zoom callback is being called twice on each slider update, so you might want to check that logic closely in order to see what's going on there. Same thing with the document click event, you click twice and something sort of happens. My advice is to decouple the DOM changing functionality into their own independent methods. Right now you have everything mixed and that could be causing the issue.

 

In the mean time I updated the original codepen example and updated it to use the latest version of GSAP and to use Flip as well:

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

 

Hopefully is enough to get you on the right direction. If you're still having issues let me know and I'll take a closer look to your example later.

 

Happy Tweening!!!

[Rodrigo]

Hi,

 

I had some time to go through your example and instead of looking for the issue I just did it again from scratch. Whatever the issue is, my best guess is that it comes from over-complicating the code. If you look at this example, the amount of code is far less and it's far easier to go through and understand:

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

 

I removed the short duration and stagger as I believe it looks better like that, more fluid. With the duration and stagger it looks a bit jagged IMHO. I kept the duration and stagger values from your original example, they're just commented out.

 

Happy Tweening!!!

[Unthink]

@Rodrigo You are a legend! This is amazing. Thank you so much for input. Yes, as you said i was without doubt overcomplicating the code!