gsap-react-marquee 0.1.0 → 0.1.3

package/dist/index.d.ts

@@ -111,14 +111,10 @@ declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqu
  * Determines the minimum width for marquee elements
  */
 declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, props: GSAPReactMarqueeProps) => string | number;
-/**
- * Creates a simple infinite marquee animation
- */
-declare const simpleAnimation: (marquees: HTMLElement[], marqueeChildrenDimension: number, isReverse: boolean, props: GSAPReactMarqueeProps) => void;
 /**
  * Creates a complex fill-based marquee animation with seamless looping
  */
-declare const fillAnimation: (marqueesChildren: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, props: GSAPReactMarqueeProps) => void;
+declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, props: GSAPReactMarqueeProps) => void;
 
-export { GSAPReactMarquee, calculateDuplicates, cn, fillAnimation, getMinWidth, setupContainerStyles, simpleAnimation };
+export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getMinWidth, setupContainerStyles };
 export type { GSAPReactMarqueeProps };

package/dist/index.esm.js

@@ -2931,7 +2931,13 @@ const setupContainerStyles = (containerMarquee, marquees, marqueesChildren, isVe
         rotate: isVertical ? 90 : "0",
     });
     if (isVertical) {
-        gsap.set(containerMarquee, { width: window.innerHeight });
+        const parent = containerMarquee.parentNode;
+        gsap.set(containerMarquee, {
+            width: parent.offsetHeight,
+        });
+        gsap.set(marqueesChildren, {
+            overflow: "visible",
+        });
     }
     if (alignRotationWithY && marquees.length > 0) {
         const marqueeHeight = marquees[0].offsetHeight;
@@ -2940,12 +2946,16 @@ const setupContainerStyles = (containerMarquee, marquees, marqueesChildren, isVe
         });
         gsap.set(marqueesChildren, {
             rotate: -90,
+            x: (containerMarquee.offsetWidth - spacing) / 2 - spacing,
             display: "flex",
             flexWrap: "wrap",
             width: marqueeHeight,
             wordBreak: "break-all",
             whiteSpace: "break-spaces",
         });
+        gsap.set(marquees, {
+            height: containerMarquee.offsetWidth - spacing,
+        });
     }
 };
 /**
@@ -2973,37 +2983,16 @@ const getMinWidth = (marqueesChildren, totalWidth, containerMarqueeWidth, props)
         return "100%";
     return `${totalWidth}px`;
 };
-/**
- * Creates a simple infinite marquee animation
- */
-const simpleAnimation = (marquees, marqueeChildrenDimension, isReverse, props) => {
-    const { spacing = 16, speed = 100, loop = -1 } = props;
-    const tween = gsap.to(marquees, {
-        xPercent: (_, el) => {
-            const w = parseFloat(String(gsap.getProperty(el, "width", "px")));
-            const xPercent = ((w + spacing) / w) * 100;
-            return -xPercent;
-        },
-        duration: (marqueeChildrenDimension - spacing) / speed,
-        repeat: loop,
-        ease: "none",
-    });
-    tween.play();
-    if (isReverse) {
-        tween.totalTime(tween.rawTime() + tween.duration() * 100);
-        tween.reverse();
-    }
-};
 /**
  * Creates a complex fill-based marquee animation with seamless looping
  */
