How to Create a Gooey Search Interaction with Framer Motion and React
In Tutorials, by Oguzhan Tufenk
A ready-to-use search bar made with Framer Motion, featuring an interesting gooey effect.
filter
Scroll-based SVG Filter Animations on Text
In Playground, by Manoela Ilic
A small set of scroll-based SVG filter animations on HTML text.
Hover Motion Intro Animation
In Playground, by Manoela Ilic
A little hover motion effect on a grid and an intro animation.
On-Scroll SVG Filter Effect
In Playground, by Manoela Ilic
Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.
Gooey Cursor Effect
In Playground, by Manoela Ilic
A fun gooey cursor background effect with SVG filters and CSS blend modes.
Double Image Hover Effects with Clip-Path Animations
In Playground, by Manoela Ilic
Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way.
Custom SVG Cursors with an Interactive Emitter Effect
In Playground, by Marlène Bruhat
Several interactive cursor effects made with JavaScript and SVG.
Lines to Content Layout Animation
In Playground, by Manoela Ilic
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
Hover Preview Effect with Mini Map
In Playground, by Manoela Ilic
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
Slideshow with Filter Reveal Effect
In Playground, by Manoela Ilic
A slideshow page layout with a filter enhanced navigation effect.
Superhero Animation Effect with SVG Filters
In Tutorials, by Abner Nascimento
Learn how to create an interactive superhero-like illustration effect for the web using SVG filters and masks.
Thumbnail Hover Effect with SVG Filters
In Playground, by Manoela Ilic
A simple thumbnail hover effect with an SVG filter distortion.
Exploring Animations for Menu Hover Effects
In Playground, by Manoela Ilic
A couple of ideas for creative menu hover animations with images.
Animated Custom Cursor Effects
In Playground, by Manoela Ilic
Some ideas for interactive custom cursor animations using SVG filters.
Ideas for Distorted Link Effects on Menus
In Playground, by Manoela Ilic
Some examples of how to use decorative distortion effects on big typography menu links.
Distorted Link Effects with SVG Filters
In Playground, by Manoela Ilic
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
Animating SVG Text on a Path
In Playground, 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.
Image Dragging Effects
In Playground, by Manoela Ilic
A set of playful dragging effects for images using various techniques.
