<div class="demo">
	<div class="shadow"></div>
	<div class="hole"></div>
	
	<div class="hermanWrapper">
		<img class="herman" src="https://assets.codepen.io/32887/herman.svg" alt="" />
	</div>
	
	
</div>

body,
html {
	width: 100%;
	height: 100%;
}
* {
	position:relative;
}

body {
	margin: 0;
	background: #20253f;
	display: flex;
	align-items: center;
	justify-content: center;

}
.demo {
	border:1px solid grey;
	
	height: 375px;
	width:375px;
	background:#d6deff;
}

.herman {
	position:absolute;
	width:100px;
	bottom:0;
	left:50%;
	transform:translate(-50%);
}

.hermanWrapper {
	width:100%;
	height:305px;
	/* border:1px solid red;   */
	overflow:hidden;
	border-radius:50%;
}

.shadow {
	opacity:0;
	position:absolute;
	width:150px;
	height:20px;
	left:50%;
	transform:translate(-50%);
	top:290px;
	background: radial-gradient(rgb(100, 100, 100, 0.6),  rgb(0, 0, 0, 0) 75%);
  	background-repeat: no-repeat;

}

.hole {
	position:absolute;
	width:150px;
	height:20px;
	border-radius:50%;
	background:black;
	left:50%;
	transform:translate(-50%);
	top:290px;
}

const tl = gsap.timeline({repeat:1, yoyo:true, repeatDelay:0.3})

tl.from(".hole", {scale:0, repeat:1, yoyo:true})
  .fromTo(".herman", {y:160, scaleY:2}, {y:-175, scaleY:1}, "<0.2")
  .to(".herman", {y:-4, ease:"power1.in"}, ">")
  .to(".herman", {scaleY:0.8, scaleX:1.3, transformOrigin:"50% 100%", yoyo:true, repeat:1, duration:0.2, yoyoEase:"back"})


.to(".shadow", {opacity:1, duration:0.2}, 0.7)
.to(".shadow", {scaleX:0.7, ease:"power1.in"}, 0.7)

GSDevTools.create()