Diagonal Slideshow
In Playground by Manoela Ilic
A slideshow with a “diagonal” look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.
In Playground by Manoela Ilic
A slideshow with a “diagonal” look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.
In Playground by Manoela Ilic
A details menu with boxes that slide out in an irregular grid. The grid items get revealed individually with delays from the top right corner of the page.
In Playground by Manoela Ilic
A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens.
In Playground by Manoela Ilic
A CSS Grid powered menu with a box look inspired by the effect seen in the “Ableton Live 10: What’s New”
video.
In Playground by Manoela Ilic
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.
In Playground by Manoela Ilic
A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.
In Playground by Manoela Ilic
A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded.
In Playground by Manoela Ilic
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
In Playground by Manoela Ilic
An experimental template with an interactive old school record player powered by the Web Audio API.
In Playground by Manoela Ilic
Some experimental isometric and 3D grids. The idea is to use isometric/3D grids as decorative elements or with some interaction.
In Tutorials by Manoela Ilic
A tutorial on how to create an intro animation where a decorative Polaroid stack becomes a grid similar to the effect seen on the takeit website.
In Playground by Manoela Ilic
Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.
In Playground by Claudio Calautti
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
In Blueprints by Manoela Ilic
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.
In Blueprints by Manoela Ilic
A basic responsive product grid layout with comparison functionality and a slide-in effect.
In Playground by Manoela Ilic
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
In Tutorials by Manoela Ilic
A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid.
In Tutorials by Manoela Ilic
A tutorial on how to achieve the grid loading effect seen on the “Design Samsung” site. The effect will show a colored element sliding in first and then sliding out again, revealing the image.