Slide Out Box Menu
By Mary Lou on
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
Grid Layout with Motion Hover Effect and Content Preview
By Mary Lou on
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
By Mary Lou on
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
By Mary Lou on
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. ...
Letter Effects and Interaction Ideas (Part 2)
By Mary Lou on
A new set of letter effects and animations for playful typography interactions. ...
Inspiration for Grid Loading Animations
By Mary Lou on
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
By Mary Lou on
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js. ...
Interactive Record Player
By Mary Lou on
An experimental template with an interactive old school record player powered by the Web Audio API. ...
Isometric and 3D Grids
By Mary Lou on
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
By Mary Lou on
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
By Mary Lou on
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
By Claudio Calautti on
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify. ...
Filterable Product Grid
By Mary Lou on
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality. ...
Product Comparison Layout & Effect
By Mary Lou on
A basic responsive product grid layout with comparison functionality and a slide-in effect. ...
Grid Item Animation Layout
By Mary Lou on
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content. ...
Sliding Header Layout
By Mary Lou on
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. ...
Recreating the “Design Samsung” Grid Loading Effect
By Mary Lou on
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 ...
3D Grid Effect
By Mary Lou on
A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and re ...
Animations for Thumbnail Grids
By Mary Lou on
There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy eff ...
Loading Effects for Grid Items with CSS Animations
By Mary Lou on
Some inspiration for loading effects of grid items using CSS animations. ...
Dynamic Grid with Transitions
By Mary Lou on
A dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can ad ...
App Showcase with Grid Overlay
By Mary Lou on
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase. ...
Thumbnail Grid with Expanding Preview
By Mary Lou on
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images. ...
Creating Nestable Dynamic Grids
By Larry Botha on
Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the grid behaves in all viewports. ...