Here is another different way to create liquid buttons effect. In this HTML, CSS and JavaScript tutorial I will show you to get complete granular control of inline SVG turbulence filter, we will learn how to animate it’s vertical frequency attribute and how to create our own custom animation timeline. All from scratch, no frameworks and no libraries. Let’s learn how to animate SVG filters with JavaScript today.

In this quick tutorial I will take you step by step through my though process, we will encounter couple of problems to solve and I will show you how exactly I chose to approach them to achieve this effect. It is all quite beginner friendly so if you know HTML, CSS and very basics of JavaScript you should be able to follow. I will explain everything I am doing and why I am doing it in detail as I always do to help you learn and grow as a frontend web developer, which is the main goal of this channel.

To gain complete control over animation when creating some of the more interesting complex effects most people use tools like Tweenmax in Greensock library. I’m sure you know that anything that can be done with a library can be also done without it. The advantage on not using a library is that you learn how things actually work under the hood and you become a better developer because you have deeper understanding of fundamental web development tools and techniques. At the end of this video you will be able to understand SVG filters feTurbulence and feDisplacementMap, I will talk about their main important attributes and I will show you how to grab these attributes with JavaScript and how to manipulate them in any way you want. This will open a lot of creative opportunities for us, I want to see what you can do with it.

https://youtu.be/qtc_tevOYZ4

2 responses to “How to animate SVG filters”

  1. Julie says:

    Hello,
    Your tutorials are wonderful. Would you please put me out of my misery and let my know how to add a reset button to the flappy bird game. I’m sure it is super easy, however I have spent 5 hours trying to no avail. I watched how the frogger game was reset but don’t understand how to apply that reset methodology to reset flappy bird.
    Thank you for the videos.

  2. Juli says:

    Hello, would you please show how to add a reset button to the flappy bird game.

Leave a Reply

Your email address will not be published. Required fields are marked *