gsap-react-marquee 0.1.4 → 0.1.7

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
  *
@@ -161,7 +187,7 @@ declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqu
  */
 declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, props: GSAPReactMarqueeProps) => string | number;
 /**
- * Creates a complex fill-based marquee animation with seamless looping
+ * Creates a complex marquee animation with seamless looping and draggable support
  *
  * This is the core animation engine that creates smooth, continuous scrolling.
  * It handles the complex math required for seamless looping by calculating
@@ -172,19 +198,23 @@ declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number,
  * 2. **Seamless Looping**: Calculate track length and loop points to prevent gaps
  * 3. **Staggered Animation**: Each element starts at different times for smooth flow
  * 4. **Direction Handling**: Support forward and reverse directions with proper timing
+ * 5. **Integrated Draggable**: Optional support for drag interaction with manual control
  *
  * Technical Details:
  * - Uses xPercent for percentage-based positioning (responsive to element width changes)
  * - Creates two-part animation: main movement + seamless loop reset
  * - Calculates precise durations based on distance and speed for consistent motion
+ * - Implements draggable with intelligent pause/resume animation handling
  *
  * @param elementsToAnimate - Array of DOM elements to animate (content or containers)
  * @param startX - Starting X position reference point
  * @param tl - GSAP timeline to add animations to
  * @param isReverse - Whether animation should play in reverse direction
+ * @param draggableTrigger - Element(s) that will trigger the draggable functionality
+ * @param isVertical - Whether the marquee scrolls vertically
  * @param props - Configuration object with spacing, speed, delay, and other settings
  */
-declare const coreAnimation: (elementsToAnimate: 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, draggableTrigger: HTMLElement | HTMLElement[], isVertical: 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%);left:0}.gsap-react-marquee-container:after,.gsap-react-marquee-container:before{content:"";height:100%;pointer-events:none;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%);right:0}.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}