gsap-react-marquee 0.1.4 → 0.1.5

package/dist/index.d.ts

@@ -107,6 +107,32 @@ declare const GSAPReactMarquee: react.ForwardRefExoticComponent<GSAPReactMarquee
  * @returns Merged and deduplicated class string
  */
 declare const cn: (...inputs: ClassValue[]) => string;
+/**
+ * Traverses the DOM tree upward to find the first non-transparent background color
+ *
+ * This function walks up the element hierarchy starting from the given element,
+ * checking each parent's computed backgroundColor style until it finds a visible
+ * (non-transparent) background color. This is useful for automatically detecting
+ * the effective background behind an element for gradient overlays.
+ *
+ * The traversal stops at the first element with a visible background color,
+ * which could be the element itself or any of its ancestors up to the document root.
+ *
+ * @param el - The HTMLElement to start the background color search from
+ * @returns The first non-transparent background color found in the hierarchy,
+ *          or "transparent" if no visible background is found
+ *
+ * @example
+ * // Element with white parent background
+ * const color = getEffectiveBackgroundColor(marqueeElement);
+ * // Returns: "rgb(255, 255, 255)" or "#ffffff"
+ *
+ * @example
+ * // Element with no background set anywhere in hierarchy
+ * const color = getEffectiveBackgroundColor(marqueeElement);
+ * // Returns: "transparent"
+ */
+declare const getEffectiveBackgroundColor: (el: HTMLElement) => string;
 /**
  * Sets up container styles and rotation handling for the marquee
  *
@@ -186,5 +212,5 @@ declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number,
  */
 declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, props: GSAPReactMarqueeProps) => void;
 
-export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getMinWidth, setupContainerStyles };
+export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getEffectiveBackgroundColor, getMinWidth, setupContainerStyles };
 export type { GSAPReactMarqueeProps };

package/dist/index.esm.css

@@ -1 +1 @@
-.gsap-react-marquee{flex:1;height:max-content;width:auto}.gsap-react-marquee,.gsap-react-marquee-content{display:flex;line-height:100%;white-space:preserve nowrap}.gsap-react-marquee-content{overflow:hidden;width:max-content}
+.gsap-react-marquee-container:after{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);content:"";height:100%;left:0;position:absolute;top:0;width:15%;z-index:10}.gsap-react-marquee-container:before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);content:"";height:100%;position:absolute;right:0;top:0;width:15%;z-index:10}.gsap-react-marquee{flex:1;height:max-content;width:auto}.gsap-react-marquee,.gsap-react-marquee-content{display:flex;line-height:100%;white-space:preserve nowrap}.gsap-react-marquee-content{overflow:hidden;width:max-content}

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import require$$0, { forwardRef, useRef, useState, useMemo } from 'react';
+import require$$0, { forwardRef, useRef, useState, useLayoutEffect, useMemo } from 'react';
 import { useGSAP } from '@gsap/react';
 import gsap$1 from 'gsap';
 
@@ -3632,6 +3632,43 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 const cn = (...inputs) => {
     return twMerge(clsx(inputs));
 };
+/**
+ * Traverses the DOM tree upward to find the first non-transparent background color
+ *
+ * This function walks up the element hierarchy starting from the given element,
+ * checking each parent's computed backgroundColor style until it finds a visible
+ * (non-transparent) background color. This is useful for automatically detecting
+ * the effective background behind an element for gradient overlays.
+ *
+ * The traversal stops at the first element with a visible background color,
+ * which could be the element itself or any of its ancestors up to the document root.
+ *
+ * @param el - The HTMLElement to start the background color search from
+ * @returns The first non-transparent background color found in the hierarchy,
+ *          or "transparent" if no visible background is found
+ *
+ * @example
+ * // Element with white parent background
+ * const color = getEffectiveBackgroundColor(marqueeElement);
+ * // Returns: "rgb(255, 255, 255)" or "#ffffff"
+ *
+ * @example
+ * // Element with no background set anywhere in hierarchy
+ * const color = getEffectiveBackgroundColor(marqueeElement);
+ * // Returns: "transparent"
+ */
+const getEffectiveBackgroundColor = (el) => {
+    let current = el;
+    while (current) {
+        const bg = window.getComputedStyle(current).backgroundColor;
+        // Check if background color is visible (not transparent or rgba(0,0,0,0))
+        if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+            return bg;
+        }
+        current = current.parentElement;
+    }
+    return "transparent"; // fallback when no visible background is found
+};
 /**
  * Sets up container styles and rotation handling for the marquee
  *
@@ -3953,11 +3990,18 @@ const coreAnimation = (elementsToAnimate, startX, tl, isReverse, props) => {
 };
 
 const GSAPReactMarquee = forwardRef((props, ref) => {
-    const { children, className, dir = "left", loop = -1, paused = false, fill = false, followScrollDir = false, scrollSpeed = 2.5, } = props;
+    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 marqueeRef = useRef(null);
     const [marqueeDuplicates, setMarqueeDuplicates] = useState(1);
+    const [effectivelyGradient, setEffectivelyGradient] = useState(null);
+    useLayoutEffect(() => {
+        if (!gradient || !(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+            return;
+        const effectiveBg = getEffectiveBackgroundColor(containerRef.current);
+        setEffectivelyGradient(effectiveBg);
+    }, [gradient]);
     const isVertical = dir === "up" || dir === "down";
     const isReverse = dir === "down" || dir === "right";
     useGSAP(() => {
@@ -4047,6 +4091,16 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
     }, {
         dependencies: [marqueeDuplicates],
     });
+    const getGradientColor = () => {
+        // Priority order: explicit gradientColor > auto-detected > fallback
+        if (gradientColor) {
+            return gradientColor; // User-specified color takes precedence
+        }
+        if (gradient && effectivelyGradient) {
+            return effectivelyGradient; // Auto-detected background color
+        }
+        return "transparent"; // Default fallback
+    };
     /**
      * Generate cloned marquee elements for seamless looping
      *
@@ -4059,9 +4113,11 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
             return null;
         return Array.from({ length: marqueeDuplicates }, (_, i) => (jsxRuntimeExports.jsx("div", { className: cn("gsap-react-marquee"), children: jsxRuntimeExports.jsx("div", { className: cn("gsap-react-marquee-content", className), children: children }) }, i)));
     }, [marqueeDuplicates, className, children]);
-    return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: cn("gsap-react-marquee-container flex w-full overflow-hidden whitespace-nowrap"), children: [jsxRuntimeExports.jsx("div", { ref: marqueeRef, className: cn("gsap-react-marquee"), children: jsxRuntimeExports.jsx("div", { className: cn("gsap-react-marquee-content", className), children: children }) }), clonedMarquees] }));
+    return (jsxRuntimeExports.jsxs("div", { ref: containerRef, style: {
+            "--gradient-color": getGradientColor(),
+        }, className: cn("gsap-react-marquee-container flex w-full overflow-hidden whitespace-nowrap"), children: [jsxRuntimeExports.jsx("div", { ref: marqueeRef, className: cn("gsap-react-marquee"), children: jsxRuntimeExports.jsx("div", { className: cn("gsap-react-marquee-content", className), children: children }) }), clonedMarquees] }));
 });
 GSAPReactMarquee.displayName = "GSAPReactMarquee";
 
-export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getMinWidth, setupContainerStyles };
+export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getEffectiveBackgroundColor, getMinWidth, setupContainerStyles };
 //# sourceMappingURL=index.esm.js.map