Building a Scrollable and Draggable Timeline with GSAP
Learn how to build a scrollable and draggable horizontal timeline using GSAP's ScrollTrigger and Draggable plugins.
+ more#navigation
Layout with Reveal Animations and Content Preview
by Mary Lou
Some experimental reveal animations on typographic elements as repeating pattern for a website design.
+ more
How to Code the K72 Marquee Hover Animation
by Mary Lou
Learn how to recreate the direction-aware marquee menu hover effect seen on the website of K72 by Locomotive.
+ more
Inline to Menu Link Animation
by Mary Lou
An experimental inline-to-menu-link animation based on a concept by Matthew Hall.
+ more
Crafting a Scrollable and Draggable Parallax Slider
by Ruud Luijten
A tutorial on how to build a slider with an interesting parallax effect that you can either scroll or drag through.
+ more
Inline Menu Layout with Gallery Panel
by Mary Lou
An inline menu layout with a playful hover animation and a gallery content preview panel.
+ more
Implementing WebGL Powered Scroll Animations
Learn some fun WebGL by reconstructing the beautiful scroll animations from Robin Noguier's portfolio.
+ more
Menu to Inner Page Animation with Image Grid Background
by Mary Lou
A layout with a menu and background image grid that animates to an inner content page.
+ more
Creating a Menu Image Animation on Hover
by Mary Lou
A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
+ more
A Glitchy Grid Layout Slideshow
by Mary Lou
An experimental grid slideshow with a stack-like navigation and glitch effect.
+ more
Morphing Gooey Text Hover Effect
by Mary Lou
Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.
+ more
Draggable Menu with Image Grid Previews
by Mary Lou
A draggable inline menu with a scattered thumbnail preview of an image grid.
+ 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
Page Flip Layout
by Mary Lou
A template with a two-sided, magazine-like layout and a flat page flip animation. The layout is powered by CSS Grid.
+ more
Outdoors Template
by Mary Lou
An implementation of Gil Huybrecht's “Outdoors” design project powered by layered CSS grids.
+ more
Expanding Bar Navigation Concept
by Mary Lou
An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked.
+ more
Inspiration for Navigation Indicators
by Mary Lou
Some navigation style ideas for slideshows, pages and other components that require a navigation. Shown on the example of a vertical slideshow.
+ more
Page Stack Navigation
by Mary Lou
A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin, Stacked navigation.
+ more