On-Scroll SVG Filter Effect

Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.

The other day I stumbled across this demo by Fabio Ottaviani and I was wondering how this animation could work on scroll.

The idea of the demo is to animate a mask shape that has a SVG turbulence filter applied to it. Magically, this results in an apparent animation of the the whole distortion around the image, allowing for some unique and interesting looks.

So here it is, a little demo that explores different filter settings in combination with using GSAP’s ScrollTrigger to bind the effect to the scroll position. We also use the Flip plugin to animate the split title to another place in the content while doing this.

We can also use custom paths for this:

Adjusting the filter values, leads to interesting results:

Totally different look when we tinker with the parameters:

This is how it all comes together:

Really hope you like it! Thanks for checking by!

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

Browse amazing websites

💎✨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.