Layer Motion Slideshow
In Playground, by Manoela Ilic
A CSS Grid-based slideshow template with a layer motion effect on the main image and title.
grid
Animated Grid Previews
In Playground, by Manoela Ilic
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an “explore” link is clicked.
Fullscreen Hover Loop Effect
In Playground, by Manoela Ilic
A fullscreen loop effect that shows a fast preview of images when hovering a special menu item.
Multibox Menu
In Playground, by Manoela Ilic
A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.
Grid Layout with Scrollable Content View
In Playground, by Manoela Ilic
A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view.
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.
Slide Out Box Menu
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.
Grid Layout with Motion Hover Effect and Content Preview
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.
Expanding Grid Menu
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.
Expanding Grid Item Animation
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.
CSS Grid Layout Slideshow
In Playground, by Manoela Ilic
A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.
Inspiration for Grid Loading Animations
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.
Item Reveal Animations with SVG
In Playground, by Manoela Ilic
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
Interactive Record Player
In Playground, by Manoela Ilic
An experimental template with an interactive old school record player powered by the Web Audio API.
Isometric and 3D Grids
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.
Polaroid Stack to Grid Intro Animation
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.
Effect Ideas for Image Grids
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.
Card Expansion Effect with SVG clipPath
In Playground, by Claudio Calautti
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
