gsap-react-marquee 0.1.7 → 0.1.8

package/dist/index.esm.js

@@ -7898,9 +7898,9 @@ const coreAnimation = (elementsToAnimate, startX, tl, isReverse, draggableTrigge
 
 gsap$4.registerPlugin(useGSAP, Observer, InertiaPlugin, Draggable);
 const GSAPReactMarquee = forwardRef((props, ref) => {
-    const { children, className, dir = "left", loop = -1, paused = false, fill = false, followScrollDir = false, scrollSpeed = 2.5, gradient = false, gradientColor = null, } = props;
-    const rootRef = useRef(null) || ref;
-    const containerRef = rootRef;
+    const { children, className, dir = "left", loop = -1, paused = false, fill = false, followScrollDir = false, scrollSpeed = 2.5, gradient = false, gradientColor = null, pauseOnHover = false, } = props;
+    const rootRef = useRef(null);
+    const containerRef = ref || rootRef;
     const marqueeRef = useRef(null);
     const [marqueeDuplicates, setMarqueeDuplicates] = useState(1);
     const [effectivelyGradient, setEffectivelyGradient] = useState(null);
@@ -7912,8 +7912,8 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
     }, [gradient]);
     const isVertical = dir === "up" || dir === "down";
     const isReverse = dir === "down" || dir === "right";
-    useGSAP(() => {
-        if (!(marqueeRef === null || marqueeRef === void 0 ? void 0 : marqueeRef.current) || !containerRef.current)
+    useGSAP((_, contextSafe) => {
+        if (!(marqueeRef === null || marqueeRef === void 0 ? void 0 : marqueeRef.current) || !containerRef.current || !contextSafe)
             return;
         const containerMarquee = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
         const marquees = gsap$4.utils.toArray(containerMarquee.querySelectorAll(".gsap-react-marquee"));
@@ -7936,6 +7936,7 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
         const containerMarqueeWidth = containerMarquee.offsetWidth;
         const marqueeChildrenWidth = marqueesChildren[0].offsetWidth;
         const startX = marqueesChildren[0].offsetLeft;
+        let obs = null;
         // Clamp scrollSpeed to valid range (1.1 to 4.0)
         const clampedScrollSpeed = Math.min(4, Math.max(1.1, scrollSpeed));
         setMarqueeDuplicates(calculateDuplicates(marqueeChildrenWidth, containerMarqueeWidth, isVertical, props));
@@ -7962,45 +7963,72 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
          * - Speed changes are smoothly animated with acceleration and deceleration phases
          * - ScrollSpeed multiplier is applied and clamped to valid range
          */
-        Observer.create({
-            onChangeY(self) {
-                if (!followScrollDir)
-                    return;
-                let factor = clampedScrollSpeed * (isReverse ? -1 : 1);
-                if (self.deltaY < 0) {
-                    factor *= -1;
-                }
-                /**
-                 * Create smooth speed transition animation
-                 *
-                 * Phase 1: Quick acceleration to new speed (0.2s)
-                 * - timeScale: Controls timeline playback speed (higher = faster)
-                 * - factor * clampedScrollSpeed: Initial speed boost for responsive feel
-                 * - overwrite: Cancels any previous speed animations
-                 *
-                 * Phase 2: Gradual deceleration to sustained speed (1s delay + 1s duration)
-                 * - factor / clampedScrollSpeed: Settle to a more moderate sustained speed
-                 * - "+=0.3": Wait 0.3 seconds before starting deceleration
-                 */
-                gsap$4
-                    .timeline({
-                    defaults: {
-                        ease: "none",
-                    },
-                })
-                    .to(tl, {
-                    timeScale: factor * clampedScrollSpeed,
-                    duration: 0.2,
-                    overwrite: true,
-                })
-                    .to(tl, {
-                    timeScale: factor / clampedScrollSpeed,
-                    duration: 1,
-                }, "+=0.3");
-            },
+        if (followScrollDir) {
+            obs = Observer.create({
+                onChangeY(self) {
+                    let factor = clampedScrollSpeed * (isReverse ? -1 : 1);
+                    if (self.deltaY < 0) {
+                        factor *= -1;
+                    }
+                    /**
+                     * Create smooth speed transition animation
+                     *
+                     * Phase 1: Quick acceleration to new speed (0.2s)
+                     * - timeScale: Controls timeline playback speed (higher = faster)
+                     * - factor * clampedScrollSpeed: Initial speed boost for responsive feel
+                     * - overwrite: Cancels any previous speed animations
+                     *
+                     * Phase 2: Gradual deceleration to sustained speed (1s delay + 1s duration)
+                     * - factor / clampedScrollSpeed: Settle to a more moderate sustained speed
+                     * - "+=0.3": Wait 0.3 seconds before starting deceleration
+                     */
+                    gsap$4
+                        .timeline({
+                        defaults: {
+                            ease: "none",
+                        },
+                    })
+                        .to(tl, {
+                        timeScale: factor * clampedScrollSpeed,
+                        duration: 0.2,
+                        overwrite: true,
+                    })
+                        .to(tl, {
+                        timeScale: factor / clampedScrollSpeed,
+                        duration: 1,
+                    }, "+=0.3");
+                },
+            });
+        }
+        const onMouseEnter = contextSafe(() => {
+            tl.timeScale(0);
+        });
+        const onMouseLeave = contextSafe(() => {
+            tl.timeScale(1);
         });
+        if (pauseOnHover) {
+            containerMarquee.addEventListener("mouseenter", onMouseEnter);
+            containerMarquee.addEventListener("mouseleave", onMouseLeave);
+        }
+        return () => {
+            containerMarquee.removeEventListener("mouseenter", onMouseEnter);
+            containerMarquee.removeEventListener("mouseleave", onMouseLeave);
+            tl.kill();
+            obs === null || obs === void 0 ? void 0 : obs.kill();
+        };
     }, {
-        dependencies: [marqueeDuplicates],
+        dependencies: [
+            marqueeDuplicates,
+            dir,
+            loop,
+            paused,
+            fill,
+            followScrollDir,
+            scrollSpeed,
+            gradient,
+            gradientColor,
+            pauseOnHover,
+        ],
     });
     const getGradientColor = () => {
         // Priority order: explicit gradientColor > auto-detected > fallback