Expanding Grid Item Animation

A grid item animation where the thumbnail scales up when the details view is opened. Based on the Dribbble shot “Surf Project” by Filip Slováček.

By in Playground on
Demo Code

Today we’d like to share a simple implementation of a grid animation with you that is based on the Dribbble shot Surf Project by Filip Slováček. When a grid item is clicked, the background and the thumbnail are scaled up and moved to their fullscreen position. While the Dribbble shot is an animation for the mobile phone, we thought we could explore this concept for the desktop, too. We are using anime.js by Julian Garnier.

This demo is kindly sponsored by Storyblocks.

If you would like to become a demo sponsor, you can find out more here.

Attention: For the demo we use some modern CSS properties like CSS Flexbox, CSS Grid and CSS variables without a fallback, so please view them in a up-to-date browser.

Have a look at the screenshots:

expandinggrid01

expandinggrid02

expandinggrid03

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy this demo and find it useful!

References and Credits

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.

How to Create an AI-Powered Newsletter Aggregator with React and AI Agents

Creating a Risograph Grain Light Effect in Three.js

On-Scroll Sliced Text Animation

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

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 27

Comments are closed.

    • Thanks a lot for the feedback! Could you give it another try and let me know if this always happens or just sometimes? Thanks a lot, cheers, ML

    • Thanks Binyamin, I still can’t see it but I’ll try to find out what the problem is. Cheers, ML

    • I am also seeing this on desktop, when you click a productImage for the second time, the previous image shows up for few milliseconds and change.

  2. Really nice effect, I’d probably use overflow hidden on the body when the large product preview is open to prevent scrolling. ?

  3. Would be nice if this worked with hashtags on the URL so that it was more SEO friendly. Ditto to Javier on the page scrolling / overflow hidden when a window pops up.

    • Looking briefly at the code I think it can be easily achieved with some :target selector (yet I think that was not the point of that demo of a sexy animation on expanding grid items 😛 ).

      As always, that’s a very cool stuff, quite inspiring, thanks for sharing!

  7. Very nice! I am having an issue though… I’m trying to impliment this in a WordPress theme. All necissary JS and CSS is being included in the theme and is loading fine but the interactions are not triggering because it’s throwing a TypeError: DOM.grid is null … Works perfectly fine outside of WordPress for me though.

  9. Grids are not working in Edge or IE(>10), all the items are just placed below one by one. I’d try with -ms- suffix in inspect element but still not working. Anybody faced this issue or it’s just me?

  10. FYI when testing on Chrome;
    If you open a product, you can scroll what is happening on the background.
    (so you lose track of where you where)

  13. Hi, I would like to know why all js code in main.js is inside {}; What does it mean? Sorry, I am javascript newbie.

  15. If you fastly click on guitar and then click on close, image disappear, but text still persist as overlay

  17. Any advice for how to add overflow:hidden to the body on overlay without breaking scrolling on main page?? When i add overflow hidden, i can’t scroll down the grid.

  18. I’m having switching out the guitar icons with my own illustrations, could I please get some input on how to go about doing this? Thank you! I’m loving this template