diff --git a/demo/css/demo.css b/demo/css/demo.css
index fbdbe75..d213887 100644
--- a/demo/css/demo.css
+++ b/demo/css/demo.css
@@ -19,7 +19,6 @@ body, p, h1, h2, h3 {
 }
 
 p, h1, h2 {
-	line-height: 1.3;
 	text-shadow: 0 0 5px rgba(0, 0, 0, .6);
 	width: 100%;
 }
@@ -28,11 +27,12 @@ h1, h2 {
 	font-size: 40px;
 	font-size: 2.5rem;
 	font-weight: 700;
-	margin-top: -5px;
+	line-height: 1;
 }
 
 h1 {
-	margin-bottom: 5px;
+	margin-bottom: 10px;
+	margin-top: -2px;
 }
 
 h2 {
@@ -42,6 +42,9 @@ h2 {
 p {
 	font-size: 20px;
 	font-size: 1.25rem;
+	letter-spacing: 0;
+	letter-spacing: .02rem;
+	line-height: 1.3;
 	margin-bottom: 20px;
 }
 p:last-child {
@@ -51,6 +54,10 @@ p.p--credits {
 	font-size: 14px;
 	font-size: .9rem;
 }
+p strong {
+	display: inline-block;
+	margin-bottom: 2px;
+}
 
 a {
 	color: #fff;
@@ -132,6 +139,52 @@ a.a--no-weight {
 	display: none;
 }
 
+.arrow {
+	-webkit-animation: bounce 3s infinite;
+	animation: bounce 3s infinite;
+	bottom: -64px;
+	bottom: -4rem;
+	left: calc(50% - 19px);
+	position: absolute;
+	-webkit-transform: translateX(-50%);
+	-ms-transform: translateX(-50%);
+	transform: translateX(-50%);
+	transition: opacity 250ms ease-in-out;
+	width: 38px;
+}
+.arrow--hide {
+	opacity: 0;
+}
+
+@-webkit-keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+	}
+	40% {
+		-webkit-transform: translateY(-15px);
+		transform: translateY(-15px);
+	}
+	60% {
+		-webkit-transform: translateY(-5px);
+		transform: translateY(-5px);
+	}
+}
+
+@keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+	}
+	40% {
+		-webkit-transform: translateY(-15px);
+		transform: translateY(-15px);
+	}
+	60% {
+		-webkit-transform: translateY(-5px);
+		transform: translateY(-5px);
+	}
+}
 @media screen and (max-width: 480px) {
 	.hide-on-mobile {
 		display: none;
diff --git a/demo/css/demo.min.css b/demo/css/demo.min.css
index 574f999..1b5e782 100644
--- a/demo/css/demo.min.css
+++ b/demo/css/demo.min.css
@@ -1 +1 @@
-*,:after,:before{box-sizing:border-box}body,html{height:100%;width:100%}body{font-family:'Source Sans Pro',helvetica,arial;font-size:18px;font-weight:300}body,h1,h2,h3,p{margin:0;padding:0}h1,h2,p{line-height:1.3;text-shadow:0 0 5px rgba(0,0,0,.6);width:100%}h1,h2{font-size:40px;font-size:2.5rem;font-weight:700;margin-top:-5px}h1{margin-bottom:5px}h2{margin-bottom:20px}p{font-size:20px;font-size:1.25rem;margin-bottom:20px}p:last-child{margin-bottom:0}p.p--credits{font-size:14px;font-size:.9rem}a{color:#fff;font-weight:700;text-decoration:none}a.a--no-weight{font-style:italic;font-weight:300}.container{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:15px;position:relative;width:100%}.container--big{height:175vh}.container--full{height:100vh}.container--small{height:40vh}.container .content{background:rgba(0,0,0,.75);border-radius:8px;color:#fff;margin:0 auto;padding:30px 35px;text-align:center}.parallax__container{clip:rect(0,auto,auto,0);height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:-100}.parallax__container .parallax{background-position:center;background-repeat:no-repeat;background-size:cover;position:fixed;top:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}.bg1{background-image:url(../img/bg1.jpg)}#bg3{background-image:url(../img/bg3.jpg)}.show-on-mobile--inline{display:none}@media screen and (max-width:480px){.hide-on-mobile{display:none}.show-on-mobile--inline{display:inline}}
\ No newline at end of file
+*,:after,:before{box-sizing:border-box}body,html{height:100%;width:100%}body{font-family:'Source Sans Pro',helvetica,arial;font-size:18px;font-weight:300}body,h1,h2,h3,p{margin:0;padding:0}h1,h2,p{text-shadow:0 0 5px rgba(0,0,0,.6);width:100%}h1,h2{font-size:40px;font-size:2.5rem;font-weight:700;line-height:1}h1{margin-bottom:10px;margin-top:-2px}h2{margin-bottom:20px}p{font-size:20px;font-size:1.25rem;letter-spacing:0;letter-spacing:.02rem;line-height:1.3;margin-bottom:20px}p:last-child{margin-bottom:0}p.p--credits{font-size:14px;font-size:.9rem}p strong{display:inline-block;margin-bottom:2px}a{color:#fff;font-weight:700;text-decoration:none}a.a--no-weight{font-style:italic;font-weight:300}.container{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:15px;position:relative;width:100%}.container--big{height:175vh}.container--full{height:100vh}.container--small{height:40vh}.container .content{background:rgba(0,0,0,.75);border-radius:8px;color:#fff;margin:0 auto;padding:30px 35px;text-align:center}.parallax__container{clip:rect(0,auto,auto,0);height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:-100}.parallax__container .parallax{background-position:center;background-repeat:no-repeat;background-size:cover;position:fixed;top:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}.bg1{background-image:url(../img/bg1.jpg)}#bg3{background-image:url(../img/bg3.jpg)}.show-on-mobile--inline{display:none}.arrow{-webkit-animation:bounce 3s infinite;animation:bounce 3s infinite;bottom:-64px;bottom:-4rem;left:calc(50% - 19px);position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);transition:opacity 250ms ease-in-out;width:38px}.arrow--hide{opacity:0}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@media screen and (max-width:480px){.hide-on-mobile{display:none}.show-on-mobile--inline{display:inline}}
\ No newline at end of file
diff --git a/demo/img/arrow-down.png b/demo/img/arrow-down.png
new file mode 100644
index 0000000..93c085b
Binary files /dev/null and b/demo/img/arrow-down.png differ
diff --git a/demo/index.html b/demo/index.html
index fda1293..492a310 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -13,7 +13,8 @@
 <body>
 
 	<section class="container container--full">
-		<div class="content">
+		<div class="content" style="position:relative;">
+			<div class="arrow" id="arrow"><img src="img/arrow-down.png"></div>
 			<h1>Universal Parallax</h1>
 			<p>A vanilla javascript plugin</p>
 		</div>
@@ -21,14 +22,22 @@ <h1>Universal Parallax</h1>
 	</section>
 
 	<section class="container container--small">
-		<div class="content"><p>Adapts to height</p></div>
+		<div class="content">
+			<p>
+				<strong>Adapts to height</strong>
+				<br>
+				Displays 100% of BG regardless
+			</p>
+		</div>
 		<div class="parallax" data-parallax-image="img/bg2.jpg"></div>
 	</section>
 
 	<section class="container container--big">
 		<div class="content">
 			<p>
-				Container bigger than the screen height? <strong>No sweat</strong>
+				<strong>Container going off screen?</strong>
+				<br>
+				No sweat
 			</p>
 		</div>
 		<div class="parallax" id="bg3"></div>
@@ -38,18 +47,19 @@ <h1>Universal Parallax</h1>
 		<div class="content">
 			<h2>Universal Parallax</h2>
 			<p>
-				Scales to whatever height your container might be.
+				Automatically scales to the height of your container
 				<span class="hide-on-mobile"><br></span>
-				Check out <a href="https://www.npmjs.com/package/universal-parallax" target="_blank">npm</a> or <a href="https://github.com/marrio-h/universal-parallax" target="_blank">github</a> for docs and download.
+				Check out <a href="https://www.npmjs.com/package/universal-parallax" target="_blank">npm</a> or <a href="https://github.com/marrio-h/universal-parallax" target="_blank">github</a> for docs and download
 			</p>
 			<p>
-				Photo credits in order of appearance from <a href="https://unsplash.com/" target="_blank">unsplash.com</a><span class="show-on-mobile--inline">:</span>
+				Photo credits in order of appearance from <a href="https://unsplash.com/" target="_blank">unsplash</a>
+				<span class="show-on-mobile--inline">:</span>
 				<span class="hide-on-mobile"><br></span>
 				<a class="a--no-weight" href="https://unsplash.com/@dnevozhai" target="_blank">Denys Nevozhai</a>,
 				<a class="a--no-weight" href="https://unsplash.com/@rohittandon" target="_blank">Rohit Tandon</a>,
 				<span class="hide-on-mobile"><br></span>
 				<a class="a--no-weight" href="https://unsplash.com/@jim_dons" target="_blank">James Donaldson</a>,
-				<a class="a--no-weight" href="https://unsplash.com/@jampatcon" target="_blank">James Connolly</a>.
+				<a class="a--no-weight" href="https://unsplash.com/@jampatcon" target="_blank">James Connolly</a>
 			</p>
 			<p class="p--credits">Find me on git <a href="https://github.com/marrio-h" target="_blank">@marrio-h</a></p>
 
@@ -58,6 +68,7 @@ <h2>Universal Parallax</h2>
 	</section>
 
 	<script src="../dist/universal-parallax.min.js"></script>
+	<script src="js/demo.min.js"></script>
 	<script>
 		new universalParallax().init({
 			speed: 4
diff --git a/demo/js/demo.min.js b/demo/js/demo.min.js
new file mode 100644
index 0000000..93dbafe
--- /dev/null
+++ b/demo/js/demo.min.js
@@ -0,0 +1 @@
+"use strict";function bounceArrow(){var t=window.innerHeight,e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),n=/Mobi/.test(navigator.userAgent);e&&!n&&(window.outerHeight,window.innerHeight),n&&(t=window.screen.availHeight,window.screen.availHeight,window.innerHeight);var i=document.getElementById("arrow");window.addEventListener("scroll",function(){var e=i.parentElement.parentElement.getBoundingClientRect();0<=e.top+e.height&&e.top<=t&&(i.getBoundingClientRect().top<e.height/2?i.classList.add("arrow--hide"):i.classList.remove("arrow--hide"))})}bounceArrow();
\ No newline at end of file
diff --git a/dist/universal-parallax.js b/dist/universal-parallax.js
index 592ac8d..c311b9f 100644
--- a/dist/universal-parallax.js
+++ b/dist/universal-parallax.js
@@ -34,6 +34,7 @@ var animateParallax = function animateParallax(parallax, speed) {
 	for (var i = 0; parallax.length > i; i++) {
 		var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
 
+		// only animate if on screen
 		if (container.top + container.height >= 0 && container.top <= windowHeight) {
 			positionParallax(container, speed, parallax, i);
 		}
@@ -68,14 +69,14 @@ var universalParallax = function universalParallax() {
 
 		// recalculate height on resize
 		if (!mobile) {
-			window.addEventListener("resize", function () {
+			window.addEventListener('resize', function () {
 				windowHeight = window.innerHeight;
 				calculateHeight(parallax, speed);
 			});
 		}
 
 		// Add scroll event listener
-		window.addEventListener("scroll", function () {
+		window.addEventListener('scroll', function () {
 			animateParallax(parallax, speed);
 		});
 	};