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 in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!