<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 ----------> <button id="action" class="btn btn-primary">Click</button> <div class="stage"> <div id="background"></div> <svg id="demo" xmlns="http://www.w3.org/2000/svg" width="2000" height="2000" viewBox="0 0 1000 1000"> <defs> <clipPath id="theClipPath"> <rect id="clipper" x="0" y="0" width="1000" height="1000" fill="#333" /> </clipPath> </defs> <g id="clipPathReveal" clip-path="url(#theClipPath)"> <image xlink:href="https://cdn.pixabay.com/photo/2021/11/18/22/17/butterfly-6807529_640.jpg" x="0" y="0" width="100%" height="100%" /> </g> </svg> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> <script> console.clear(); var tl = new TimelineMax(); TweenMax.set(".stage", { opacity: 1 }); tl.from("#background", 1, { xPercent: -100 }); tl.from("#clipper", 1, { width: 0 }, 0.5); tl.reversed(true); document.querySelector("#action").addEventListener("click", doCoolStuff); function doCoolStuff() { tl.reversed(!tl.reversed()); } </script>

* { box-sizing: border-box; } body { height: 100vh; width: 100%; padding: 0; margin: 0; overflow: hidden; background: #000; color: white; font-family: "Roboto", sans-serif; } .stage { display: flex; align-content: center; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; position: relative; z-index: 1; opacity: 0; } #demo { width: auto; height: auto; max-height: 80%; max-width: 80%; posiion: relative; z-index: 20; } #action { padding: 10px; font-size: 0.875em; margin: 10px; cursor: pointer; font-weight: 700; font-family: "Roboto", sans-serif; position: absolute; z-index: 10; } #background { width: 50%; height: 100vh; position: absolute; top: 0; left: 0; background: #02be6e; }