<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="overlay"> <img src="https://picsum.photos/seed/picsum/200/300" class="pic"> </div> <svg> <filter id="noise" x="0%" y="0%" width="100%" height="100%"> <feTurbulence baseFrequency="0.02 0.03" result="NOISE" numOctaves="1" id="turbulence"></feTurbulence> <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20"></feDisplacementMap> </filter> </svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"> </script> <script>

svg{ position: absolute } img{ filter: url(#noise); width: 500px; opacity: 0; transition: all 1s ease; }

let el = document.getElementById('turbulence'); tl = new TimelineMax({ paused: true }); tl.from('h1', 1, { opacity: 0, y: 50 }) tl.staggerFrom('.pic', 1, { opacity: 0, ease: Power4.easeOut }, 0.6) tl.to(el, 5, { attr: { baseFrequency: '0 0' } }, 1) tl.play(); myFunction() function myFunction() { setTimeout(function () { document.querySelector('img').style.opacity = '1' }, 3000); }