YarGnawh/final.html

## final.html
<!DOCTYPE html>
<html>

<head>
   <title>Puppet</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TimelineMax.min.js"></script>
   <style>
       .window {
           position: relative;
           width: 1024px;
           height: 432px;
           margin: 20px auto;
           overflow: hidden;
       }
       .background {
           position: absolute;
           top: 0;
           left: 0;
           width: 100000px;
           height: 432px;
           background-image: url('https://github.com/Kageetai/mario-background-parallax/raw/master/img/back.png');
           background-repeat: repeat-x;
       }
       .bushes {
           position: absolute;
           top: 329px;
           left: 0;
           width: 100000px;
           height: 79px;
           background-image: url('https://github.com/Kageetai/mario-background-parallax/raw/master/img/bushes.png');
           background-repeat: repeat-x;
       }
       .ground {
           position: absolute;
           top: 408px;
           left: 0;
           width: 100000px;
           height: 24px;
           background-image: url('https://github.com/Kageetai/mario-background-parallax/raw/master/img/ground.png');
           background-repeat: repeat-x;
       }
       .mario {
           position: absolute;
           top: 353px;
           left: 0;
           width: 50px;
           height: 58px;
           background-image: url('https://raw.githubusercontent.com/Kageetai/mario-background-parallax/master/img/mario.gif');
           background-repeat: no-repeat;
       }
       .koopa {
           position: absolute;
           top: 355px;
           left: 970px;
           width: 50px;
           height: 58px;
           background-image: url('http://themushroomkingdom.net/images/ani/ani_smwkoopatroopagreen.gif');
           background-repeat: no-repeat;
           background-size: 32px 54px;
       }
   </style>
</head>

<body>
    <div class="window">
        <div class="background"></div>
        <div class="bushes"></div>
        <div class="ground"></div>
        <div class="mario"></div>
        <div class="koopa"></div>
    </div>

   <script>
        var background = document.querySelector('.background');
        var bushes = document.querySelector('.bushes');
        var ground = document.querySelector('.ground');
        var mario = document.querySelector('.mario');
        var koopa = document.querySelector('.koopa');

        // background scroll
        var backgroundTimeline = new TimelineMax();
        backgroundTimeline.to(background, 7000, { x: '-=100000' })

        // bushes scroll
        // animate the bushes, to x -= 100000 and a duration of 6000 seconds
        var bushesTimeline = new TimelineMax();
        // code below

        // continue your animation timeline

        // animate the ground, create a ground timeline
        // animate to x -= 100000 and a duration of 5000 seconds

        // have mario run forward and jump over the koopa

   </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Puppet</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TimelineMax.min.js"></script>
	<style>
	.window {
	position: relative;
	width: 1024px;
	height: 432px;
	margin: 20px auto;
	overflow: hidden;
	}
	.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100000px;
	height: 432px;
	background-image: url('https://github.com/Kageetai/mario-background-parallax/raw/master/img/back.png');
	background-repeat: repeat-x;
	}
	.bushes {
	position: absolute;
	top: 329px;
	left: 0;
	width: 100000px;
	height: 79px;
	background-image: url('https://github.com/Kageetai/mario-background-parallax/raw/master/img/bushes.png');
	background-repeat: repeat-x;
	}
	.ground {
	position: absolute;
	top: 408px;
	left: 0;
	width: 100000px;
	height: 24px;
	background-image: url('https://github.com/Kageetai/mario-background-parallax/raw/master/img/ground.png');
	background-repeat: repeat-x;
	}
	.mario {
	position: absolute;
	top: 353px;
	left: 0;
	width: 50px;
	height: 58px;
	background-image: url('https://raw.githubusercontent.com/Kageetai/mario-background-parallax/master/img/mario.gif');
	background-repeat: no-repeat;
	}
	.koopa {
	position: absolute;
	top: 355px;
	left: 970px;
	width: 50px;
	height: 58px;
	background-image: url('http://themushroomkingdom.net/images/ani/ani_smwkoopatroopagreen.gif');
	background-repeat: no-repeat;
	background-size: 32px 54px;
	}
	</style>
	</head>

	<body>
	<div class="window">
	<div class="background"></div>
	<div class="bushes"></div>
	<div class="ground"></div>
	<div class="mario"></div>
	<div class="koopa"></div>
	</div>

	<script>
	var background = document.querySelector('.background');
	var bushes = document.querySelector('.bushes');
	var ground = document.querySelector('.ground');
	var mario = document.querySelector('.mario');
	var koopa = document.querySelector('.koopa');

	// background scroll
	var backgroundTimeline = new TimelineMax();
	backgroundTimeline.to(background, 7000, { x: '-=100000' })

	// bushes scroll
	// animate the bushes, to x -= 100000 and a duration of 6000 seconds
	var bushesTimeline = new TimelineMax();
	// code below

	// continue your animation timeline

	// animate the ground, create a ground timeline
	// animate to x -= 100000 and a duration of 5000 seconds

	// have mario run forward and jump over the koopa

	</script>
	</body>

	</html>