An Infinitely Scrollable Vertical Menu
In Tutorials, by Manoela Ilic
A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items.
menu
Morphing Gooey Text Hover Effect
In Playground, by Manoela Ilic
Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.
CSS-Only Marquee Effect
In Playground, by Manoela Ilic
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
In Tutorials, by Arno Di Nunzio
Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer.
Draggable Menu with Image Grid Previews
In Playground, by Manoela Ilic
A draggable inline menu with a scattered thumbnail preview of an image grid.
Animated Image Columns
In Playground, by Manoela Ilic
An experimental web layout where several image columns get animated out when a menu item is clicked.
How to Build an Underwater-Style Navigation Using PixiJS
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
How to Create and Animate Rotated Overlays
In Tutorials, by Manoela Ilic
A tutorial on how to create and animate rotated overlays, or “reveal” elements, for interesting page transition effects.
How to Create a Sticky Image Effect with Three.js
In Tutorials, by Daniel Velasquez
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
Image Distortion Effects with SVG Filters
In Playground, by Manoela Ilic
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
Animated Grid Previews
In Playground, 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.
Fullscreen Hover Loop Effect
In Playground, by Manoela Ilic
A fullscreen loop effect that shows a fast preview of images when hovering a special menu item.
Multibox Menu
In Playground, by Manoela Ilic
A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.
Slide Out Box Menu
In Playground, 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.
Expanding Grid Menu
In Playground, 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.
Glitch Effect Slideshow
In Playground, by Manoela Ilic
A simple slideshow that uses the CSS Glitch Effect for the slide transitions.
Gradient Topography Animation
In Playground, by Manoela Ilic
An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.
Dynamic Shape Overlays with SVG
In Playground, by Yoichi Kobayashi
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
