Ensure progress offsets are properly inverted

Author: rdmurphy

README.md

@@ -4,7 +4,7 @@ A tiny custom element for all your scrollytelling needs! The successor to [`@new
 
 ## Key features
 
-- 🐜 **Less than 700 bytes** brotli'ed, **less than 800 bytes** gzip'ed
+- 🐜 **~700 bytes** brotli'ed, **~800 bytes** gzip'ed
 - 👀 Uses a highly-performant **[Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)** to monitor scrolling changes
 - 📚 Smartly uses scroll events to **calculate scroll progress** only when needed
 - 🌻 Each `<scroll-scene>` element may **have its own** `offset` and **opt-in** to `progress` events

docs/progress.html

@@ -76,7 +76,7 @@
   </style>
   <script src="https://unpkg.com/scroll-scene-element/dist/scroll-scene-element.js" type="module"></script>
   <script type="module">
-    const offset = 0.5;
+    const offset = 0.75;
 
     function getRandomIntInclusive(min, max) {
       min = Math.ceil(min);
@@ -88,6 +88,7 @@
 
     scenes.forEach((scene) => {
       scene.style.padding = getRandomIntInclusive(200, 400) + 'px 0';
+      scene.offset = offset;
     })
 
     document.querySelector('.midpoint').style.top = (1 - offset) * 100 + '%';

src/scroll-scene-element.ts

@@ -86,7 +86,7 @@ function observeProgress(element: ScrollSceneElement): ProgressCommands {
 		// ensure progress is never less than 0 or greater than 1
 		const progress = Math.max(
 			0,
-			Math.min((window.innerHeight * offset - top) / (bottom - top), 1),
+			Math.min((window.innerHeight * (1 - offset) - top) / (bottom - top), 1),
 		);
 
 		element.dispatchEvent(