gsap-react-marquee 0.1.5 → 0.1.7

package/dist/index.d.ts

@@ -187,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
@@ -198,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, getEffectiveBackgroundColor, getMinWidth, setupContainerStyles };
 export type { GSAPReactMarqueeProps };

package/dist/index.esm.css

@@ -1 +1 @@
-.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}
+.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}