Interactive Record Player
by Mary Lou
An experimental template with an interactive old school record player powered by the Web Audio API.
+ more#grid
Isometric and 3D Grids
by Mary Lou
Some experimental isometric and 3D grids. The idea is to use isometric/3D grids as decorative elements or with some interaction.
+ more
Polaroid Stack to Grid Intro Animation
by Mary Lou
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.
+ more
Effect Ideas for Image Grids
by Mary Lou
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.
+ more
Card Expansion Effect with SVG clipPath
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
+ more
Filterable Product Grid
by Mary Lou
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.
+ more
Product Comparison Layout & Effect
by Mary Lou
A basic responsive product grid layout with comparison functionality and a slide-in effect.
+ more
Grid Item Animation Layout
by Mary Lou
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
+ more
Sliding Header Layout
by Mary Lou
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.
+ more
Recreating the “Design Samsung” Grid Loading Effect
by Mary Lou
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
3D Grid Effect
by Mary Lou
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
+ more
Google Grid Gallery
by Mary Lou
A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google.
+ more
Animations for Thumbnail Grids
by Mary Lou
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
+ more
Loading Effects for Grid Items with CSS Animations
by Mary Lou
Some inspiration for loading effects of grid items using CSS animations.
+ more
Responsive Icon Grid
by Mary Lou
A responsive grid of anchors with icons, text and some example hover transitions.
+ more
View Mode Switch
by Mary Lou
A simple view mode switch that has two example layouts, a grid and a list.
+ more
Dynamic Grid with Transitions
by Mary Lou
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
+ more
Product Grid Layout
by Mary Lou
A responsive product grid layout with some UI details for inspiration.
+ more