Recent Design Finds: Compact Navigation
In Articles by Manoela Ilic
A little collection of website menus that are compact and open into nifty boxes or shapes.
navigation
Grid Flow Animation
In Playground by Manoela Ilic
A loading and navigation animation where thumbnails “flow” into a grid.
Building a Scrollable and Draggable Timeline with GSAP
In Tutorials by Michelle Barker
Learn how to build a scrollable and draggable horizontal timeline using GSAP’s ScrollTrigger and Draggable plugins.
Layout with Reveal Animations and Content Preview
In Playground by Manoela Ilic
Some experimental reveal animations on typographic elements as repeating pattern for a website design.
How to Code the K72 Marquee Hover Animation
In Tutorials by Manoela Ilic
Learn how to recreate the direction-aware marquee menu hover effect seen on the website of K72 by Locomotive.
Inline to Menu Link Animation
In Playground by Manoela Ilic
An experimental inline-to-menu-link animation based on a concept by Matthew Hall.
Crafting a Scrollable and Draggable Parallax Slider
In Tutorials by Ruud Luijten
A tutorial on how to build a slider with an interesting parallax effect that you can either scroll or drag through.
Inline Menu Layout with Gallery Panel
In Playground by Manoela Ilic
An inline menu layout with a playful hover animation and a gallery content preview panel.
Menu to Inner Page Animation with Image Grid Background
In Playground by Manoela Ilic
A layout with a menu and background image grid that animates to an inner content page.
Creating a Menu Image Animation on Hover
In Tutorials by Manoela Ilic
A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
A Glitchy Grid Layout Slideshow
In Playground by Manoela Ilic
An experimental grid slideshow with a stack-like navigation and glitch effect.
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.
Draggable Menu with Image Grid Previews
In Playground by Manoela Ilic
A draggable inline menu with a scattered thumbnail preview of an image grid.
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.
Page Flip Layout
In Playground by Manoela Ilic
A template with a two-sided, magazine-like layout and a flat page flip animation. The layout is powered by CSS Grid.
Outdoors Template
In Playground by Manoela Ilic
An implementation of Gil Huybrecht’s “Outdoors” design project powered by layered CSS grids.
Expanding Bar Navigation Concept
In Playground by Manoela Ilic
An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked.
Inspiration for Navigation Indicators
In Playground by Manoela Ilic
Some navigation style ideas for slideshows, pages and other components that require a navigation. Shown on the example of a vertical slideshow.
