Building a Scrollable and Draggable Timeline with GSAP
By Michelle Barker on
Learn how to build a scrollable and draggable horizontal timeline using GSAP's ScrollTrigger and Draggable plugins.
Navigation
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.
Crafting a Scrollable and Draggable Parallax Slider
By Ruud Luijten on
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
By Mary Lou on
An inline menu layout with a playful hover animation and a gallery content preview panel.
Implementing WebGL Powered Scroll Animations
By Yuriy Artyukh on
Learn some fun WebGL by reconstructing the beautiful scroll animations from Robin Noguier's portfolio.
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.
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.
A Glitchy Grid Layout Slideshow
By Mary Lou on
An experimental grid slideshow with a stack-like navigation and glitch effect.
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.
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.
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 Navigation Indicators
By Mary Lou on
Some navigation style ideas for slideshows, pages and other components that require a navigation. Shown on the example of a vertical slideshow.
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.
Arrow Navigation Styles
By Mary Lou on
Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.