Menu and Thumbnail Stack Animation
By Mary Lou on
An animation on an image stack for a menu where the images get rearranged from a column into a row.
menu
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.
How to Code the K72 Marquee Hover Animation
By Mary Lou on
Learn how to recreate the direction-aware marquee menu hover effect seen on the website of K72 by Locomotive.
Inline to Menu Link Animation
By Mary Lou on
An experimental inline-to-menu-link animation based on a concept by Matthew Hall.
How to Code a Crosshair Mouse Cursor with Distortion Hover Effect
By Mary Lou on
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.
Rotated 3D Letters and Image Hover Effect
By Mary Lou on
A rotated 3D like letters hover effect combined with a tilted image for a menu.
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.
Exploring Animations for Menu Hover Effects
By Mary Lou on
A couple of ideas for creative menu hover animations with images.
Creating a Menu Image Animation on Hover
By Mary Lou on
A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
An Infinitely Scrollable Vertical Menu
By Mary Lou on
A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items.
Morphing Gooey Text Hover Effect
By Mary Lou on
Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.
CSS-Only Marquee Effect
By Mary Lou on
A simple CSS-only marquee effect for a menu based on Francesco Zagami's Dribbble shot.
Building a Physics-based 3D Menu with Cannon.js and Three.js
By Arno Di Nunzio on
Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer.
Case Study: Chang Liu Portfolio V4
By Chang Liu on
Get insight on how to add 3D to a website using Three.js and make a wavy distortion effect in this case study of Chang Liu's new portfolio.
Draggable Menu with Image Grid Previews
By Mary Lou on
A draggable inline menu with a scattered thumbnail preview of an image grid.
How to Build an Underwater-Style Navigation Using PixiJS
By Liam Egan on
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
Animated Grid Previews
By Mary Lou on
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.