Connected Grid Layout Animation

Some ideas for simple on-scroll animations on “connected” grid layouts.

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! 🙂

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!