<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>
<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>
