Better Scrollama setup

EmoryDHLab · Aug 6, 2024 · 83d666a · 83d666a
1 parent 9a55857
commit 83d666a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 32 deletions.
diff --git a/app/components/ScrollytellWrapper.tsx b/app/components/ScrollytellWrapper.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import scrollama from "scrollama";
 import { ChapterContext } from "~/chapterContext";
 import { useResizeObserver } from "~/hooks";
@@ -48,16 +48,22 @@ export default function ScrollytellWrapper({
   const scrollerRef = useRef<ScrollamaInstance | undefined>(undefined);
   const scrollerElementRef = useRef<HTMLDivElement>(null);
   const { documentSize } = useResizeObserver();
+  const [setupFailed, setSetupFailed] = useState<boolean>(false);
+  const [shouldRetry, setShouldRetry] = useState<boolean>(false);
 
   useEffect(() => {
-    if (steps?.current?.children.length !== triggers.length) return;
+    if (
+      steps?.current?.children.length !== triggers.length ||
+      scrollerRef.current
+    )
+      return;
     try {
       scrollerRef.current = scrollama();
       scrollerRef.current
         .setup({
           // @ts-ignore may be a Scrollama bug. offset does allow strings.
-          offset: scrollOffset ?? "60px",
-          step: stepClassName ?? ".step",
+          offset: "60px",
+          step: ".step",
           progress: true,
           debug,
           parent,
@@ -68,8 +74,10 @@ export default function ScrollytellWrapper({
           if (setCurrentStep) setCurrentStep(index);
           setScrollProgress(index + progress);
         });
+      setSetupFailed(false);
     } catch (error) {
-      console.error(error);
+      scrollerRef.current = undefined;
+      setSetupFailed(true);
     }
 
     return () => {
@@ -87,8 +95,14 @@ export default function ScrollytellWrapper({
     steps,
     threshold,
     triggers,
+    shouldRetry,
   ]);
 
+  useEffect(() => {
+    // Mostly a bug when navigating from error page.
+    setShouldRetry(setupFailed);
+  }, [setupFailed]);
+
   useEffect(() => {
     try {
       scrollerRef.current?.resize();

diff --git a/app/components/layout/ChapterBody.tsx b/app/components/layout/ChapterBody.tsx
@@ -20,6 +20,8 @@ export default function ChapterBody({ children, className }: Props) {
   const [fixedNav, setFixedNav] = useState<boolean>(false);
   const { mainContentSize, windowSize } = useResizeObserver();
   const { backgroundColor } = useContext(ChapterContext);
+  const [setupFailed, setSetupFailed] = useState<boolean>(false);
+  const [shouldRetry, setShouldRetry] = useState<boolean>(false);
 
   useEffect(() => {
     if (!windowSize.height) return;
@@ -30,10 +32,7 @@ export default function ChapterBody({ children, className }: Props) {
       // the image containers the size of the image. Maybe later...
       // https://github.com/russellsamora/scrollama/issues/145
       scrollerRef.current.resize();
-    } else if (
-      containerRef.current &&
-      document.body.contains(containerRef.current)
-    ) {
+    } else if (!scrollerRef.current && containerRef.current) {
       scrollerRef.current = scrollama();
       try {
         scrollerRef.current
@@ -47,14 +46,20 @@ export default function ChapterBody({ children, className }: Props) {
           .onStepProgress(({ progress }) => setChapterProgressState(progress));
       } catch {
         scrollerRef.current = undefined;
+        setSetupFailed(true);
       }
     }
 
     return () => {
       scrollerRef.current?.destroy();
       scrollerRef.current = undefined;
     };
-  }, [mainContentSize, windowSize]);
+  }, [mainContentSize, windowSize, shouldRetry]);
+
+  useEffect(() => {
+    // Mostly a bug when navigating from error page.
+    setShouldRetry(setupFailed);
+  }, [setupFailed]);
 
   useEffect(() => {
     setFixedNav(chapterProgressState > 0.98);

diff --git a/app/components/shanawdithit/DrawingScrollytell.tsx b/app/components/shanawdithit/DrawingScrollytell.tsx
@@ -121,7 +121,24 @@ function SketchScrollytell({ figure, triggers }: Props) {
               viewBox={`0 0 ${width} ${height}`}
               className="max-h-[60vh] max-w-[90%] md:mb-16 mx-auto drop-shadow-2xl"
             >
+              <mask id="sketch-mask">
+                <rect
+                  x={0}
+                  y={0}
+                  width={width}
+                  height={height}
+                  fill="white"
+                  fillOpacity={0.3}
+                  className="transition-all duration-[3s]"
+                />
+                <rect
+                  {...focusShapeSize}
+                  fill="white"
+                  className="transition-all duration-[3s]"
+                />
+              </mask>
               <image
+                mask="url(#sketch-mask)"
                 href={`/images/${figure.chapter}/${figure.fileName}.jpg`}
                 className="transition-all origin-center duration-[3s]  opacity-100"
                 width={width}
@@ -132,39 +149,21 @@ function SketchScrollytell({ figure, triggers }: Props) {
                   transform: `scale(${zoom}) translateY(${translateY}px) translateX(${translateX}px)`,
                 }}
               />
-              <defs>
-                <mask id="sketch-mask">
-                  <rect
-                    x={0}
-                    y={0}
-                    width={width}
-                    height={height}
-                    fill="white"
-                    fillOpacity={0.7}
-                    className="transition-all duration-[3s]"
-                  />
-                  <rect
-                    {...focusShapeSize}
-                    fill="black"
-                    className="transition-all duration-[3s]"
-                  />
-                </mask>
-              </defs>
               <g>
-                <rect
+                {/* <rect
                   {...focusShapeSize}
                   fill="none"
                   stroke="black"
                   strokeWidth={3}
                   className="transition-all duration-[3s]"
-                />
-                <rect
+                /> */}
+                {/* <rect
                   mask="url(#sketch-mask)"
                   x={0}
                   y={0}
                   width={width}
                   height={height}
-                />
+                /> */}
               </g>
             </svg>
             <figcaption></figcaption>