Merge pull request #39 from basementstudio/jb/disabled-debugging

default `disabled` to `false`

Author: julianbenegas

scrollytelling/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @bsmnt/scrollytelling
 
+## 0.2.4
+
+### Patch Changes
+
+- 56586af: Default disabled value to false
+- abe6bb9: Tweak disabled
+
+## 0.2.4-next.1
+
+### Patch Changes
+
+- Tweak disabled
+
+## 0.2.4-next.0
+
+### Patch Changes
+
+- Default disabled value to false
+
 ## 0.2.3
 
 ### Patch Changes

scrollytelling/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bsmnt/scrollytelling",
   "author": "JB <jb@basement.studio>",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

scrollytelling/src/components/animation/index.tsx

@@ -36,15 +36,19 @@ export function Animation(props: {
   disabled?: boolean;
 }): React.ReactElement;
 
-export function Animation(props: AnimationProps): React.ReactElement | null {
+export function Animation({
+  tween,
+  children,
+  disabled = false,
+}: AnimationProps): React.ReactElement | null {
   const ref = React.useRef<HTMLElement>(null);
   const id = React.useId();
 
   const { timeline } = useScrollytelling();
   const { getTimelineSpace } = useDispatcher();
 
   React.useEffect(() => {
-    if (!timeline || !props.tween || props.disabled) return;
+    if (!timeline || !tween || disabled) return;
 
     const addTweenToTimeline = (
       tween: TweenWithChildrenDef | TweenWithTargetDef
@@ -75,24 +79,24 @@ export function Animation(props: AnimationProps): React.ReactElement | null {
       } else return () => undefined;
     };
 
-    if (Array.isArray(props.tween)) {
-      const cleanupTweens = props.tween.map((tween) => {
+    if (Array.isArray(tween)) {
+      const cleanupTweens = tween.map((tween) => {
         const cleanup = addTweenToTimeline(tween);
         return cleanup;
       });
       return () => {
         cleanupTweens.forEach((cleanup) => cleanup?.());
       };
     } else {
-      const cleanup = addTweenToTimeline(props.tween);
+      const cleanup = addTweenToTimeline(tween);
       return () => {
         cleanup?.();
       };
     }
-  }, [getTimelineSpace, id, props.tween, timeline, props.disabled]);
+  }, [getTimelineSpace, id, tween, timeline, disabled]);
 
-  if (props.children) {
-    return <Slot ref={ref}>{props.children}</Slot>;
+  if (children) {
+    return <Slot ref={ref}>{children}</Slot>;
   }
   return null;
 }

scrollytelling/src/components/parallax/index.tsx

@@ -34,7 +34,7 @@ interface ParallaxProps {
 export const Parallax: React.FC<ParallaxProps> = ({
   children,
   tween,
-  disabled,
+  disabled = false,
 }): JSX.Element => {
   if (!tween.movementY && !tween.movementX) {
     throw new Error(

scrollytelling/src/primitive.tsx

@@ -35,7 +35,7 @@ const Scrollytelling = ({
   scrub,
   defaults,
   toggleActions,
-  disabled,
+  disabled = false,
 }: {
   children?: React.ReactNode;
   debug?: boolean;

website/CHANGELOG.md

@@ -0,0 +1,23 @@
+# website
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [56586af]
+- Updated dependencies [abe6bb9]
+  - @bsmnt/scrollytelling@0.2.4
+
+## 0.1.1-next.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @bsmnt/scrollytelling@0.2.4-next.1
+
+## 0.1.1-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @bsmnt/scrollytelling@0.2.4-next.0

website/package.json

@@ -1,7 +1,7 @@
 {
   "name": "website",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@bsmnt/scrollytelling": "*",
+    "@bsmnt/scrollytelling": "0.2.4",
     "@react-three/drei": "^9.65.3",
     "@react-three/fiber": "^8.12.0",
     "@types/three": "^0.150.1",

website/src/app/debug/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useState } from "react";
+import * as Scrollytelling from "~/lib/scrollytelling-client";
+
+const texts = ["one", "two", "three"];
+
+export default function Page() {
+  const [isDisabled, setIsDisabled] = useState<boolean | undefined>(undefined);
+
+  return (
+    <main>
+      <div
+        style={{
+          position: "fixed",
+          top: 0,
+          right: 0,
+          zIndex: 100,
+        }}
+      >
+        <button onClick={() => setIsDisabled((p) => false)}>
+          Toggle Disabled
+        </button>
+        <p>Disabled: {JSON.stringify(isDisabled)}</p>
+      </div>
+      <div
+        style={{
+          height: "100vh",
+          backgroundColor: "blue",
+        }}
+      />
+      {texts.map((text, i) => {
+        return (
+          <Scrollytelling.Root disabled={isDisabled} key={i}>
+            <div style={{ height: "200vh", background: "black" }}>
+              <div style={{ position: "sticky", top: 0 }}>
+                <Scrollytelling.Animation
+                  tween={{
+                    start: 0,
+                    end: 100,
+                    to: { scale: 1.5 },
+                  }}
+                  disabled={isDisabled}
+                >
+                  <h1
+                    style={{
+                      fontSize: "5rem",
+                      transformOrigin: "top left",
+                    }}
+                  >
+                    {text}
+                  </h1>
+                </Scrollytelling.Animation>
+              </div>
+            </div>
+          </Scrollytelling.Root>
+        );
+      })}
+      <div style={{ height: "100vh", backgroundColor: "red" }} />
+    </main>
+  );
+}