Make Horizontal element use less layer memory

Author: GuptaSiddhant

README.md

@@ -1,10 +1,23 @@
 # React ScrollyTelling
 
-> Create scrolly-telling animations in React with ease.
+Create scrolly-telling animations in React with ease.
+
+[![Release](https://badgen.net/npm/v/react-scrolly-telling)](https://www.npmjs.com/package/react-scrolly-telling)
+[![Types](https://badgen.net/npm/types/react-scrolly-telling)](https://www.npmjs.com/package/react-scrolly-telling)
+[![License](https://badgen.net/github/license/guptasiddhant/react-scrolly-telling)](https://github.com/GuptaSiddhant/react-scrolly-telling/blob/main/LICENSE)
+[![Total downloads](https://badgen.net/npm/dt/react-scrolly-telling)](https://www.npmjs.com/package/react-scrolly-telling)
+[![Releases](https://badgen.net/github/releases/guptasiddhant/react-scrolly-telling)](https://github.com/GuptaSiddhant/react-scrolly-telling/releases)
+
+[![Minified GZip](https://badgen.net/bundlephobia/minzip/react-scrolly-telling)](https://bundlephobia.com/package/react-scrolly-telling)
+[![Dependency count](https://badgen.net/bundlephobia/dependency-count/react-scrolly-telling)](https://bundlephobia.com/package/react-scrolly-telling)
+[![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/react-scrolly-telling)](https://bundlephobia.com/package/react-scrolly-telling)
 
 `react-scrolly-telling` is a helper library to track the position of an element on the screen with respect to the viewport (or other parent element). It is optimised to work well with React, SSR, and Suspense.
 
-[GitHub](https://www.github.com/GuptaSiddhant/react-scrolly-telling) | [NPM](https://www.npmjs.com/package/react-scrolly-telling) | [Docs/Demo](https:///react-scrolly-telling.vercel.app/)
+- **[Docs/Demo - Storybook](https:///react-scrolly-telling.vercel.app/)**
+- [GitHub](https://www.github.com/GuptaSiddhant/react-scrolly-telling)
+- [NPM](https://www.npmjs.com/package/react-scrolly-telling)
+- [Bundlephobia](https://bundlephobia.com/package/react-scrolly-telling)
 
 ## Installation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scrolly-telling",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Create scrolly-telling animations in React with ease.",
   "type": "module",
   "keywords": [

src/components/ScrollyHorizontalElement.tsx

@@ -1,9 +1,10 @@
-import { forwardRef, useRef } from "react";
+import { forwardRef, useCallback, useRef } from "react";
 
 import interpolate from "../interpolate.js";
-import { mergeRefs, useStableLayoutEffect } from "../utils/react-helpers.js";
+import useAnimationFrame from "../utils/animation-frame.js";
+import { mergeRefs, type Styles } from "../utils/react-helpers.js";
 import { ScrollyElementContext } from "../utils/scrolly-context.js";
-import useScrolly from "../utils/use-scrolly.js";
+import useScrolly, { ScrollyValues } from "../utils/use-scrolly.js";
 
 export interface ScrollyHorizontalElementProps {
   as?: React.ElementType;
@@ -26,6 +27,7 @@ const styles = {
     position: "sticky",
     top: 0,
     height: "100vh",
+    width: "100vw",
     display: "inline-block",
     overflow: "hidden",
   },
@@ -38,7 +40,7 @@ const styles = {
     willChange: "transform",
     pointerEvents: "auto",
   },
-} satisfies Record<string, React.CSSProperties>;
+} satisfies Styles;
 
 const ScrollyHorizontalElement = (
   props: ScrollyHorizontalElementProps,
@@ -86,48 +88,28 @@ const ScrollyHorizontalElement = (
 
 export default forwardRef(ScrollyHorizontalElement);
 
-const CSS_PROPERTY_OVERFLOW_X = "overflow-x";
-
 function useScrollyHorizontalElementLayout(
   containerRef: React.RefObject<HTMLDivElement>,
   contentRef: React.RefObject<HTMLDivElement>
-) {
-  const timeRef = useRef(0);
+): ScrollyValues {
   const scrollyValues = useScrolly(containerRef, {
     precision: 3,
   });
   const { windowWidth, windowHeight, scrollRatio } = scrollyValues;
 
-  // Make sure the body doesn't scroll horizontally itself
-  useStableLayoutEffect(() => {
-    const previousOverflowX = document.body.style.getPropertyValue(
-      CSS_PROPERTY_OVERFLOW_X
-    );
-    document.body.style.setProperty(CSS_PROPERTY_OVERFLOW_X, "hidden");
-
-    return () =>
-      document.body.style.setProperty(
-        CSS_PROPERTY_OVERFLOW_X,
-        previousOverflowX
-      );
-  }, []);
-
-  useStableLayoutEffect(() => {
-    const contentScrollWidth = contentRef.current?.scrollWidth || 0;
-    const scrollDistance = Math.max(contentScrollWidth - windowWidth, 0);
-
-    // Make container taller to accommodate scroll distance
-    const containerHeight = windowHeight + scrollDistance;
-    containerRef.current?.style.setProperty("height", `${containerHeight}px`);
+  const handleAnimationFrame = useCallback(
+    (_: number, delta: number) => {
+      const contentScrollWidth = contentRef.current?.scrollWidth || 0;
+      const scrollDistance = Math.max(contentScrollWidth - windowWidth, 0);
 
-    const translateValue = interpolate(scrollRatio, {
-      targetFrom: 0,
-      targetTo: scrollDistance,
-    }).toFixed(0);
+      // Make container taller to accommodate scroll distance
+      const containerHeight = windowHeight + scrollDistance;
+      containerRef.current?.style.setProperty("height", `${containerHeight}px`);
 
-    const frame = window.requestAnimationFrame((time) => {
-      const delta = time - timeRef.current;
-      timeRef.current = time;
+      const translateValue = interpolate(scrollRatio, {
+        targetFrom: 0,
+        targetTo: scrollDistance,
+      }).toFixed(0);
 
       contentRef.current?.animate(
         { transform: `translateX(-${translateValue}px)` },
@@ -138,10 +120,11 @@ function useScrollyHorizontalElementLayout(
           playbackRate: 1 + delta / 100,
         }
       );
-    });
+    },
+    [containerRef, contentRef, scrollRatio, windowHeight, windowWidth]
+  );
 
-    return () => window.cancelAnimationFrame(frame);
-  }, [windowHeight, windowWidth, scrollRatio, contentRef, containerRef]);
+  useAnimationFrame(handleAnimationFrame);
 
   return scrollyValues;
 }

src/components/ScrollyVerticalElement.tsx

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from "react";
 import useScrolly from "../utils/use-scrolly.js";
 import { ScrollyElementContext } from "../utils/scrolly-context.js";
 import type { ScrollyOptions } from "../utils/types.js";
-import { mergeRefs } from "../utils/react-helpers.js";
+import { mergeRefs, type Styles } from "../utils/react-helpers.js";
 
 export interface ScrollyVerticalElementProps
   extends Omit<ScrollyOptions, "disabled"> {
@@ -21,7 +21,7 @@ const styles = {
     position: "relative",
     width: "100%",
   },
-} satisfies Record<string, React.CSSProperties>;
+} satisfies Styles;
 
 const ScrollyVerticalElement = forwardRef<
   HTMLDivElement,

src/components/Video.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 
 import interpolate from "../interpolate.js";
+import { type Styles } from "../utils/react-helpers.js";
 import { useScrollyElementContext } from "../utils/scrolly-context.js";
 
 const styles = {
@@ -12,7 +13,7 @@ const styles = {
     height: "100vh",
     objectFit: "cover",
   },
-} satisfies Record<string, React.CSSProperties>;
+} satisfies Styles;
 
 export interface VideoProps {
   src: string;

src/utils/animation-frame.ts

@@ -0,0 +1,21 @@
+import { useRef } from "react";
+import { useStableLayoutEffect } from "./react-helpers.js";
+
+export default function useAnimationFrame(
+  callback: (time: number, delta: number) => void
+): void {
+  const timeRef = useRef(0);
+
+  useStableLayoutEffect(() => {
+    const animationFrame = window.requestAnimationFrame((time) => {
+      const delta = time - timeRef.current;
+      timeRef.current = time;
+
+      callback(time, delta);
+    });
+
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+    };
+  }, [callback, cancelAnimationFrame]);
+}

src/utils/react-helpers.ts

@@ -14,3 +14,5 @@ export function mergeRefs<T>(...refs: React.Ref<T>[]) {
 
 export const useStableLayoutEffect =
   typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export type Styles = Record<string, React.CSSProperties>;