Layout with Reveal Animations and Content Preview
By Mary Lou on
Some experimental reveal animations on typographic elements as repeating pattern for a website design.
grid
Magnetic 3D Grid Interaction with Content Preview
By Mary Lou on
A grid layout with a magnetic 3D interaction effect and a content preview animation.
Menu to Inner Page Animation with Image Grid Background
By Mary Lou on
A layout with a menu and background image grid that animates to an inner content page.
A Glitchy Grid Layout Slideshow
By Mary Lou on
An experimental grid slideshow with a stack-like navigation and glitch effect.
How to Create a Motion Hover Effect for a Background Image Grid
By Mary Lou on
A short tutorial on how to achieve a motion hover effect on a background image grid.
Scroll, Refraction and Shader Effects in Three.js and React
By Paul Henschel on
Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.
Draggable Menu with Image Grid Previews
By Mary Lou on
A draggable inline menu with a scattered thumbnail preview of an image grid.
Creating Grid-to-Fullscreen Animations with Three.js
By Daniel Velasquez on
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
Animated Image Columns
By Mary Lou on
An experimental web layout where several image columns get animated out when a menu item is clicked.
Layer Motion Slideshow
By Mary Lou on
A CSS Grid-based slideshow template with a layer motion effect on the main image and title.
Fullscreen Hover Loop Effect
By Mary Lou on
A fullscreen loop effect that shows a fast preview of images when hovering a special menu item.
Multibox Menu
By Mary Lou on
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
By Mary Lou on
A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view.
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 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.