On-Scroll SVG Filter Effect

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!