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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.