gsap-react-marquee 0.1.4 → 0.1.7

package/README.md

@@ -45,4 +45,4 @@ function App() {
 | `spacing`            | `number`                              | `16`      | Spacing between repeated elements in px                                                 |
 | `draggable`          | `boolean`                             | `false`   | Enable dragging to scroll manually                                                      |
 | `followScrollDir`    | `boolean`                             | `false`   | Sync marquee with page scroll direction                                                 |
-| `scrollSpeed`        | `number`                              | –         | Speed factor when syncing with page scroll                                              |
+| `scrollSpeed`        | `number`                              | `2.5`     | Speed factor when syncing with page scroll                                              |

package/dist/components/gsap-reactmarquee.utils.d.ts

@@ -11,6 +11,32 @@ import type { GSAPReactMarqueeProps } from "./gsap-react-marquee.type";
  * @returns Merged and deduplicated class string
  */
 export 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"
+ */
+export declare const getEffectiveBackgroundColor: (el: HTMLElement) => string;
 /**
  * Sets up container styles and rotation handling for the marquee
  *
@@ -65,7 +91,7 @@ export declare const calculateDuplicates: (marqueeChildrenWidth: number, contain
  */
 export 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
@@ -76,16 +102,20 @@ export declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth:
  * 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
  */
-export declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, props: GSAPReactMarqueeProps) => void;
+export declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, draggableTrigger: HTMLElement | HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;

package/dist/index.cjs.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}