diff --git a/.changeset/sweet-flies-pump.md b/.changeset/sweet-flies-pump.md new file mode 100644 index 0000000..833d7fe --- /dev/null +++ b/.changeset/sweet-flies-pump.md @@ -0,0 +1,5 @@ +--- +"@bsmnt/scrollytelling": patch +--- + +add disabled prop to Root diff --git a/scrollytelling/src/components/animation/index.tsx b/scrollytelling/src/components/animation/index.tsx index 396dc2d..2937405 100644 --- a/scrollytelling/src/components/animation/index.tsx +++ b/scrollytelling/src/components/animation/index.tsx @@ -58,6 +58,7 @@ export function Animation(props: AnimationProps): React.ReactElement | null { start: tween.start, end: tween.end, }); + if (!timelineSpace) return; // root is probably disabled. const cleanup = buildDeclarativeTween({ id, timeline, @@ -80,12 +81,12 @@ export function Animation(props: AnimationProps): React.ReactElement | null { return cleanup; }); return () => { - cleanupTweens.forEach((cleanup) => cleanup()); + cleanupTweens.forEach((cleanup) => cleanup?.()); }; } else { const cleanup = addTweenToTimeline(props.tween); return () => { - cleanup(); + cleanup?.(); }; } }, [getTimelineSpace, id, props.tween, timeline, props.disabled]); diff --git a/scrollytelling/src/context/index.tsx b/scrollytelling/src/context/index.tsx index 5bbc2bc..1cc017d 100644 --- a/scrollytelling/src/context/index.tsx +++ b/scrollytelling/src/context/index.tsx @@ -24,7 +24,7 @@ export type ScrollytellingDispatchersContextType = { duration: number; position: number; cleanup: () => void; - }; + } | null; scopedQuerySelector: gsap.utils.SelectorFunc | undefined; }; diff --git a/scrollytelling/src/primitive.tsx b/scrollytelling/src/primitive.tsx index 31fa796..fb68f5e 100644 --- a/scrollytelling/src/primitive.tsx +++ b/scrollytelling/src/primitive.tsx @@ -75,7 +75,13 @@ const Scrollytelling = ({ // initialize timeline React.useEffect(() => { - if (!ref.current || disabled) return; + if (!ref.current) return; + + if (disabled) { + setTimeline(undefined); + return; + } + gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ @@ -121,6 +127,7 @@ const Scrollytelling = ({ const getTimelineSpace: ScrollytellingDispatchersContextType["getTimelineSpace"] = React.useCallback( ({ start, end }) => { + if (disabled) return null; if (!timeline) throw new Error("timeline not initialized"); const duration = end - start; if (start < 0) { @@ -143,7 +150,7 @@ const Scrollytelling = ({ }, }; }, - [addRestToTimeline, timeline] + [addRestToTimeline, timeline, disabled] ); return (