@react-scrollytelling/framer-motion 0.3.0 → 0.3.2

package/dist/index.mjs

@@ -1,3 +1,5 @@
+"use client";
+
 import { c } from "react/compiler-runtime";
 import { useState } from "react";
 import { useActiveSection } from "@react-scrollytelling/grouped";
@@ -21,7 +23,7 @@ function useActiveSectionMotionValue(onActiveSectionChange) {
 	if ($[0] !== onActiveSectionChange || $[1] !== scrolledRatioMotionValue) {
 		t0 = (scrollInfo) => {
 			const { trackingId: id, scrolledRatio } = scrollInfo;
-			setTrackingId(id);
+			setTrackingId((prev) => prev === id ? prev : id);
 			scrolledRatioMotionValue.set(scrolledRatio);
 			if (onActiveSectionChange) onActiveSectionChange(scrollInfo);
 		};

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["useCallback","useState","useActiveSection","useMotionValue","useActiveSectionMotionValue","onActiveSectionChange","$","_c","scrolledRatioMotionValue","trackingId","setTrackingId","t0","scrollInfo","id","scrolledRatio","set","onSectionScroll","t1","useCallback","useSectionScroll","useMotionValue","useSectionScrollMotionValue","sectionRef","onScroll","t0","options","$","_c","shouldObserve","undefined","scrolledRatioMotionValue","t1","scrollInfo","scrolledRatio","set","onSectionScroll","t2"],"sources":["../src/hooks/useActiveSectionMotionValue.ts","../src/hooks/useSectionScrollMotionValue.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport {\n  ActiveSectionScrollInfo,\n  useActiveSection,\n  ActiveSectionObserver,\n} from \"@react-scrollytelling/grouped\";\nimport { useMotionValue } from \"motion/react\";\n\n/**\n * Watches for all tracked sections to find the section closet to the bottom of the viewport\n * through ScrollytellingProvider.\n * It invokes the onActiveSectionChange when the active section changes.\n * Returns the Motion value of the section scroll.\n * @param onActiveSectionChange - The callback needs to be memoized\n * @returns The trackingId of the active section and the Motion value of the section scroll\n */\nexport function useActiveSectionMotionValue(\n  onActiveSectionChange?: ActiveSectionObserver\n) {\n  const scrolledRatioMotionValue = useMotionValue(0);\n  const [trackingId, setTrackingId] = useState<string | null>(null);\n\n  const onSectionScroll = useCallback(\n    (scrollInfo: ActiveSectionScrollInfo) => {\n      const { trackingId: id, scrolledRatio } = scrollInfo;\n      setTrackingId(id);\n      scrolledRatioMotionValue.set(scrolledRatio);\n\n      if (onActiveSectionChange) {\n        onActiveSectionChange(scrollInfo);\n      }\n    },\n    [onActiveSectionChange, scrolledRatioMotionValue]\n  );\n\n  useActiveSection(onSectionScroll);\n\n  return {\n    trackingId,\n    scrolledRatioMotionValue,\n  };\n}\n","import { useCallback } from \"react\";\n\nimport {\n  IntersectionObserverOptions,\n  SectionScrollInfo,\n  useSectionScroll,\n} from \"@react-scrollytelling/core\";\nimport { useMotionValue } from \"motion/react\";\n\n/**\n * Get the Motion value of the section scroll\n * @param sectionRef - The reference to the section element\n * @param shouldObserve - Whether the underlying IntersectionObserver should be active\n * @param onScroll - The callback to track the scroll ratio\n */\nexport function useSectionScrollMotionValue(\n  sectionRef: React.RefObject<Element>,\n  onScroll?: (scrollInfo: SectionScrollInfo) => void,\n  shouldObserve = true,\n  options?: IntersectionObserverOptions\n) {\n  const scrolledRatioMotionValue = useMotionValue(0);\n\n  const onSectionScroll = useCallback(\n    (scrollInfo: SectionScrollInfo) => {\n      const { scrolledRatio } = scrollInfo;\n      scrolledRatioMotionValue.set(scrolledRatio);\n\n      if (onScroll) {\n        onScroll(scrollInfo);\n      }\n    },\n    [onScroll, scrolledRatioMotionValue]\n  );\n\n  useSectionScroll(sectionRef, onSectionScroll, shouldObserve, options);\n\n  return { scrolledRatioMotionValue };\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAOI,4BAAAC,uBAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGL,MAAAC,2BAAiCL,eAAe,EAAE;CAClD,MAAA,CAAAM,YAAAC,iBAAoCT,SAAwB,KAAK;CAAC,IAAAU;AAAA,KAAAL,EAAA,OAAAD,yBAAAC,EAAA,OAAAE,0BAAA;AAGhEG,QAAAC,eAAA;GACE,MAAA,EAAAH,YAAAI,IAAAC,kBAA0CF;AAC1CF,iBAAcG,GAAG;AACjBL,4BAAwBO,IAAKD,cAAc;AAE3C,OAAIT,sBACFA,uBAAsBO,WAAW;;AAEpCN,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAIHJ,kBAbwBS,GAaS;CAAA,IAAAM;AAAA,KAAAX,EAAA,OAAAE,4BAAAF,EAAA,OAAAG,YAAA;AAE1BQ,OAAA;GAAAR;GAAAD;GAGN;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAW;OAAAA,MAAAX,EAAA;AAAA,QAHMW;;;;;;;;;;;ACvBT,SAAOI,4BAAAC,YAAAC,UAAAC,IAAAC,SAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGL,MAAAC,gBAAAJ,OAAAK,SAAA,OAAAL;CAGA,MAAAM,2BAAiCV,eAAe,EAAE;CAAC,IAAAW;AAAA,KAAAL,EAAA,OAAAH,YAAAG,EAAA,OAAAI,0BAAA;AAGjDC,QAAAC,eAAA;GACE,MAAA,EAAAC,kBAA0BD;AAC1BF,4BAAwBI,IAAKD,cAAc;AAE3C,OAAIV,SACFA,UAASS,WAAW;;AAEvBN,IAAA,KAAAH;AAAAG,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAIHP,kBAAiBG,YAZOS,IAYsBH,eAAeH,QAAQ;CAAA,IAAAW;AAAA,KAAAV,EAAA,OAAAI,0BAAA;AAE9DM,OAAA,EAAAN,0BAA4B;AAAAJ,IAAA,KAAAI;AAAAJ,IAAA,KAAAU;OAAAA,MAAAV,EAAA;AAAA,QAA5BU"}
+{"version":3,"file":"index.mjs","names":["useCallback","useState","useActiveSection","useMotionValue","useActiveSectionMotionValue","onActiveSectionChange","$","_c","scrolledRatioMotionValue","trackingId","setTrackingId","t0","scrollInfo","id","scrolledRatio","prev","set","onSectionScroll","t1","useCallback","useSectionScroll","useMotionValue","useSectionScrollMotionValue","sectionRef","onScroll","t0","options","$","_c","shouldObserve","undefined","scrolledRatioMotionValue","t1","scrollInfo","scrolledRatio","set","onSectionScroll","t2"],"sources":["../src/hooks/useActiveSectionMotionValue.ts","../src/hooks/useSectionScrollMotionValue.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport {\n  type ActiveSectionScrollInfo,\n  useActiveSection,\n  type ActiveSectionObserver,\n} from \"@react-scrollytelling/grouped\";\nimport { useMotionValue } from \"motion/react\";\n\n/**\n * Watches for all tracked sections to find the section closet to the bottom of the viewport\n * through ScrollytellingProvider.\n * It invokes the onActiveSectionChange when the active section changes.\n * Returns the Motion value of the section scroll.\n * @param onActiveSectionChange - The callback needs to be memoized\n * @returns The trackingId of the active section and the Motion value of the section scroll\n */\nexport function useActiveSectionMotionValue(\n  onActiveSectionChange?: ActiveSectionObserver\n) {\n  const scrolledRatioMotionValue = useMotionValue(0);\n  const [trackingId, setTrackingId] = useState<string | null>(null);\n\n  const onSectionScroll = useCallback(\n    (scrollInfo: ActiveSectionScrollInfo) => {\n      const { trackingId: id, scrolledRatio } = scrollInfo;\n      setTrackingId((prev) => (prev === id ? prev : id));\n      scrolledRatioMotionValue.set(scrolledRatio);\n\n      if (onActiveSectionChange) {\n        onActiveSectionChange(scrollInfo);\n      }\n    },\n    [onActiveSectionChange, scrolledRatioMotionValue]\n  );\n\n  useActiveSection(onSectionScroll);\n\n  return {\n    trackingId,\n    scrolledRatioMotionValue,\n  };\n}\n","import { useCallback } from \"react\";\n\nimport {\n  type IntersectionObserverOptions,\n  type SectionScrollInfo,\n  useSectionScroll,\n} from \"@react-scrollytelling/core\";\nimport { useMotionValue } from \"motion/react\";\n\n/**\n * Get the Motion value of the section scroll\n * @param sectionRef - The reference to the section element\n * @param shouldObserve - Whether the underlying IntersectionObserver should be active\n * @param onScroll - The callback to track the scroll ratio\n */\nexport function useSectionScrollMotionValue(\n  sectionRef: React.RefObject<Element>,\n  onScroll?: (scrollInfo: SectionScrollInfo) => void,\n  shouldObserve = true,\n  options?: IntersectionObserverOptions\n) {\n  const scrolledRatioMotionValue = useMotionValue(0);\n\n  const onSectionScroll = useCallback(\n    (scrollInfo: SectionScrollInfo) => {\n      const { scrolledRatio } = scrollInfo;\n      scrolledRatioMotionValue.set(scrolledRatio);\n\n      if (onScroll) {\n        onScroll(scrollInfo);\n      }\n    },\n    [onScroll, scrolledRatioMotionValue]\n  );\n\n  useSectionScroll(sectionRef, onSectionScroll, shouldObserve, options);\n\n  return { scrolledRatioMotionValue };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAOI,4BAAAC,uBAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGL,MAAAC,2BAAiCL,eAAe,EAAE;CAClD,MAAA,CAAAM,YAAAC,iBAAoCT,SAAwB,KAAK;CAAC,IAAAU;AAAA,KAAAL,EAAA,OAAAD,yBAAAC,EAAA,OAAAE,0BAAA;AAGhEG,QAAAC,eAAA;GACE,MAAA,EAAAH,YAAAI,IAAAC,kBAA0CF;AAC1CF,kBAAcK,SAAWA,SAASF,KAATE,OAAAF,GAAyB;AAClDL,4BAAwBQ,IAAKF,cAAc;AAE3C,OAAIT,sBACFA,uBAAsBO,WAAW;;AAEpCN,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAIHJ,kBAbwBS,GAaS;CAAA,IAAAO;AAAA,KAAAZ,EAAA,OAAAE,4BAAAF,EAAA,OAAAG,YAAA;AAE1BS,OAAA;GAAAT;GAAAD;GAGN;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;AAAA,QAHMY;;;;;;;;;;;ACvBT,SAAOI,4BAAAC,YAAAC,UAAAC,IAAAC,SAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGL,MAAAC,gBAAAJ,OAAAK,SAAA,OAAAL;CAGA,MAAAM,2BAAiCV,eAAe,EAAE;CAAC,IAAAW;AAAA,KAAAL,EAAA,OAAAH,YAAAG,EAAA,OAAAI,0BAAA;AAGjDC,QAAAC,eAAA;GACE,MAAA,EAAAC,kBAA0BD;AAC1BF,4BAAwBI,IAAKD,cAAc;AAE3C,OAAIV,SACFA,UAASS,WAAW;;AAEvBN,IAAA,KAAAH;AAAAG,IAAA,KAAAI;AAAAJ,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAIHP,kBAAiBG,YAZOS,IAYsBH,eAAeH,QAAQ;CAAA,IAAAW;AAAA,KAAAV,EAAA,OAAAI,0BAAA;AAE9DM,OAAA,EAAAN,0BAA4B;AAAAJ,IAAA,KAAAI;AAAAJ,IAAA,KAAAU;OAAAA,MAAAV,EAAA;AAAA,QAA5BU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-scrollytelling/framer-motion",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "> TODO: description",
   "author": "@hsunpei",
   "license": "MIT",
@@ -8,8 +8,8 @@
     "access": "public"
   },
   "homepage": "https://github.com/hsunpei/react-scrollytelling#readme",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
   "sideEffects": false,
   "files": [
@@ -17,14 +17,8 @@
   ],
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
     }
   },
   "repository": {

package/dist/index.cjs

@@ -1,82 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-let react_compiler_runtime = require("react/compiler-runtime");
-let react = require("react");
-let _react_scrollytelling_grouped = require("@react-scrollytelling/grouped");
-let motion_react = require("motion/react");
-let _react_scrollytelling_core = require("@react-scrollytelling/core");
-
-//#region src/hooks/useActiveSectionMotionValue.ts
-/**
-* Watches for all tracked sections to find the section closet to the bottom of the viewport
-* through ScrollytellingProvider.
-* It invokes the onActiveSectionChange when the active section changes.
-* Returns the Motion value of the section scroll.
-* @param onActiveSectionChange - The callback needs to be memoized
-* @returns The trackingId of the active section and the Motion value of the section scroll
-*/
-function useActiveSectionMotionValue(onActiveSectionChange) {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const scrolledRatioMotionValue = (0, motion_react.useMotionValue)(0);
-	const [trackingId, setTrackingId] = (0, react.useState)(null);
-	let t0;
-	if ($[0] !== onActiveSectionChange || $[1] !== scrolledRatioMotionValue) {
-		t0 = (scrollInfo) => {
-			const { trackingId: id, scrolledRatio } = scrollInfo;
-			setTrackingId(id);
-			scrolledRatioMotionValue.set(scrolledRatio);
-			if (onActiveSectionChange) onActiveSectionChange(scrollInfo);
-		};
-		$[0] = onActiveSectionChange;
-		$[1] = scrolledRatioMotionValue;
-		$[2] = t0;
-	} else t0 = $[2];
-	(0, _react_scrollytelling_grouped.useActiveSection)(t0);
-	let t1;
-	if ($[3] !== scrolledRatioMotionValue || $[4] !== trackingId) {
-		t1 = {
-			trackingId,
-			scrolledRatioMotionValue
-		};
-		$[3] = scrolledRatioMotionValue;
-		$[4] = trackingId;
-		$[5] = t1;
-	} else t1 = $[5];
-	return t1;
-}
-
-//#endregion
-//#region src/hooks/useSectionScrollMotionValue.ts
-/**
-* Get the Motion value of the section scroll
-* @param sectionRef - The reference to the section element
-* @param shouldObserve - Whether the underlying IntersectionObserver should be active
-* @param onScroll - The callback to track the scroll ratio
-*/
-function useSectionScrollMotionValue(sectionRef, onScroll, t0, options) {
-	const $ = (0, react_compiler_runtime.c)(5);
-	const shouldObserve = t0 === void 0 ? true : t0;
-	const scrolledRatioMotionValue = (0, motion_react.useMotionValue)(0);
-	let t1;
-	if ($[0] !== onScroll || $[1] !== scrolledRatioMotionValue) {
-		t1 = (scrollInfo) => {
-			const { scrolledRatio } = scrollInfo;
-			scrolledRatioMotionValue.set(scrolledRatio);
-			if (onScroll) onScroll(scrollInfo);
-		};
-		$[0] = onScroll;
-		$[1] = scrolledRatioMotionValue;
-		$[2] = t1;
-	} else t1 = $[2];
-	(0, _react_scrollytelling_core.useSectionScroll)(sectionRef, t1, shouldObserve, options);
-	let t2;
-	if ($[3] !== scrolledRatioMotionValue) {
-		t2 = { scrolledRatioMotionValue };
-		$[3] = scrolledRatioMotionValue;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
-}
-
-//#endregion
-exports.useActiveSectionMotionValue = useActiveSectionMotionValue;
-exports.useSectionScrollMotionValue = useSectionScrollMotionValue;

package/dist/index.d.cts

@@ -1,31 +0,0 @@
-import * as motion_dist_react0 from "motion/dist/react";
-import { ActiveSectionObserver } from "@react-scrollytelling/grouped";
-import { IntersectionObserverOptions, SectionScrollInfo } from "@react-scrollytelling/core";
-
-//#region src/hooks/useActiveSectionMotionValue.d.ts
-/**
- * Watches for all tracked sections to find the section closet to the bottom of the viewport
- * through ScrollytellingProvider.
- * It invokes the onActiveSectionChange when the active section changes.
- * Returns the Motion value of the section scroll.
- * @param onActiveSectionChange - The callback needs to be memoized
- * @returns The trackingId of the active section and the Motion value of the section scroll
- */
-declare function useActiveSectionMotionValue(onActiveSectionChange?: ActiveSectionObserver): {
-  trackingId: string | null;
-  scrolledRatioMotionValue: motion_dist_react0.MotionValue<number>;
-};
-//#endregion
-//#region src/hooks/useSectionScrollMotionValue.d.ts
-/**
- * Get the Motion value of the section scroll
- * @param sectionRef - The reference to the section element
- * @param shouldObserve - Whether the underlying IntersectionObserver should be active
- * @param onScroll - The callback to track the scroll ratio
- */
-declare function useSectionScrollMotionValue(sectionRef: React.RefObject<Element>, onScroll?: (scrollInfo: SectionScrollInfo) => void, shouldObserve?: boolean, options?: IntersectionObserverOptions): {
-  scrolledRatioMotionValue: motion_dist_react0.MotionValue<number>;
-};
-//#endregion
-export { useActiveSectionMotionValue, useSectionScrollMotionValue };
-//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/hooks/useActiveSectionMotionValue.ts","../src/hooks/useSectionScrollMotionValue.ts"],"mappings":";;;;;;;;;AAiBA;;;;iBAAgB,2BAAA,CACd,qBAAA,GAAwB,qBAAA;;4BAAqB,kBAAA,CAAA,WAAA;AAAA;;;;;;;AAD/C;;iBCFgB,2BAAA,CACd,UAAA,EAAY,KAAA,CAAM,SAAA,CAAU,OAAA,GAC5B,QAAA,IAAY,UAAA,EAAY,iBAAA,WACxB,aAAA,YACA,OAAA,GAAU,2BAAA;4BAA2B,kBAAA,CAAA,WAAA;AAAA"}