From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today.
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.
Have a look at the screenshots:
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
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).
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
Mary Lou, it happens always. Try Google DEV Tools Mobile view.
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.
Really nice effect, I’d probably use overflow hidden on the body when the large product preview is open to prevent scrolling. ?
I agree, I also noticed it was scrolling.
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!
Fantastic. So now we are back to our regularly scheduled programs. It works for me!
NICE, I like a lot!
This is really cool
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.
I would add a overflow hidden on the body to prevent background content scroll.
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?
In latest Edge (v16) working without any problem, I tested. Older wersion mybe not.
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)
I was going to mention this as well. Thanks!
Fantastic Blog. Thank you for sharing information.
Link to download source isnt working
Thanks for letting us know Mathias! We’ve fixed it now. Cheers, ML
I’m new to this, but how do I add individual links to the “Add To Cart” buttons?
If you fastly click on guitar and then click on close, image disappear, but text still persist as overlay
Hello, Great tutorial however unfortunately this does not work in safari, any ideas why?
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.
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