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.
menu
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.
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.
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.
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.
Dynamic Shape Overlays with SVG
By Yoichi Kobayashi on
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
Inspiration for Menu Hover Effects
By Mary Lou on
Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.
Expanding Bar Navigation Concept
By Mary Lou on
An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked.
Inspiration for Line Menu Styles
By Mary Lou on
Some ideas for menu styles and effects that employ the line as a creative design element. This is an open collection; contributions are welcome!
Multi-Level Menu
By Mary Lou on
A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.
Animating an SVG Menu Icon with Segment
By Luis Manuel on
A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating S
Page Stack Navigation
By Mary Lou on
A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin, Stacked navigation.
Creative Gooey Effects
By Lucas Bebber on
A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components.
Off-Canvas Menu Effects
By Mary Lou on
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.
Perspective Page View Navigation
By Mary Lou on
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mob
Animated Border Menus
By Mary Lou on
A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps.