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.
expandinggrid_featured

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

We hope you enjoy this demo and find it useful!

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 14

    • 2

      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

    • 4

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

    • 5

      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.

  1. 6

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

  2. 8

    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.

    • 9

      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 :P ).

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

  3. 13

    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.

Follow this discussion

Leave a Comment