<div class="avatar-container">
        <div class="avatar"><img src="https://s-media-cache-ak0.pinimg.com/236x/3c/41/74/3c41748bb2526f33c5ff6aa3adcd0b20.jpg"></div> 
        <div class="pulse" id="pulse1"></div>        
        <div class="pulse" id="pulse2"></div>        
        <div class="pulse" id="pulse3"></div>        
        <div class="pulse" id="pulse4"></div>        
    </div>
    <div class="name">Kurt Bunker</div>
    <div class="info">click on the avatar to pulse</div>

body{
	background: #2e2e30;
}
*{
	box-sizing: border-box;
}
@import url(https://fonts.googleapis.com/css?family=Quicksand:700);

.avatar-container{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 150px;
	transform: translate(-75px, -75px);
}
.avatar{
	/*background-image: url("https://s-media-cache-ak0.pinimg.com/236x/3c/41/74/3c41748bb2526f33c5ff6aa3adcd0b20.jpg");	*/
	overflow: hidden;
	border-radius: 50%;
	border: solid 3px rgba(0,150,136,0.3);
	width: 150px;
	height: 150px;
	background-size: cover;	
	z-index: 2;
	position: absolute;
	cursor: pointer;
	img{
		width: 100%;
		height: 100%;
	}
}
.pulse{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: rgba(0,150,136,0.2);
	position: absolute;
	top: 0;
	left: 0;
	border: solid 2px #00796B;
	z-index: 1;
}
.name{
	position: fixed;
	top: calc(50% + 130px);
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	text-transform: uppercase;
	color: white;
	background: rgba(0,150,136,0.2);
	border: solid 2px #00796B;
	padding: 5px 10px;
	font-family: 'Quicksand', sans-serif;
	opacity: 0;
}
.info{
	color: white;
	text-transform: uppercase;
	font-family: 'Quicksand', sans-serif;
	position: fixed;
	right: 10px;
	bottom: 10px;
	font-size: 10px;
	opacity: 0.5;
}

jQuery(document).ready(function($) {
	var body= $("body"),
		pulseElements = $(".pulse"),
		avatar = $(".avatar-container"),
		name = $('.name');
		tlClick = new TimelineLite(),
		tlOpening = new TimelineLite();
		TweenMax.set(name, {scale: 0.7});
		TweenMax.set(pulseElements, {autoAlpha: '0.8'});

	tlClick.pause();


		tlOpening
			.set(body, {className: '+=is-animating'})
			.set(avatar, {autoAlpha: 0,rotationX:-90, y: '-=50px', scale: 0.4})
			.to(avatar, 1.8, {autoAlpha: 1, rotationX: 0, y: '+=50px' , scale: 1, ease: Power4.easeInOut})
			.staggerTo(pulseElements, 6,  {scale: '1.5', autoAlpha: '0', ease: Power1.easeOut, clearProps: 'all'}, 0.8, '-=0.5')
			.to(name, 3, {autoAlpha: 0.5, scale: 0.8, y: 10, ease: Power0.easeNone}, '0.6')
			.to(name, 3, {autoAlpha: 0, scale: 0.9, y: 20, ease: Power0.easeNone, clearProps: 'all'}, '3.6')
			.set(body, {className: '-=is-animating'});

	// TIMELINE CLICK
	tlClick
		.set(body, {className: '+=is-animating'})
		.set(name, {scale: 0.7})
		.set(pulseElements, {autoAlpha: '0.8'})
		.to(avatar, 0.3, {scale: '0.85'})
		.to(avatar, 0.6, { scale:'1', ease: Bounce.easeOut})
		.staggerTo(pulseElements, 6,  {scale: '1.5', autoAlpha: '0', ease: Power1.easeOut}, 0.8, '-=0.5')
		.to(name, 3, {autoAlpha: 0.5, scale: 0.8, y: 10, ease: Power0.easeNone}, '0.6')
		.to(name, 3, {autoAlpha: 0, scale: 0.9, y: 20, ease: Power0.easeNone}, '3.6')
		.set(body, {className: '-=is-animating'});


	avatar.on("click", function(){
		if(!body.hasClass('is-animating')){
			tlClick.play(0);
		}
	})
});