<section class="wrapper">
	<img class="kick" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/kick.png" alt="kick" />
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/ball.png" alt="ball" class="ball" />
</section>

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

.wrapper {
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	position: relative;
	color: #444;
}

.kick {
	position: absolute;
	top: 150px;
	left: 10%;
	width: 100%;
}

.ball {
	height: 120px;
	width: 120px;
	position: absolute;
	top: 100px;
	left: 5%;
}

@media (min-width: 700px) {
	.wrapper {
		max-width: 600px;
		border: 2px solid black;
		border-radius: 20px;
	}
	.kick {
		width: 80%;
	}
	.ball {
		width: 200px;
		height: 200px;
	}
}

//calculate distance the ball moves horizontally
//after being kicked
function calculateXPos(ballW, containerW) {
	return containerW - ballW;
}

/*To make sure the animation starts after both images are 
loaded, I use the imagesloaded plugin by David DeSandro 
https://github.com/desandro/imagesloaded*/
var container = document.querySelector('.wrapper'),
		ballImg = document.querySelector('.ball'),
containerWidth = container.offsetWidth,
	ballWidth = ballImg.offsetWidth;

imagesLoaded(document, function() {
	var kickBall = anime({
		targets: '.kick',
		scale: 1.2,
		duration: 300,
		easing: 'easeInCubic',
		complete: function() {
			anime({
				targets: '.ball',
				translateX: calculateXPos(ballWidth, containerWidth),
				scale: 1.5,
				easing: 'easeOutBounce',
				delay: 150
			});
		}
	});
}); //end imagesloaded