-const fillAnimation = (marqueesChildren, startX, tl, isReverse, props) => {
-    const { spacing = 16, speed = 100 } = props;
+const coreAnimation = (elementsToAnimate, startX, tl, isReverse, props) => {
+    const { spacing = 16, speed = 100, delay = 0, paused = false, alignRotationWithY = false, } = props;
     const widths = [];
     const xPercents = [];
-    const latestPos = marqueesChildren.length - 1;
+    const latestPos = elementsToAnimate.length - 1;
     // Set initial positions and calculate percentages
-    gsap.set(marqueesChildren, {
+    gsap.set(elementsToAnimate, {
         xPercent: (i, el) => {
             const w = (widths[i] = parseFloat(String(gsap.getProperty(el, "width", "px"))));
             xPercents[i] =
@@ -3012,18 +3001,20 @@ const fillAnimation = (marqueesChildren, startX, tl, isReverse, props) => {
             return xPercents[i];
         },
     });
-    gsap.set(marqueesChildren, { x: 0 });
-    // Calculate the total track length for seamless looping
-    const trackLength = marqueesChildren[latestPos].offsetLeft +
+    gsap.set(elementsToAnimate, { x: 0 });
+    //Calculate the total track length for seamless looping
+    const trackLength = elementsToAnimate[latestPos].offsetLeft +
         (xPercents[latestPos] / 100) * widths[latestPos] -
         startX +
-        marqueesChildren[latestPos].offsetWidth +
+        elementsToAnimate[latestPos].offsetWidth +
         spacing;
     // Create animation timeline for each element
-    marqueesChildren.forEach((item, i) => {
+    elementsToAnimate.forEach((item, i) => {
         const curX = (xPercents[i] / 100) * widths[i];
         const distanceToStart = item.offsetLeft + curX - startX;
-        const distanceToLoop = distanceToStart + widths[i];
+        const distanceToLoop = alignRotationWithY
+            ? distanceToStart + item.offsetHeight - spacing
+            : distanceToStart + widths[i];
         tl.to(item, {
             xPercent: ((curX - distanceToLoop) / widths[i]) * 100,
             duration: distanceToLoop / speed,
@@ -3035,16 +3026,24 @@ const fillAnimation = (marqueesChildren, startX, tl, isReverse, props) => {
             immediateRender: false,
         }, distanceToLoop / speed);
     });
-    // Pre-render for performance optimization
-    tl.progress(1, true).progress(0, true);
+    tl.delay(delay);
     if (isReverse) {
-        tl.totalTime(tl.rawTime() + tl.duration() * 100);
-        tl.reverse();
+        if (paused) {
+            tl.pause();
+            return;
+        }
+        tl.progress(1).pause();
+        gsap.delayedCall(delay, () => {
+            tl.reverse();
+            tl.eventCallback("onReverseComplete", () => {
+                tl.totalTime(tl.rawTime() + tl.duration() * 100);
+            });
+        });
     }
 };
 
 const GSAPReactMarquee = forwardRef((props, ref) => {
-    const { children, className, dir = "left", loop = -1, paused = false, fill = false, alignRotationWithY, } = props;
+    const { children, className, dir = "left", loop = -1, paused = false, fill = false, } = props;
     const rootRef = useRef(null) || ref;
     const containerRef = rootRef;
     const marqueeRef = useRef(null);
@@ -3061,8 +3060,8 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
         if (!marquee || !marqueesChildren)
             return;
         const tl = gsap.timeline({
-            repeat: loop,
             paused: paused,
+            repeat: loop,
             defaults: { ease: "none" },
             onReverseComplete() {
                 // start the animation from the end, when scrolling in reverse (up)
@@ -3073,7 +3072,7 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
         setupContainerStyles(containerMarquee, marquees, marqueesChildren, isVertical, props);
         // Calculate dimensions and duplicates
         const containerMarqueeWidth = containerMarquee.offsetWidth;
-        const marqueeHeight = marquees[0].offsetHeight;
+        //   const marqueeHeight = marquees[0].offsetHeight;
         const marqueeChildrenWidth = marqueesChildren[0].offsetWidth;
         const startX = marqueesChildren[0].offsetLeft;
         setMarqueeDuplicates(calculateDuplicates(marqueeChildrenWidth, containerMarqueeWidth, isVertical, props));
@@ -3087,15 +3086,10 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
             flex: fill ? "0 0 auto" : "1",
         });
         // Create appropriate animation based on fill setting
-        if (fill) {
-            fillAnimation(marqueesChildren, startX, tl, isReverse, props);
-        }
-        else {
-            simpleAnimation(marquees, isVertical && alignRotationWithY
-                ? marqueeHeight
-                : marqueeChildrenWidth, isReverse, props);
-        }
-    }, { dependencies: [marqueeDuplicates] });
+        coreAnimation(fill ? marqueesChildren : marquees, startX, tl, isReverse, props);
+    }, {
+        dependencies: [marqueeDuplicates],
+    });
     const clonedMarquees = useMemo(() => {
         if (!Number.isFinite(marqueeDuplicates) || marqueeDuplicates <= 0)
             return null;
@@ -3105,5 +3099,5 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
 });
 GSAPReactMarquee.displayName = "GSAPReactMarquee";
 
-export { GSAPReactMarquee, calculateDuplicates, cn, fillAnimation, getMinWidth, setupContainerStyles, simpleAnimation };
+export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getMinWidth, setupContainerStyles };
 //# sourceMappingURL=index.esm.js.map