diff --git a/scrollytelling/CHANGELOG.md b/scrollytelling/CHANGELOG.md index 9263410..a88bf3f 100644 --- a/scrollytelling/CHANGELOG.md +++ b/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 diff --git a/scrollytelling/package.json b/scrollytelling/package.json index 6485025..883405c 100644 --- a/scrollytelling/package.json +++ b/scrollytelling/package.json @@ -1,7 +1,7 @@ { "name": "@bsmnt/scrollytelling", "author": "JB ", - "version": "0.2.3", + "version": "0.2.4", "main": "./dist/index.js", "module": "./dist/index.mjs", "types": "./dist/index.d.ts", diff --git a/scrollytelling/src/components/animation/index.tsx b/scrollytelling/src/components/animation/index.tsx index 2937405..2e5420d 100644 --- a/scrollytelling/src/components/animation/index.tsx +++ b/scrollytelling/src/components/animation/index.tsx @@ -36,7 +36,11 @@ 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(null); const id = React.useId(); @@ -44,7 +48,7 @@ export function Animation(props: AnimationProps): React.ReactElement | null { const { getTimelineSpace } = useDispatcher(); React.useEffect(() => { - if (!timeline || !props.tween || props.disabled) return; + if (!timeline || !tween || disabled) return; const addTweenToTimeline = ( tween: TweenWithChildrenDef | TweenWithTargetDef @@ -75,8 +79,8 @@ 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; }); @@ -84,15 +88,15 @@ export function Animation(props: AnimationProps): React.ReactElement | null { 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 {props.children}; + if (children) { + return {children}; } return null; } diff --git a/scrollytelling/src/components/parallax/index.tsx b/scrollytelling/src/components/parallax/index.tsx index 8c0a311..a9b1d7c 100644 --- a/scrollytelling/src/components/parallax/index.tsx +++ b/scrollytelling/src/components/parallax/index.tsx @@ -34,7 +34,7 @@ interface ParallaxProps { export const Parallax: React.FC = ({ children, tween, - disabled, + disabled = false, }): JSX.Element => { if (!tween.movementY && !tween.movementX) { throw new Error( diff --git a/scrollytelling/src/primitive.tsx b/scrollytelling/src/primitive.tsx index fb68f5e..a55dcb7 100644 --- a/scrollytelling/src/primitive.tsx +++ b/scrollytelling/src/primitive.tsx @@ -35,7 +35,7 @@ const Scrollytelling = ({ scrub, defaults, toggleActions, - disabled, + disabled = false, }: { children?: React.ReactNode; debug?: boolean; diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md new file mode 100644 index 0000000..fb37b27 --- /dev/null +++ b/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 diff --git a/website/package.json b/website/package.json index fc8c9c4..cd3c1d1 100644 --- a/website/package.json +++ b/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", diff --git a/website/src/app/debug/page.tsx b/website/src/app/debug/page.tsx new file mode 100644 index 0000000..ec2de3e --- /dev/null +++ b/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(undefined); + + return ( +
+
+ +

Disabled: {JSON.stringify(isDisabled)}

+
+
+ {texts.map((text, i) => { + return ( + +
+
+ +

+ {text} +

+
+
+
+
+ ); + })} +
+
+ ); +}