Diagonal Slideshow
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.
+ moreby Manoela Ilic
A slideshow with a "diagonal" look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.
+ moreby 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.
+ moreby 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.
+ moreby 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.
+ moreby 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.
+ moreby Manoela Ilic
A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.
+ moreby 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.
+ moreby Manoela Ilic
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
+ moreby Manoela Ilic
An experimental template with an interactive old school record player powered by the Web Audio API.
+ moreby Manoela Ilic
Some experimental isometric and 3D grids. The idea is to use isometric/3D grids as decorative elements or with some interaction.
+ moreby 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.
+ moreby 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.
+ moreA morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
+ moreby Manoela Ilic
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.
+ moreby Manoela Ilic
A basic responsive product grid layout with comparison functionality and a slide-in effect.
+ moreby Manoela Ilic
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
+ moreby 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.
+ moreby 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
+ more