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 Manoela Ilic in Playground on November 8, 2017

Demo Code

From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.

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:

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

anime.js by Julian Garnier
imagesLoaded by Dave DeSandro
Guitar icon by iconnice
Guitar vector designed by Freepik
Patterns by Pixel Buddha

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.

grid page-transition

Master JavaScript Animation with GSAP – Perfect for Beginners! Get full, free access to 34 video lessons, step-by-step projects, and hands-on demos. Enroll for free →

Feedback ²⁷

Comments are closed.

Binyamin November 8, 2017 at 14:00

FYI when testing https://tympanus.net/Development/ExpandingGridItemAnimation/ on small screen (mobile size), click to expand shows wrong image for about 3 seconds (shows the earlier expanded image).
- Mary Lou November 8, 2017 at 15:15
  
  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
- Binyamin November 12, 2017 at 06:40
  
  Mary Lou, it happens always. Try Google DEV Tools Mobile view.
- Mary Lou November 13, 2017 at 14:23
  
  Thanks Binyamin, I still can’t see it but I’ll try to find out what the problem is. Cheers, ML
- Zama Khan Mohammed November 14, 2017 at 18:24
  
  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.
Javier Villanueva November 8, 2017 at 15:52

Really nice effect, I’d probably use overflow hidden on the body when the large product preview is open to prevent scrolling. ?
- Conor O'Flanagan November 13, 2017 at 15:00
  
  I agree, I also noticed it was scrolling.
Jessie Matanky November 8, 2017 at 19:22

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.
- Tepec November 10, 2017 at 07:57
  
  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!
Boba Fett November 8, 2017 at 19:36

Fantastic. So now we are back to our regularly scheduled programs. It works for me!
romenig November 9, 2017 at 14:11

NICE, I like a lot!
Nika November 9, 2017 at 17:42

This is really cool
Richard Bakos November 10, 2017 at 15:45

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.
Sazzad Hossain November 14, 2017 at 22:09

I would add a overflow hidden on the body to prevent background content scroll.
Pranab November 19, 2017 at 18:33

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?
- Mykee November 22, 2017 at 11:06
  
  In latest Edge (v16) working without any problem, I tested. Older wersion mybe not.
Honingh November 22, 2017 at 12:24

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)
- JJ Carlson December 6, 2017 at 17:24
  
  I was going to mention this as well. Thanks!
Sarbjit Singh November 25, 2017 at 08:06

Fantastic Blog. Thank you for sharing information.
Mathias Artmann December 23, 2017 at 21:12

Link to download source isnt working
- Mary Lou December 25, 2017 at 13:16
  
  Thanks for letting us know Mathias! We’ve fixed it now. Cheers, ML
Aye January 7, 2018 at 10:23

Hi, I would like to know why all js code in main.js is inside {}; What does it mean? Sorry, I am javascript newbie.
Kyle January 22, 2018 at 03:22

I’m new to this, but how do I add individual links to the “Add To Cart” buttons?
ptflp January 25, 2018 at 20:51

If you fastly click on guitar and then click on close, image disappear, but text still persist as overlay
vim February 7, 2018 at 15:03

Hello, Great tutorial however unfortunately this does not work in safari, any ideas why?
JORDAN February 24, 2018 at 01:49

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.
Juana April 20, 2018 at 15:37

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

References and Credits

Manoela Ilic

Gooey Cursor Effect

How to Create a WebGL Rotating Image Gallery using OGL and GLSL Shaders

Getting Creative with Infinite Loop Scrolling

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

Feedback 27

Feedback ²⁷