Expanding Grid Item Animation

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

Expanding Grid Item Animation was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants