<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 ----------> <svg class="svg-defs"> <defs> <clipPath id="clipping"> <rect id="rectangle" x="0" y="190" width="380" height="1" /> </clipPath> </defs> </svg> <div id="wrapper"> <svg width="380px" height="380px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> <image xlink:href="https://s3.amazonaws.com/codepen-images/oldstyle_380.jpg" x="0" y="0" height="380px" width="380px"/> </svg> </div> <div id="btn" class="btn btn-default">restart</div> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> <script> function animate() { TweenMax.set("#rectangle", {attr: { y:190, height:0 }}); TweenMax.to("#rectangle", 1, { delay: 0.25, attr: { height: 380, y:0 } } ); /* TweenMax.from("#wrapper", 2.00, { autoAlpha: 0 }); */ } animate(); document.getElementById("btn").addEventListener("click", animate); </script>

.svg-defs { position: absolute; width: 380px; height: 380px; } #wrapper image { clip-path: url(#clipping); } #btn { position: abosolute; top: 390px; width: 80px; padding: 5px; border: 1px gray solid; text-align: center; cursor: pointer; }