How to Create Motion Hover Effects with Image Distortions using Three.js
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
+ more#hover
Case Study: Chang Liu Portfolio V4
by Chang Liu
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.
+ more
Mouse Flowmap Deformation with OGL
A set of WebGL demos using OGL that show an interactive fluid distortion hover effect.
+ more
React Slider with Parallax Hover Effects
Walk through the build of a React slider and learn how to implement a parallax hover effect.
+ 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 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
Custom Cursor Effects
A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.
+ more
Interactive Repulsion Effect with Three.js
by Ion D. Filho
A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold's Dribbble shot "Holographic-Interactions".
+ more
Image Reveal Hover Effects
by Manoela Ilic
A set of link hover effects that reveal a thumbnail in different creative ways.
+ 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
Grid Layout with Motion Hover Effect and Content Preview
by Manoela Ilic
A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens.
+ more
Ideas for Proximity Feedback with Progressive Hover Effects
by Manoela Ilic
We're exploring a progressive hover effect which triggers not just when we are hovering an element but progressively, when we come close to it.
+ more
WebGL Distortion Hover Effects
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.
+ more
CSS Glitch Effect
by Manoela Ilic
An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.
+ more
Organic SVG Shape Morph Ideas
by Manoela Ilic
A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content
+ 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