Background Shift Animation with CSS Blend Modes
By Mary Lou on
A background color shift effect using a CSS blend mode and a multi-layer animation.
layout
Grid Zoom Layout
By Mary Lou on
A simple image grid layout where a small grid image zooms to become larger while a content view opens.
Slideshow with Filter Reveal Effect
By Mary Lou on
A slideshow page layout with a filter enhanced navigation effect.
Kinetic Typography Page Transition
By Mary Lou on
A concept for a kinetic typography based page transition where background letters come into the foreground and reveal a new content level.
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.
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.
Preview to Full Content Page Transition
By Mary Lou on
An experimental page transition concept for magazines and blogs where an excerpt item opens for a full page view.
Distributed Letters Animation Layout
By Mary Lou on
A distributed letters animation in the context of a triple panel layout with hover effect.
Horizontal Smooth Scroll Layouts
By Mary Lou on
Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.
Inline Menu Layout with Gallery Panel
By Mary Lou on
An inline menu layout with a playful hover animation and a gallery content preview panel.
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.
Thumbnail to Full Width Image Animation
By Mary Lou on
An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.
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.
Crafting a Cutout Collage Layout with CSS Grid and Clip-path
By Bri Camp Gomez on
Learn how to code up an interesting design with a cutout image look using CSS Grid and clip-path.
3D Folding Layout Technique for HTML Elements
By Daniel Velasquez on
A tutorial on an experimental 3D layout technique for HTML elements with endless possibilities.
Smooth Scrolling Image Effects
By Mary Lou on
A small set of ideas on animating images and other elements while smooth scrolling a page.
Draggable Menu with Image Grid Previews
By Mary Lou on
A draggable inline menu with a scattered thumbnail preview of an image grid.
Draggable Image Strip
By Mary Lou on
A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.