Animation filtres SVG avec GSAP


💡 L'objectif de cette démonstration est de vous montrer comment animer des filtres SVG avec JavaScript, et plus précisément avec la librairie GSAP.

	

<div class=cadre>
<div class="mer"></div>
<svg height="0" width="0">
<filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feTurbulence id="feturbulence" type="fractalNoise" numOctaves="3" seed="2"></feTurbulence>
<feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
</filter>
</svg>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js'></script>


	
	
var timeline = new TimelineMax({
    repeat: -1,
    yoyo: true
  }),
  feTurb = document.querySelector('#feturbulence');

timeline.add(
  TweenMax.to(feTurb, 8, {
    onUpdate: function() {
      var bfX = this.progress() * 0.005 + 0.015, 
        bfY = this.progress() * 0.05 + 0.1, 
        bfStr = bfX.toString() + ' ' + bfY.toString(); 
      feTurb.setAttribute('baseFrequency', bfStr);
    }
  }), 0
);


	
	
.cadre{
position:relative;
overflow:hidden;
background-image: url("meme-image.jpg") ;
background-position: center bottom;
background-size: cover;

}	
	
.mer {
background-image: url("meme-image.jpg") ;
background-position: center bottom;
background-size: cover;
position: absolute;
bottom: 0;
width: 110%;
height:100%;
filter: url("#turbulence");

}



Inspiration🔗.