stormid · mjbp · Mar 3, 2025 · Feb 13, 2025
diff --git a/packages/scroll-points/.npmignore b/packages/scroll-points/.npmignore
@@ -1,6 +1,5 @@
 .DS_Store
 *.log
-src
 __tests__
 example
 coverage

diff --git a/packages/scroll-points/README.md b/packages/scroll-points/README.md
@@ -1,7 +1,7 @@
 
 # Scroll points
 
-Trigger className changes and callbacks based on element intersecting the viewport using IntersectionObservers. 
+Trigger className changes and callbacks based on scroll using IntersectionObservers. 
 
 ---
 
@@ -47,12 +47,13 @@ const [ instance ] = scrollPoints(elements);
 ## Options
 ```
 {
-	root: null, //element that is used as the viewport for checking visiblity of the target
+	root: null, //element that is used as the viewport for checking visiblity of the target, defaults to viewport if null
 	rootMargin: '0px 0px 0px 0px', //margin around the root, px or percentage values
 	threshold: 0, //Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed
-	callback: false, //function executed when scrolled into view
-	className: 'is--scrolled-in', //className added when scrolled into view
-	unload: true //only callback once
+	callback: false, //function executed when target is intersecting
+	className: 'is--scrolled-in', //className added when target is intersecting
+	unload: true //unload intersection observer after target has intersected once
+	replay: false //remove className when target is not intersecting
 };
 ```
 
@@ -62,7 +63,7 @@ npm t
 ```
 
 ## Browser support
-Depends on Object.assign and the [IntersectionObserver API](https://caniuse.com/#feat=intersectionobserver), IE11 will require polyfills.
+Depends on [IntersectionObserver API](https://caniuse.com/#feat=intersectionobserver).
 
 ## License
 MIT
diff --git a/packages/scroll-points/__tests__/unit.js b/packages/scroll-points/__tests__/unit.js
@@ -49,5 +49,17 @@ describe('Scroll points > unit > callback', () => {
         expect(mockDisconnect).toBeCalledWith(node);
     });
 
+    it('should remove className if entries[0] is not intersecting and replay and unload options set to allow replaying', () => {
+        document.body.innerHTML = '<div class="test"></div>';
+        const node = document.querySelector('.test');
+        const settings = { ...defaults, replay: true, unload: false };
+        const observer = { disconnect: () => {} };
+        callback({ settings, node })([{ isIntersecting: true }], observer);
+        expect(node.classList.contains(defaults.className)).toEqual(true);
+
+        callback({ settings, node })([{ isIntersecting: false }], observer);
+        expect(node.classList.contains(defaults.className)).toEqual(false);
+    });
+
 
 });
diff --git a/packages/scroll-points/example/src/index.html b/packages/scroll-points/example/src/index.html
@@ -1,87 +1,35 @@
 <!doctype html>
 <html>
 	<head>
-    <title>StormID</title>
+    <title>Storm ID</title>
     <style>
         * {
             margin:0;
             padding:0;
             box-sizing:border-box;
             font-family: sans-serif;
         }
-		body {
-        	font:100%/1.4 "AvenirNextLTW01-Regular", Helvetica, "Lucida Grande", sans-serif;
-		}
         html,
         body {
             height:100%;
         }
-		.container {
-			margin:24px auto;
-			max-width: 960px;
-			padding:0 24px;
-		}
 		hr {
 			height: 1px;
 			width: 100%;
 			display: block;
 			background: #ddd;
-			margin: 24px 0;
+			margin: 0 auto;
 			border: 0 none;
-		}
-		h1 {
-			margin-bottom: 24px;
-			font-size: 24px;
-			font-weight: 400;
-		}
-		h2 {
-			margin-bottom: 16px;
-			font-size: 21px;
-			font-weight: 400;
-		}
-		h3 {
-			margin-bottom: 16px;
-			font-size: 18px;
-			font-weight: 400;
-		}
-		p {
-			font-size: 18px;
-			margin-bottom: 16px;
-		}
-		.row {
-			margin:0 0 0 -24px;
-		}
-		.box {
-            width:calc(50% - 24px);
-            margin-left:24px;
-            margin-bottom:24px;
-            float:left;
-            border:1px dashed rgba(0,0,0, .2);
-            cursor:pointer;
-            height:200px;
-        }
-        .box.clicked {
-            background-color:rgba(0,0,0, .1);
-        }
-		pre {
-			margin-top: 0;
-			margin-bottom: 24px;
-			font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
-			background-color: #161616;
-    		color: #fff;
-			padding:16px;
-		}
-		code {
-			font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
-			font-size: 14px;
+			position: fixed;
+			top: 50%;
 		}
 		.scroll-point {
             position:relative;
             height:1px;
             background:#999;
             width:100%;
             display:block;
-            transition: all 260ms ease-in;
+            transition: all 60ms ease-in;
             will-change:transform;
         }
         .scroll-point {
@@ -95,12 +43,13 @@
             transform-origin: center;
         }
         .scroll-point.is--scrolled-in {
-            transition: background-color 450ms ease;
+            transition: background-color 120ms ease;
             background-color:blue;
         }
     </style>
 </head>
 <body>
+	<hr />
 	<div style="height:500px;margin-top:1000px;margin-bottom:400px;position:relative;">
 		<div class="js-scroll-point scroll-point"></div>
 	</div>

diff --git a/packages/scroll-points/example/src/js/index.js b/packages/scroll-points/example/src/js/index.js
@@ -1,5 +1,5 @@
 import scrollPoints from '../../../src';
 
 window.addEventListener('DOMContentLoaded', () => {
-    scrollPoints('.js-scroll-point');
+    scrollPoints('.js-scroll-point', { rootMargin: '0px 0px -50% 0px', unload: false, replay: true });
 });
diff --git a/packages/scroll-points/src/lib/defaults.js b/packages/scroll-points/src/lib/defaults.js
@@ -5,5 +5,6 @@ export default {
     threshold: 0,
     callback: false,
     className: 'is--scrolled-in',
-    unload: true
+    unload: true,
+    replay: false
 };
diff --git a/packages/scroll-points/src/lib/factory.js b/packages/scroll-points/src/lib/factory.js
@@ -3,7 +3,7 @@ export const callback = ({ settings, node }) => (entries, observer) => {
         node.classList.add(settings.className);
         if (settings.callback && typeof settings.callback === 'function') settings.callback.call({ settings, node });
         if (settings.unload) observer.disconnect(node);
-    }
+    } else if (settings.replay) node.classList.remove(settings.className);
 };
 
 export default ({ settings, node }) => {