Codrops - Distorted Button Effects with SVG Filters

Design help Custom code
1

I’m trying to implement a ’Distorted Button Effects with SVG Filters’ that I found on codrops. Feels like I’m almost all the way, but something isn’t entirely right. I get the function to work, but it’s static instead of animated.

Can anyone point out to me what I’m doing wrong?

Here is the project on Codrops

Read-only link to my project (The button is in the footer)

2

The CSS filter (and the SVG) seems to be working. So I guess the problem most be in the javascript. I guess that the ‘bt.addEventListener’ isn’t running as it should, but I don’t really now why. Does anyone have any ideas?

<script>
var bt = document.querySelectorAll('.button')[0];
var turbVal = { val: 0.000001 };
var turb = document.querySelectorAll('#filter feTurbulence')[0];
var btTl = new TimelineLite({ paused: true, onUpdate: function() {
  turb.setAttribute('baseFrequency', '0 ' + turbVal.val);
} });

btTl.to(turbVal, 0.2, { val: 0.3 });
btTl.to(turbVal, 0.2, { val: 0.000001 });

bt.addEventListener('mouseover', function() {
btTl.restart();
});
</script>
3

This link is not valid and you did not share a link to the published project so we cant review it in a browser.