diff --git a/demo/index.html b/demo/index.html
index bbdb7c2..87e3270 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -127,7 +127,48 @@ <h1 class="docs">Porthole Demos</h1>
 <div data-xrayhtml data-title="Sample Scroll Activate">
 	<div data-scroll-activate data-scroll-deactivate></div>
 </div>
+
+
+
+<p class="docs">The following blocks have data-scroll-activetolerance attributes with a value of 300, causing them to activate when they are above 300px from the bottom of the viewport. This is good for animations. A negative value causes elements to activate before they reach the bottom of the viewport, which is good for lazy-loading images.</p>
+
+<div data-xrayhtml data-title="Sample Scroll Activate">
+	<div data-scroll-activate data-scroll-activetolerance="300"></div>
+</div>
+
+
+<div data-xrayhtml data-title="Sample Scroll Activate">
+	<div data-scroll-activate data-scroll-activetolerance="300"></div>
+</div>
+
+
+<div data-xrayhtml data-title="Sample Scroll Activate">
+	<div data-scroll-activate data-scroll-activetolerance="300"></div>
+</div>
+
+
+<div data-xrayhtml data-title="Sample Scroll Activate">
+	<div data-scroll-activate data-scroll-activetolerance="300"></div>
+</div>
+
+<div data-xrayhtml data-title="Sample Scroll Activate">
+	<div data-scroll-activate data-scroll-activetolerance="300"></div>
+</div>
+
+<div data-xrayhtml data-title="Sample Scroll Activate">
+	<div data-scroll-activate data-scroll-activetolerance="300"></div>
+</div>
+
+<div data-xrayhtml data-title="Sample Scroll Activate">
+	<div data-scroll-activate data-scroll-activetolerance="300"></div>
+</div>
+
+<div data-xrayhtml data-title="Sample Scroll Activate">
+	<div data-scroll-activate data-scroll-activetolerance="300"></div>
+</div>
 	</div>
 
+
+
 </body>
 </html>
diff --git a/dist/porthole.init.js b/dist/porthole.init.js
index 57826db..78b2fae 100644
--- a/dist/porthole.init.js
+++ b/dist/porthole.init.js
@@ -1,6 +1,6 @@
-/*! porthole - v1.0.4 - 2015-09-22
+/*! porthole - v0.1.0 - 2016-05-20
 * https://github.com/filamentgroup/porthole
-* Copyright (c) 2015 Filament Group; Licensed MIT */
+* Copyright (c) 2016 Filament Group; Licensed MIT */
 ;(function( $ ) {
 
 	var selector = "[data-scroll-activate]";
diff --git a/dist/porthole.js b/dist/porthole.js
index 2fa9665..ba6af45 100644
--- a/dist/porthole.js
+++ b/dist/porthole.js
@@ -1,15 +1,17 @@
-/*! porthole - v1.0.4 - 2015-09-22
+/*! porthole - v0.1.0 - 2016-05-20
 * https://github.com/filamentgroup/porthole
-* Copyright (c) 2015 Filament Group; Licensed MIT */
+* Copyright (c) 2016 Filament Group; Licensed MIT */
 (function($){
 
 	var queue = [];
 	var listening;
 	var deActivateSelector = "[data-scroll-deactivate]";
+	var toleranceSelector = "data-scroll-activetolerance";
 	var activeClass = "inviewport";
 	var viewportSize;
 	var options = {
-		removeClass: false //remove class when out of viewport? default false
+		removeClass: false, //remove class when out of viewport? default false
+		activeTolerance: 0 // adjust the active window that is considered to be "in the viewport". Positive values make the window larger (good for prefetching images). Negative Values make it smaller (good for cueing animations)
 	};
 
 	// polyfill raf if needed
@@ -43,9 +45,23 @@
 			var isActive = $( this ).is( "." + activeClass );
 			var thisTop = this.getBoundingClientRect().top;
 			var thisBottom = thisTop + this.offsetHeight;
+			var tolerance = 0;
+			var toleranceAttr = $( this ).attr( toleranceSelector );
+			if( toleranceAttr ){
+				var tolVal = parseFloat( toleranceAttr );
+				if( !isNaN( tolVal ) ){
+					tolerance = tolVal;
+				}
+			}
 			var thisOptions = $.extend( options, {
-				removeClass: $( this ).is( deActivateSelector ) || false
+				removeClass: $( this ).is( deActivateSelector ) || false,
+				activeTolerance: tolerance
 			});
+
+			if( thisOptions.activeTolerance !== 0 ){
+				thisTop += thisOptions.activeTolerance;
+			}
+
 			if( thisTop  >= 0 && thisTop <= viewportHeight ||
 				thisTop <= 0 && thisBottom >= viewportHeight ||
 				thisBottom >= 0 && thisBottom  <= viewportHeight ){
@@ -81,4 +97,4 @@
 	};
 
 
-}(jQuery));
\ No newline at end of file
+}(jQuery));
diff --git a/src/porthole.js b/src/porthole.js
index aaa5e47..c809dc6 100644
--- a/src/porthole.js
+++ b/src/porthole.js
@@ -8,10 +8,12 @@
 	var queue = [];
 	var listening;
 	var deActivateSelector = "[data-scroll-deactivate]";
+	var toleranceSelector = "data-scroll-activetolerance";
 	var activeClass = "inviewport";
 	var viewportSize;
 	var options = {
-		removeClass: false //remove class when out of viewport? default false
+		removeClass: false, //remove class when out of viewport? default false
+		activeTolerance: 0 // adjust the active window that is considered to be "in the viewport". Positive values make the window larger (good for prefetching images). Negative Values make it smaller (good for cueing animations)
 	};
 
 	// polyfill raf if needed
@@ -45,9 +47,23 @@
 			var isActive = $( this ).is( "." + activeClass );
 			var thisTop = this.getBoundingClientRect().top;
 			var thisBottom = thisTop + this.offsetHeight;
+			var tolerance = 0;
+			var toleranceAttr = $( this ).attr( toleranceSelector );
+			if( toleranceAttr ){
+				var tolVal = parseFloat( toleranceAttr );
+				if( !isNaN( tolVal ) ){
+					tolerance = tolVal;
+				}
+			}
 			var thisOptions = $.extend( options, {
-				removeClass: $( this ).is( deActivateSelector ) || false
+				removeClass: $( this ).is( deActivateSelector ) || false,
+				activeTolerance: tolerance
 			});
+
+			if( thisOptions.activeTolerance !== 0 ){
+				thisTop += thisOptions.activeTolerance;
+			}
+
 			if( thisTop  >= 0 && thisTop <= viewportHeight ||
 				thisTop <= 0 && thisBottom >= viewportHeight ||
 				thisBottom >= 0 && thisBottom  <= viewportHeight ){
@@ -83,4 +99,4 @@
 	};
 
 
-}(jQuery));
\ No newline at end of file
+}(jQuery));