A Glitchy Grid Layout Slideshow

An experimental grid slideshow with a stack-like navigation and glitch effect.

From our sponsor: Grow sales by using the smart tools in our all-in-one Marketing Platform. Try it for free.

I love experimenting with irregular layouts. I wanted to try to take this custom “background” grid one level further and add a stack-like navigation effect. I liked how it turned out but there was some Jazz missing. It was calling for some dramatic effect, like a glitch animation! So I added it and it was the missing bit indeed.

So, here it is: a glitchy grid layout slideshow with a magnetic link effect and a quick, stack-like animation when navigating.

Here’s the initial view:

When clicking on one of the navigation buttons, there’s a quick stacking animation:

When hovering over the “Enter” button, a glitch animation happens on all the images and texts. This is how it all comes together:

I really hope this comes in handy as a starting point for your ideas! Let me know what you think @codrops or @crnacura 🙂

Tagged with:

Mary Lou

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.


Stay up to date with the latest web design and development news and relevant updates from Codrops.

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.