oops, need to listen to container not window for scroll

Author: aholachek

dist/index.d.ts

@@ -1,5 +1,5 @@
 import { WrapGridArguments } from './types';
-export declare const wrapGrid: (container: HTMLElement, { duration, stagger, easing }?: WrapGridArguments) => {
+export declare const wrapGrid: (container: HTMLElement, { duration, stagger, easing, onStart, onEnd, watchScroll, }?: WrapGridArguments) => {
     unwrapGrid: () => void;
     forceGridAnimation: () => void;
 };

dist/main.js

@@ -42,4 +42,7 @@ export interface WrapGridArguments {
     duration?: number;
     stagger?: number;
     easing?: keyof PopmotionEasing;
+    onStart?: (animatedChildren: HTMLElement[]) => void;
+    onEnd?: (animatedChildren: HTMLElement[]) => void;
+    watchScroll?: boolean;
 }

dist/main.js.map

@@ -141,28 +141,22 @@ export const wrapGrid = (
   };
   recordPositions(container.children as HTMLCollectionOf<HTMLElement>);
 
-  const createMutationListener = (
-    eventType: string,
-    throttleDuration: number,
-  ) => {
-    const throttledListener = throttle(() => {
-      const bodyElement = document.querySelector('body');
-      const containerIsNoLongerInPage =
-        bodyElement && !bodyElement.contains(container);
-      if (!container || containerIsNoLongerInPage) {
-        window.removeEventListener(eventType, throttledListener);
-      }
-      recordPositions(container.children as HTMLCollectionOf<HTMLElement>);
-    }, throttleDuration);
-    return throttledListener;
-  };
-
-  const resizeListener = createMutationListener('resize', 250);
-  window.addEventListener('resize', resizeListener);
+  const throttledResizeListener = throttle(() => {
+    const bodyElement = document.querySelector('body');
+    const containerIsNoLongerInPage =
+      bodyElement && !bodyElement.contains(container);
+    if (!container || containerIsNoLongerInPage) {
+      window.removeEventListener('resize', throttledResizeListener);
+    }
+    recordPositions(container.children as HTMLCollectionOf<HTMLElement>);
+  }, 250);
+  window.addEventListener('resize', throttledResizeListener);
 
-  const scrollListener = createMutationListener('scroll', 20);
+  const throttledScrollListener = throttle(() => {
+    recordPositions(container.children as HTMLCollectionOf<HTMLElement>);
+  }, 20);
   if (watchScroll) {
-    window.addEventListener('scroll', scrollListener);
+    container.addEventListener('scroll', throttledScrollListener);
   }
 
   const mutationCallback = (
@@ -335,9 +329,9 @@ export const wrapGrid = (
     attributeFilter: ['class'],
   });
   const unwrapGrid = () => {
-    window.removeEventListener('resize', resizeListener);
+    window.removeEventListener('resize', throttledResizeListener);
     if (watchScroll) {
-      window.removeEventListener('scroll', scrollListener);
+      container.removeEventListener('scroll', throttledScrollListener);
     }
     observer.disconnect();
   };