Ideas for Distorted Link Effects on Menus
by Manoela Ilic
Some examples of how to use decorative distortion effects on big typography menu links.
+ morePlayground
The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
Background Scale Hover Effect with CSS Clip-path
by Manoela Ilic
A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.
+ more
Distorted Link Effects with SVG Filters
by Manoela Ilic
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
+ more
Animating SVG Text on a Path
by Manoela Ilic
A demo that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.
+ more
Audio-based Image Distortion Effects with WebGL
Some experiments that show how to make audio-based distortion effects on images with p5.js and its sound library.
+ more
Image Dragging Effects
by Manoela Ilic
A set of playful dragging effects for images using various techniques.
+ more
How to Unroll Images with Three.js
by Yuri Artiukh
Discover the basic concept behind an unrolling image effect using WebGL.
+ more
Creative WebGL Image Transitions
by Yuri Artiukh
A set of interesting looking image transitions including distortion and warp effects made with WebGL.
+ more
Mouse Flowmap Deformation with OGL
A set of WebGL demos using OGL that show an interactive fluid distortion hover effect.
+ more
A Configurator for Creating Custom WebGL Distortion Effects
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
+ more
Image Trail Effects
by Manoela Ilic
A set of brutalist effects for mouse-following image trails that show a random series of images.
+ more
Smooth Scrolling Image Effects
by Manoela Ilic
A small set of ideas on animating images and other elements while smooth scrolling a page.
+ more
Draggable Menu with Image Grid Previews
by Manoela Ilic
A draggable inline menu with a scattered thumbnail preview of an image grid.
+ more
Draggable Image Strip
by Manoela Ilic
A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.
+ 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
Crossroads Slideshow
by Manoela Ilic
An experimental slideshow with an inclined look, three slide previews and a content view on click.
+ more
Exploding 3D Objects with Three.js
by Yuri Artiukh
A set of WebGL demos that show an exploding 3D object animation inspired by “Kubrick Life Website: 3D Motion”.
+ 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