Building a Physics-based 3D Menu with Cannon.js and Three.js
Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer.
+ more#menu
Draggable Menu with Image Grid Previews
by Manoela Ilic
A draggable inline menu with a scattered thumbnail preview of an image grid.
+ more
Animated Image Columns
by Manoela Ilic
An experimental web layout where several image columns get animated out when a menu item is clicked.
+ more
How to Build an Underwater-Style Navigation Using PixiJS
by Liam Egan
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
+ more
How to Create and Animate Rotated Overlays
by Manoela Ilic
A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects.
+ more
How to Create a Sticky Image Effect with Three.js
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
+ more
Image Distortion Effects with SVG Filters
by Manoela Ilic
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
+ more
Animated Grid Previews
by Manoela Ilic
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.
+ more
Fullscreen Hover Loop Effect
by Manoela Ilic
A fullscreen loop effect that shows a fast preview of images when hovering a special menu item.
+ more
Multibox Menu
by Manoela Ilic
A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.
+ more
Slide Out Box Menu
by Manoela Ilic
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.
+ more
Expanding Grid Menu
by Manoela Ilic
A CSS Grid powered menu with a box look inspired by the effect seen in the "Ableton Live 10: What's New" video.
+ more
Glitch Effect Slideshow
by Manoela Ilic
A simple slideshow that uses the CSS Glitch Effect for the slide transitions.
+ more
Gradient Topography Animation
by Manoela Ilic
An organic SVG shape layer animation based on Diana Hlevnjak's work "Gradient Topography". Powered by anime.js.
+ more
Dynamic Shape Overlays with SVG
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
+ more
Sliced Dual Image Layout
by Manoela Ilic
Some layouts with sliced background images, slideshow functionality and glitch effect.
+ more
Inspiration for Menu Hover Effects
by Manoela Ilic
Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.
+ more
Expanding Bar Navigation Concept
by Manoela Ilic
An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked.
+ more