<svg id="image-mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1100 700">
  <defs>
    <clipPath id="clip-path">
      <circle id="circle" cx="185.37" cy="22" r="879" fill="none"/>
    </clipPath>
  </defs>
  <title>inline-masked-image-test</title>
  <rect id="rect" y="39.52" width="1100" height="630.48" fill="#f0ba36"/>
  <g clip-path="url(#clip-path)">
    <g id="EQ1dHX">
      <image id="EQ1dHX-2" data-name="EQ1dHX" width="1100" height="700" xlink:href="http://unsplash.it/1100/700"/>
    </g>
  </g>
</svg>
<button>play again!</button>
body {
    		background-color: #111;
    	}
    	svg {
    		position: absolute;
    		top:50%;
    		left:50%;
    		-webkit-transform: translate(-50%, -50%);
    		-moz-transform: translate(-50%, -50%);
    		transform: translate(-50%, -50%);
    		max-width: 1200px;
    	}
TweenLite.defaultEase = Expo.easeOut;

$rect 			  = $('#rect');
$circle 			= $('#circle');
$img 			    = $('#EQ1dHX-2');

TweenMax.set($circle, {scale:0,x:'-=100%'});
TweenMax.set($img, 	  {x:'-=100%'});
TweenMax.set($rect, 	{x:'-=110%', fill:'#ffffff'});

var $tl_scene = new TimelineMax({
  // repeat:-1,
  // yoyo: true,
});

$tl_scene
  .to($circle,  3, {scale:1,x:'+=100%'}, 'show')
  .to($img,     3, {x:'+=100%'}, 'show')
  .to($rect,    3, {x:'+=110%'}, 'show')
;

$('button').click(function(){
  $tl_scene.play(0);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js