Connected Grid Layout Animation | beragampengetahuan – Beragampengetahuan

After previously experimenting with the row and column animations for grid items, I was wondering how animations could work in different grid layouts. So today I’d like to share just a small addition to our previous experiments where we use a specific grid layout that is kind of “connected” at the corners to create a different animation look. It’s nothing special really but it shows how different layouts can enhance an animation, especially while we scroll.

The main idea for the layout is to create an irregular look where each grid image is connected at its corner to the next one:

A different ratio creates a different look:

And this is how it all comes together:

I really hope you enjoy this little addition to our on-scroll explorations! Thanks for checking by! 🙂