gsap-react-marquee 0.2.4 → 0.2.6

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r=require("react"),n=require("@gsap/react"),a=require("gsap"),o=require("gsap/all"),i=require("clsx"),s=require("tailwind-merge"),l={exports:{}},c={},u={};"production"===process.env.NODE_ENV?l.exports=function(){if(e)return c;e=1;var t=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(e,r,n){var a=null;if(void 0!==n&&(a=""+n),void 0!==r.key&&(a=""+r.key),"key"in r)for(var o in n={},r)"key"!==o&&(n[o]=r[o]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:a,ref:void 0!==r?r:null,props:n}}return c.Fragment=r,c.jsx=n,c.jsxs=n,c}():l.exports=(t||(t=1,"production"!==process.env.NODE_ENV&&function(){function e(t){if(null==t)return null;if("function"==typeof t)return t.$$typeof===O?null:t.displayName||t.name||null;if("string"==typeof t)return t;switch(t){case m:return"Fragment";case y:return"Profiler";case g:return"StrictMode";case w:return"Suspense";case x:return"SuspenseList";case _:return"Activity"}if("object"==typeof t)switch(t.tag,t.$$typeof){case p:return"Portal";case v:return(t.displayName||"Context")+".Provider";case h:return(t._context.displayName||"Context")+".Consumer";case b:var r=t.render;return(t=t.displayName)||(t=""!==(t=r.displayName||r.name||"")?"ForwardRef("+t+")":"ForwardRef"),t;case S:return null!==(r=t.displayName||null)?r:e(t.type)||"Memo";case k:r=t._payload,t=t._init;try{return e(t(r))}catch(e){}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,a="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),t(e)}}function a(t){if(t===m)return"<>";if("object"==typeof t&&null!==t&&t.$$typeof===k)return"<...>";try{var r=e(t);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function i(){var t=e(this.type);return T[t]||(T[t]=!0),void 0!==(t=this.props.ref)?t:null}function s(t,r,a,o,s,u,f,p){var m,g=r.children;if(void 0!==g)if(o){if(P(g)){for(o=0;o<g.length;o++)l(g[o]);Object.freeze&&Object.freeze(g)}}else l(g);if(N.call(r,"key")){g=e(t);var y=Object.keys(r).filter(function(e){return"key"!==e});o=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",R[g+o]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",R[g+o]=!0)}if(g=null,void 0!==a&&(n(a),g=""+a),function(e){if(N.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),g=""+r.key),"key"in r)for(var h in a={},r)"key"!==h&&(a[h]=r[h]);else a=r;return g&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(a,"function"==typeof t&&(t.displayName||t.name)),function(e,t,r,n,a,o,s,l){return r=o.ref,e={$$typeof:d,type:e,key:t,props:o,_owner:a},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(t,g,u,0,null===(m=j.A)?null:m.getOwner(),a,f,p)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===d&&e._store&&(e._store.validated=1)}var c,f=r,d=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),m=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),h=Symbol.for("react.consumer"),v=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),O=Symbol.for("react.client.reference"),j=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,P=Array.isArray,C=console.createTask?console.createTask:function(){return null},T={},q=(f={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(f,o)(),E=C(a(o)),R={};u.Fragment=m,u.jsx=function(e,t,r,n,o){var i=1e4>j.recentlyCreatedOwnerStacks++;return s(e,t,r,!1,0,o,i?Error("react-stack-top-frame"):q,i?C(a(e)):E)},u.jsxs=function(e,t,r,n,o){var i=1e4>j.recentlyCreatedOwnerStacks++;return s(e,t,r,!0,0,o,i?Error("react-stack-top-frame"):q,i?C(a(e)):E)}}()),u);var f=l.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.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}');const d=(...e)=>s.twMerge(i.clsx(e)),p=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},m=(e,t,r,n,o)=>{const{spacing:i=16,alignRotationWithY:s=!1}=o;if(a.set(e,{gap:`${i}px`,rotate:n?90:"0"}),n){const t=e.parentNode;a.set(e,{width:t.offsetHeight}),a.set(r,{overflow:"visible"})}if(s&&t.length>0){const n=t[0].offsetHeight;a.set(e,{alignItems:"center"}),a.set(r,{rotate:-90,x:(e.offsetWidth-i)/2-i,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),a.set(t,{height:e.offsetWidth-i})}},g=e=>{if(e.style.width&&"auto"!==e.style.width)return!0;const t=window.getComputedStyle(e).width;if("auto"===t||!t)return!1;const r=e.parentElement;if(r){const e=window.getComputedStyle(r);if("100%"===t&&"auto"===e.width)return!1}return!0},y=(e,t)=>g(e)?t?e.offsetHeight:e.offsetWidth:t?window.innerHeight:window.innerWidth,h=(e,t,r,n,a)=>{if(!n.fill)return 1;let o;o=a?y(a,r):t>0?r?window.innerHeight:t:r?window.innerHeight:window.innerWidth;const i=e<o?Math.ceil(o/e):1;return Math.min(i,15)},v=(e,t,r,n,a)=>{const{fill:o=!1,alignRotationWithY:i=!1}=a;return o&&n&&i?`${e[0].offsetHeight}px`:o?"auto":i&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":`${t}px`},b=(e,t,r,n,i,s,l)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:d=!1,alignRotationWithY:p=!1}=l,m=[],g=[],y=e.length-1;a.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(a.getProperty(t,"width","px")));return g[e]=parseFloat(String(a.getProperty(t,"x","px")))/r*100+Number(a.getProperty(t,"xPercent")),g[e]}}),a.set(e,{x:0});const h=e[y].offsetLeft+g[y]/100*m[y]-t+e[y].offsetWidth+c;if(e.forEach((e,n)=>{const a=g[n]/100*m[n],o=e.offsetLeft+a-t,i=p?o+e.offsetHeight-c:o+m[n];r.to(e,{xPercent:(a-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(a-i+h)/m[n]*100},{xPercent:g[n],duration:(a-i+h-a)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(d)return void r.pause();r.progress(1).pause(),a.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let v;if("function"==typeof o.Draggable&&l.draggable){v=document.createElement("div");const e=a.utils.wrap(0,1);let t,l;const c=()=>{const n=s?u.startY-u.y:u.startX-u.x;r.progress(e(l+n*t))};o.InertiaPlugin;const u=o.Draggable.create(v,{trigger:i,type:s?"y":"x",onPress(){a.killTweensOf(r),r.pause(),l=r.progress(),t=1/h,a.set(v,{x:l/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(d)return void r.pause();r.progress(r.progress()).pause(),a.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};a.registerPlugin(n.useGSAP,o.Observer,o.InertiaPlugin,o.Draggable);const w=r.forwardRef((e,t)=>{const{children:i,className:s,dir:l="left",loop:c=-1,paused:u=!1,fill:g=!1,followScrollDir:y=!1,scrollSpeed:w=2.5,gradient:x=!1,gradientColor:S=null,pauseOnHover:k=!1,alignRotationWithY:_=!1,spacing:O=16,speed:j=100}=e,N=r.useRef(null),P=t||N,C=r.useRef(null),[T,q]=r.useState(1),[E,R]=r.useState(null);r.useLayoutEffect(()=>{if(!x||!(null==P?void 0:P.current))return;const e=p(P.current);R(e)},[x]);const W="up"===l||"down"===l,A="down"===l||"right"===l;n.useGSAP((t,r)=>{if(!(null==C?void 0:C.current)||!P.current||!r)return;const n=null==P?void 0:P.current,i=a.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),s=a.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));if(!C.current||!s)return;const l=a.timeline({paused:u,repeat:c,defaults:{ease:"none"},onReverseComplete(){l.totalTime(l.rawTime()+100*l.duration())}});m(n,i,s,W,e);const f=n.offsetWidth,d=s[0].offsetWidth,p=s[0].offsetLeft;let x=null;const S=Math.min(4,Math.max(1.1,w));q(h(d,f,W,e,n));const _=a.utils.toArray(i).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);a.set(i,{minWidth:v(s,_,f,W,e),flex:g?"0 0 auto":"1"}),b(g?s:i,p,l,A,i,W,e),y&&(x=o.Observer.create({onChangeY(e){let t=S*(A?-1:1);e.deltaY<0&&(t*=-1),a.timeline({defaults:{ease:"none"}}).to(l,{timeScale:t*S,duration:.2,overwrite:!0}).to(l,{timeScale:t/S,duration:1},"+=0.3")}}));const O=r(()=>{l.timeScale(0)}),j=r(()=>{l.timeScale(A?-1:1)});return k&&(n.addEventListener("mouseenter",O),n.addEventListener("mouseleave",j)),()=>{n.removeEventListener("mouseenter",O),n.removeEventListener("mouseleave",j),l.kill(),null==x||x.kill()}},{dependencies:[T,l,c,u,g,y,w,x,S,k,_,O,j],revertOnUpdate:!0});const $=r.useMemo(()=>!Number.isFinite(T)||T<=0?null:Array.from({length:T},(e,t)=>f.jsx("div",{className:d("gsap-react-marquee"),children:f.jsx("div",{className:d("gsap-react-marquee-content",s),children:i})},t)),[T,s,i]);return f.jsxs("div",{ref:P,style:{"--gradient-color":S||(x&&E?E:"transparent")},className:d("gsap-react-marquee-container"),children:[f.jsx("div",{ref:C,className:d("gsap-react-marquee"),children:f.jsx("div",{className:d("gsap-react-marquee-content",s),children:i})}),$]})});w.displayName="GSAPReactMarquee",exports.calculateDuplicates=h,exports.cn=d,exports.coreAnimation=b,exports.default=w,exports.getEffectiveBackgroundColor=p,exports.getMinWidth=v,exports.getTargetWidth=y,exports.hasDefinedWidth=g,exports.setupContainerStyles=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r=require("react"),n=require("@gsap/react"),a=require("gsap"),o=require("gsap/all"),i=require("clsx"),s=require("tailwind-merge"),l={exports:{}},c={},u={};"production"===process.env.NODE_ENV?l.exports=function(){if(e)return c;e=1;var t=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(e,r,n){var a=null;if(void 0!==n&&(a=""+n),void 0!==r.key&&(a=""+r.key),"key"in r)for(var o in n={},r)"key"!==o&&(n[o]=r[o]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:a,ref:void 0!==r?r:null,props:n}}return c.Fragment=r,c.jsx=n,c.jsxs=n,c}():l.exports=(t||(t=1,"production"!==process.env.NODE_ENV&&function(){function e(t){if(null==t)return null;if("function"==typeof t)return t.$$typeof===O?null:t.displayName||t.name||null;if("string"==typeof t)return t;switch(t){case m:return"Fragment";case y:return"Profiler";case g:return"StrictMode";case w:return"Suspense";case x:return"SuspenseList";case _:return"Activity"}if("object"==typeof t)switch(t.tag,t.$$typeof){case p:return"Portal";case v:return(t.displayName||"Context")+".Provider";case h:return(t._context.displayName||"Context")+".Consumer";case b:var r=t.render;return(t=t.displayName)||(t=""!==(t=r.displayName||r.name||"")?"ForwardRef("+t+")":"ForwardRef"),t;case S:return null!==(r=t.displayName||null)?r:e(t.type)||"Memo";case k:r=t._payload,t=t._init;try{return e(t(r))}catch(e){}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,a="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),t(e)}}function a(t){if(t===m)return"<>";if("object"==typeof t&&null!==t&&t.$$typeof===k)return"<...>";try{var r=e(t);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function i(){var t=e(this.type);return P[t]||(P[t]=!0),void 0!==(t=this.props.ref)?t:null}function s(t,r,a,o,s,u,f,p){var m,g=r.children;if(void 0!==g)if(o){if(q(g)){for(o=0;o<g.length;o++)l(g[o]);Object.freeze&&Object.freeze(g)}}else l(g);if(j.call(r,"key")){g=e(t);var y=Object.keys(r).filter(function(e){return"key"!==e});o=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",A[g+o]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",A[g+o]=!0)}if(g=null,void 0!==a&&(n(a),g=""+a),function(e){if(j.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),g=""+r.key),"key"in r)for(var h in a={},r)"key"!==h&&(a[h]=r[h]);else a=r;return g&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(a,"function"==typeof t&&(t.displayName||t.name)),function(e,t,r,n,a,o,s,l){return r=o.ref,e={$$typeof:d,type:e,key:t,props:o,_owner:a},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(t,g,u,0,null===(m=E.A)?null:m.getOwner(),a,f,p)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===d&&e._store&&(e._store.validated=1)}var c,f=r,d=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),m=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),h=Symbol.for("react.consumer"),v=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),O=Symbol.for("react.client.reference"),E=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,q=Array.isArray,N=console.createTask?console.createTask:function(){return null},P={},C=(f={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(f,o)(),T=N(a(o)),A={};u.Fragment=m,u.jsx=function(e,t,r,n,o){var i=1e4>E.recentlyCreatedOwnerStacks++;return s(e,t,r,!1,0,o,i?Error("react-stack-top-frame"):C,i?N(a(e)):T)},u.jsxs=function(e,t,r,n,o){var i=1e4>E.recentlyCreatedOwnerStacks++;return s(e,t,r,!0,0,o,i?Error("react-stack-top-frame"):C,i?N(a(e)):T)}}()),u);var f=l.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.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}');const d=(...e)=>s.twMerge(i.clsx(e)),p=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},m=(e,t,r,n,o)=>{const{spacing:i=16,alignRotationWithY:s=!1}=o;if(a.set(e,{gap:`${i}px`,rotate:n?90:"0"}),a.set(t,{gap:`${i}px`}),n){const t=e.parentNode;a.set(e,{width:t.offsetHeight}),a.set(r,{overflow:"visible"})}if(s&&t.length>0){const n=t[0].offsetHeight;a.set(e,{alignItems:"center"}),a.set(r,{rotate:-90,x:(e.offsetWidth-i)/2-i,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),a.set(t,{height:e.offsetWidth-i})}},g=e=>{if(e.style.width&&"auto"!==e.style.width)return!0;const t=window.getComputedStyle(e).width;if("auto"===t||!t)return!1;const r=e.parentElement;if(r){const e=window.getComputedStyle(r);if("100%"===t&&"auto"===e.width)return!1}return!0},y=(e,t,r,n)=>{if(!n.fill)return 1;const a=r?window.innerHeight:t;return e<a?Math.ceil(a/e):1},h=(e,t,r,n,a)=>{const{fill:o=!1,alignRotationWithY:i=!1}=a;return o&&n&&i?`${e[0].offsetHeight}px`:o?"auto":i&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":t>r?`${t}px`:`${r}px`},v=(e,t,r,n,i,s,l)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:d=!1,alignRotationWithY:p=!1}=l,m=[],g=[],y=e.length-1;a.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(a.getProperty(t,"width","px")));return g[e]=parseFloat(String(a.getProperty(t,"x","px")))/r*100+Number(a.getProperty(t,"xPercent")),g[e]}}),a.set(e,{x:0});const h=e[y].offsetLeft+g[y]/100*m[y]-t+e[y].offsetWidth+c;if(e.forEach((e,n)=>{const a=g[n]/100*m[n],o=e.offsetLeft+a-t,i=p?o+e.offsetHeight-c:o+m[n];r.to(e,{xPercent:(a-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(a-i+h)/m[n]*100},{xPercent:g[n],duration:(a-i+h-a)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(d)return void r.pause();r.progress(1).pause(),a.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let v;if("function"==typeof o.Draggable&&l.draggable){v=document.createElement("div");const e=a.utils.wrap(0,1);let t,l;const c=()=>{const n=s?u.startY-u.y:u.startX-u.x;r.progress(e(l+n*t))};o.InertiaPlugin;const u=o.Draggable.create(v,{trigger:i,type:s?"y":"x",onPress(){a.killTweensOf(r),r.pause(),l=r.progress(),t=1/h,a.set(v,{x:l/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(d)return void r.pause();r.progress(r.progress()).pause(),a.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};a.registerPlugin(n.useGSAP,o.Observer,o.InertiaPlugin,o.Draggable);const b=r.forwardRef((e,t)=>{const{children:i,className:s,dir:l="left",loop:c=-1,paused:u=!1,fill:g=!1,followScrollDir:b=!1,scrollSpeed:w=2.5,gradient:x=!1,gradientColor:S=null,pauseOnHover:k=!1,alignRotationWithY:_=!1,spacing:O=16,speed:E=100}=e,j=r.useRef(null),q=t||j,N=r.useRef(null),[P,C]=r.useState(1),[T,A]=r.useState(null),[R,W]=r.useState(0);r.useLayoutEffect(()=>{if(!x||!(null==q?void 0:q.current))return;const e=p(q.current);A(e)},[x]);const $="up"===l||"down"===l,L="down"===l||"right"===l;r.useLayoutEffect(()=>{const e=q.current;if(!e)return;const t=e.querySelector(".gsap-react-marquee .gsap-react-marquee-content");let r=null;const n=()=>{null==r&&(r=requestAnimationFrame(()=>{W(e=>e+1),r=null}))},a=t?new ResizeObserver(n):null;t&&a&&a.observe(t);const o=Array.from(e.querySelectorAll("img")),i=()=>n();return o.forEach(e=>{e.complete||(e.addEventListener("load",i),e.addEventListener("error",i))}),()=>{null==a||a.disconnect(),o.forEach(e=>{e.removeEventListener("load",i),e.removeEventListener("error",i)}),null!=r&&cancelAnimationFrame(r)}},[i]),n.useGSAP((t,r)=>{if(!(null==N?void 0:N.current)||!q.current||!r)return;const n=null==q?void 0:q.current,i=a.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),s=a.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));if(!N.current||!s)return;const l=a.timeline({paused:u,repeat:c,defaults:{ease:"none"},onReverseComplete(){l.totalTime(l.rawTime()+100*l.duration())}});m(n,i,s,$,e);const f=n.offsetWidth,d=s[0].offsetWidth,p=s[0].offsetLeft;let x=null;const S=Math.min(4,Math.max(1.1,w));C(y(d,f,$,e));const _=a.utils.toArray(i).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);a.set(i,{minWidth:h(s,_/(1===P?2:P),f,$,e),flex:g?"0 0 auto":"1"}),v(g?s:i,p,l,L,i,$,e),b&&(x=o.Observer.create({onChangeY(e){let t=S*(L?-1:1);e.deltaY<0&&(t*=-1),a.timeline({defaults:{ease:"none"}}).to(l,{timeScale:t*S,duration:.2,overwrite:!0}).to(l,{timeScale:t/S,duration:1},"+=0.3")}}));const O=r(()=>{l.pause()}),E=r(()=>{L?l.reverse():l.play()});return k&&(n.addEventListener("mouseenter",O),n.addEventListener("mouseleave",E)),()=>{n.removeEventListener("mouseenter",O),n.removeEventListener("mouseleave",E),l.kill(),null==x||x.kill()}},{dependencies:[P,l,c,u,g,b,w,x,S,k,_,O,E,i,R],revertOnUpdate:!0});const D=r.useMemo(()=>!Number.isFinite(P)||P<=0?null:Array.from({length:P},(e,t)=>f.jsx("div",{className:d("gsap-react-marquee"),children:f.jsx("div",{className:d("gsap-react-marquee-content",s),children:i})},t)),[P,s,i]);return f.jsxs("div",{ref:q,style:{"--gradient-color":S||(x&&T?T:"transparent")},className:d("gsap-react-marquee-container"),children:[f.jsx("div",{ref:N,className:d("gsap-react-marquee"),children:f.jsx("div",{className:d("gsap-react-marquee-content",s),children:i})}),D]})});b.displayName="GSAPReactMarquee",exports.calculateDuplicates=y,exports.cn=d,exports.coreAnimation=v,exports.default=b,exports.getEffectiveBackgroundColor=p,exports.getMinWidth=h,exports.getTargetWidth=(e,t)=>g(e)?t?e.offsetHeight:e.offsetWidth:t?window.innerHeight:window.innerWidth,exports.hasDefinedWidth=g,exports.setupContainerStyles=m;

package/dist/index.d.ts

@@ -28,7 +28,7 @@ declare const getEffectiveBackgroundColor: (el: HTMLElement) => string;
 declare const setupContainerStyles: (containerMarquee: HTMLElement, marquees: HTMLElement[], marqueesChildren: HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
 declare const hasDefinedWidth: (element: HTMLElement) => boolean;
 declare const getTargetWidth: (containerElement: HTMLElement, isVertical: boolean) => number;
-declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps, containerElement?: HTMLElement) => number;
+declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => number;
 declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => string | number;
 declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, draggableTrigger: HTMLElement | HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
 

package/dist/index.esm.js

@@ -1 +1 @@
-import e,{forwardRef as t,useRef as r,useState as n,useLayoutEffect as o,useMemo as a}from"react";import{useGSAP as i}from"@gsap/react";import l from"gsap";import{Draggable as s,InertiaPlugin as c,Observer as u}from"gsap/all";import{clsx as f}from"clsx";import{twMerge as d}from"tailwind-merge";var p,m,y={exports:{}},g={},h={};"production"===process.env.NODE_ENV?y.exports=function(){if(p)return g;p=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var a in n={},r)"key"!==a&&(n[a]=r[a]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:o,ref:void 0!==r?r:null,props:n}}return g.Fragment=t,g.jsx=r,g.jsxs=r,g}():y.exports=(m||(m=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===j?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case p:return"Fragment";case y:return"Profiler";case m:return"StrictMode";case w:return"Suspense";case x:return"SuspenseList";case _:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case d:return"Portal";case v:return(e.displayName||"Context")+".Provider";case g:return(e._context.displayName||"Context")+".Consumer";case b:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case S:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),r(e)}}function o(e){if(e===p)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===k)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=t(this.type);return P[e]||(P[e]=!0),void 0!==(e=this.props.ref)?e:null}function l(e,r,o,a,l,u,d,p){var m,y=r.children;if(void 0!==y)if(a){if(T(y)){for(a=0;a<y.length;a++)s(y[a]);Object.freeze&&Object.freeze(y)}}else s(y);if(O.call(r,"key")){y=t(e);var g=Object.keys(r).filter(function(e){return"key"!==e});a=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",R[y+a]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",R[y+a]=!0)}if(y=null,void 0!==o&&(n(o),y=""+o),function(e){if(O.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),y=""+r.key),"key"in r)for(var h in o={},r)"key"!==h&&(o[h]=r[h]);else o=r;return y&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,o,a,l,s){return r=a.ref,e={$$typeof:f,type:e,key:t,props:a,_owner:o},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,y,u,0,null===(m=N.A)?null:m.getOwner(),o,d,p)}function s(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var c,u=e,f=Symbol.for("react.transitional.element"),d=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),v=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),j=Symbol.for("react.client.reference"),N=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,T=Array.isArray,C=console.createTask?console.createTask:function(){return null},P={},E=(u={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(u,a)(),q=C(o(a)),R={};h.Fragment=p,h.jsx=function(e,t,r,n,a){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!1,0,a,i?Error("react-stack-top-frame"):E,i?C(o(e)):q)},h.jsxs=function(e,t,r,n,a){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!0,0,a,i?Error("react-stack-top-frame"):E,i?C(o(e)):q)}}()),h);var v=y.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.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}');const b=(...e)=>d(f(e)),w=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},x=(e,t,r,n,o)=>{const{spacing:a=16,alignRotationWithY:i=!1}=o;if(l.set(e,{gap:`${a}px`,rotate:n?90:"0"}),n){const t=e.parentNode;l.set(e,{width:t.offsetHeight}),l.set(r,{overflow:"visible"})}if(i&&t.length>0){const n=t[0].offsetHeight;l.set(e,{alignItems:"center"}),l.set(r,{rotate:-90,x:(e.offsetWidth-a)/2-a,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),l.set(t,{height:e.offsetWidth-a})}},S=e=>{if(e.style.width&&"auto"!==e.style.width)return!0;const t=window.getComputedStyle(e).width;if("auto"===t||!t)return!1;const r=e.parentElement;if(r){const e=window.getComputedStyle(r);if("100%"===t&&"auto"===e.width)return!1}return!0},k=(e,t)=>S(e)?t?e.offsetHeight:e.offsetWidth:t?window.innerHeight:window.innerWidth,_=(e,t,r,n,o)=>{if(!n.fill)return 1;let a;a=o?k(o,r):t>0?r?window.innerHeight:t:r?window.innerHeight:window.innerWidth;const i=e<a?Math.ceil(a/e):1;return Math.min(i,15)},j=(e,t,r,n,o)=>{const{fill:a=!1,alignRotationWithY:i=!1}=o;return a&&n&&i?`${e[0].offsetHeight}px`:a?"auto":i&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":`${t}px`},N=(e,t,r,n,o,a,i)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:d=!1,alignRotationWithY:p=!1}=i,m=[],y=[],g=e.length-1;l.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(l.getProperty(t,"width","px")));return y[e]=parseFloat(String(l.getProperty(t,"x","px")))/r*100+Number(l.getProperty(t,"xPercent")),y[e]}}),l.set(e,{x:0});const h=e[g].offsetLeft+y[g]/100*m[g]-t+e[g].offsetWidth+c;if(e.forEach((e,n)=>{const o=y[n]/100*m[n],a=e.offsetLeft+o-t,i=p?a+e.offsetHeight-c:a+m[n];r.to(e,{xPercent:(o-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(o-i+h)/m[n]*100},{xPercent:y[n],duration:(o-i+h-o)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(d)return void r.pause();r.progress(1).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let v;if("function"==typeof s&&i.draggable){v=document.createElement("div");const e=l.utils.wrap(0,1);let t,i;const c=()=>{const n=a?u.startY-u.y:u.startX-u.x;r.progress(e(i+n*t))},u=s.create(v,{trigger:o,type:a?"y":"x",onPress(){l.killTweensOf(r),r.pause(),i=r.progress(),t=1/h,l.set(v,{x:i/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(d)return void r.pause();r.progress(r.progress()).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};l.registerPlugin(i,u,c,s);const O=t((e,t)=>{const{children:s,className:c,dir:f="left",loop:d=-1,paused:p=!1,fill:m=!1,followScrollDir:y=!1,scrollSpeed:g=2.5,gradient:h=!1,gradientColor:S=null,pauseOnHover:k=!1,alignRotationWithY:O=!1,spacing:T=16,speed:C=100}=e,P=r(null),E=t||P,q=r(null),[R,W]=n(1),[A,$]=n(null);o(()=>{if(!h||!(null==E?void 0:E.current))return;const e=w(E.current);$(e)},[h]);const H="up"===f||"down"===f,L="down"===f||"right"===f;i((t,r)=>{if(!(null==q?void 0:q.current)||!E.current||!r)return;const n=null==E?void 0:E.current,o=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),a=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));if(!q.current||!a)return;const i=l.timeline({paused:p,repeat:d,defaults:{ease:"none"},onReverseComplete(){i.totalTime(i.rawTime()+100*i.duration())}});x(n,o,a,H,e);const s=n.offsetWidth,c=a[0].offsetWidth,f=a[0].offsetLeft;let h=null;const v=Math.min(4,Math.max(1.1,g));W(_(c,s,H,e,n));const b=l.utils.toArray(o).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);l.set(o,{minWidth:j(a,b,s,H,e),flex:m?"0 0 auto":"1"}),N(m?a:o,f,i,L,o,H,e),y&&(h=u.create({onChangeY(e){let t=v*(L?-1:1);e.deltaY<0&&(t*=-1),l.timeline({defaults:{ease:"none"}}).to(i,{timeScale:t*v,duration:.2,overwrite:!0}).to(i,{timeScale:t/v,duration:1},"+=0.3")}}));const w=r(()=>{i.timeScale(0)}),S=r(()=>{i.timeScale(L?-1:1)});return k&&(n.addEventListener("mouseenter",w),n.addEventListener("mouseleave",S)),()=>{n.removeEventListener("mouseenter",w),n.removeEventListener("mouseleave",S),i.kill(),null==h||h.kill()}},{dependencies:[R,f,d,p,m,y,g,h,S,k,O,T,C],revertOnUpdate:!0});const F=a(()=>!Number.isFinite(R)||R<=0?null:Array.from({length:R},(e,t)=>v.jsx("div",{className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})},t)),[R,c,s]);return v.jsxs("div",{ref:E,style:{"--gradient-color":S||(h&&A?A:"transparent")},className:b("gsap-react-marquee-container"),children:[v.jsx("div",{ref:q,className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})}),F]})});O.displayName="GSAPReactMarquee";export{_ as calculateDuplicates,b as cn,N as coreAnimation,O as default,w as getEffectiveBackgroundColor,j as getMinWidth,k as getTargetWidth,S as hasDefinedWidth,x as setupContainerStyles};
+import e,{forwardRef as t,useRef as r,useState as n,useLayoutEffect as o,useMemo as a}from"react";import{useGSAP as i}from"@gsap/react";import l from"gsap";import{Draggable as s,InertiaPlugin as c,Observer as u}from"gsap/all";import{clsx as f}from"clsx";import{twMerge as p}from"tailwind-merge";var d,m,y={exports:{}},g={},h={};"production"===process.env.NODE_ENV?y.exports=function(){if(d)return g;d=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var a in n={},r)"key"!==a&&(n[a]=r[a]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:o,ref:void 0!==r?r:null,props:n}}return g.Fragment=t,g.jsx=r,g.jsxs=r,g}():y.exports=(m||(m=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===O?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case d:return"Fragment";case y:return"Profiler";case m:return"StrictMode";case w:return"Suspense";case x:return"SuspenseList";case _:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case p:return"Portal";case v:return(e.displayName||"Context")+".Provider";case g:return(e._context.displayName||"Context")+".Consumer";case b:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case S:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),r(e)}}function o(e){if(e===d)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===k)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=t(this.type);return q[e]||(q[e]=!0),void 0!==(e=this.props.ref)?e:null}function l(e,r,o,a,l,u,p,d){var m,y=r.children;if(void 0!==y)if(a){if(E(y)){for(a=0;a<y.length;a++)s(y[a]);Object.freeze&&Object.freeze(y)}}else s(y);if(N.call(r,"key")){y=t(e);var g=Object.keys(r).filter(function(e){return"key"!==e});a=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",A[y+a]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",A[y+a]=!0)}if(y=null,void 0!==o&&(n(o),y=""+o),function(e){if(N.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),y=""+r.key),"key"in r)for(var h in o={},r)"key"!==h&&(o[h]=r[h]);else o=r;return y&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,o,a,l,s){return r=a.ref,e={$$typeof:f,type:e,key:t,props:a,_owner:o},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,y,u,0,null===(m=j.A)?null:m.getOwner(),o,p,d)}function s(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var c,u=e,f=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),v=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),O=Symbol.for("react.client.reference"),j=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,E=Array.isArray,T=console.createTask?console.createTask:function(){return null},q={},C=(u={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(u,a)(),P=T(o(a)),A={};h.Fragment=d,h.jsx=function(e,t,r,n,a){var i=1e4>j.recentlyCreatedOwnerStacks++;return l(e,t,r,!1,0,a,i?Error("react-stack-top-frame"):C,i?T(o(e)):P)},h.jsxs=function(e,t,r,n,a){var i=1e4>j.recentlyCreatedOwnerStacks++;return l(e,t,r,!0,0,a,i?Error("react-stack-top-frame"):C,i?T(o(e)):P)}}()),h);var v=y.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.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}');const b=(...e)=>p(f(e)),w=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},x=(e,t,r,n,o)=>{const{spacing:a=16,alignRotationWithY:i=!1}=o;if(l.set(e,{gap:`${a}px`,rotate:n?90:"0"}),l.set(t,{gap:`${a}px`}),n){const t=e.parentNode;l.set(e,{width:t.offsetHeight}),l.set(r,{overflow:"visible"})}if(i&&t.length>0){const n=t[0].offsetHeight;l.set(e,{alignItems:"center"}),l.set(r,{rotate:-90,x:(e.offsetWidth-a)/2-a,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),l.set(t,{height:e.offsetWidth-a})}},S=e=>{if(e.style.width&&"auto"!==e.style.width)return!0;const t=window.getComputedStyle(e).width;if("auto"===t||!t)return!1;const r=e.parentElement;if(r){const e=window.getComputedStyle(r);if("100%"===t&&"auto"===e.width)return!1}return!0},k=(e,t)=>S(e)?t?e.offsetHeight:e.offsetWidth:t?window.innerHeight:window.innerWidth,_=(e,t,r,n)=>{if(!n.fill)return 1;const o=r?window.innerHeight:t;return e<o?Math.ceil(o/e):1},O=(e,t,r,n,o)=>{const{fill:a=!1,alignRotationWithY:i=!1}=o;return a&&n&&i?`${e[0].offsetHeight}px`:a?"auto":i&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":t>r?`${t}px`:`${r}px`},j=(e,t,r,n,o,a,i)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:p=!1,alignRotationWithY:d=!1}=i,m=[],y=[],g=e.length-1;l.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(l.getProperty(t,"width","px")));return y[e]=parseFloat(String(l.getProperty(t,"x","px")))/r*100+Number(l.getProperty(t,"xPercent")),y[e]}}),l.set(e,{x:0});const h=e[g].offsetLeft+y[g]/100*m[g]-t+e[g].offsetWidth+c;if(e.forEach((e,n)=>{const o=y[n]/100*m[n],a=e.offsetLeft+o-t,i=d?a+e.offsetHeight-c:a+m[n];r.to(e,{xPercent:(o-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(o-i+h)/m[n]*100},{xPercent:y[n],duration:(o-i+h-o)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(p)return void r.pause();r.progress(1).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let v;if("function"==typeof s&&i.draggable){v=document.createElement("div");const e=l.utils.wrap(0,1);let t,i;const c=()=>{const n=a?u.startY-u.y:u.startX-u.x;r.progress(e(i+n*t))},u=s.create(v,{trigger:o,type:a?"y":"x",onPress(){l.killTweensOf(r),r.pause(),i=r.progress(),t=1/h,l.set(v,{x:i/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(p)return void r.pause();r.progress(r.progress()).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};l.registerPlugin(i,u,c,s);const N=t((e,t)=>{const{children:s,className:c,dir:f="left",loop:p=-1,paused:d=!1,fill:m=!1,followScrollDir:y=!1,scrollSpeed:g=2.5,gradient:h=!1,gradientColor:S=null,pauseOnHover:k=!1,alignRotationWithY:N=!1,spacing:E=16,speed:T=100}=e,q=r(null),C=t||q,P=r(null),[A,R]=n(1),[$,W]=n(null),[L,F]=n(0);o(()=>{if(!h||!(null==C?void 0:C.current))return;const e=w(C.current);W(e)},[h]);const H="up"===f||"down"===f,z="down"===f||"right"===f;o(()=>{const e=C.current;if(!e)return;const t=e.querySelector(".gsap-react-marquee .gsap-react-marquee-content");let r=null;const n=()=>{null==r&&(r=requestAnimationFrame(()=>{F(e=>e+1),r=null}))},o=t?new ResizeObserver(n):null;t&&o&&o.observe(t);const a=Array.from(e.querySelectorAll("img")),i=()=>n();return a.forEach(e=>{e.complete||(e.addEventListener("load",i),e.addEventListener("error",i))}),()=>{null==o||o.disconnect(),a.forEach(e=>{e.removeEventListener("load",i),e.removeEventListener("error",i)}),null!=r&&cancelAnimationFrame(r)}},[s]),i((t,r)=>{if(!(null==P?void 0:P.current)||!C.current||!r)return;const n=null==C?void 0:C.current,o=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),a=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));if(!P.current||!a)return;const i=l.timeline({paused:d,repeat:p,defaults:{ease:"none"},onReverseComplete(){i.totalTime(i.rawTime()+100*i.duration())}});x(n,o,a,H,e);const s=n.offsetWidth,c=a[0].offsetWidth,f=a[0].offsetLeft;let h=null;const v=Math.min(4,Math.max(1.1,g));R(_(c,s,H,e));const b=l.utils.toArray(o).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);l.set(o,{minWidth:O(a,b/(1===A?2:A),s,H,e),flex:m?"0 0 auto":"1"}),j(m?a:o,f,i,z,o,H,e),y&&(h=u.create({onChangeY(e){let t=v*(z?-1:1);e.deltaY<0&&(t*=-1),l.timeline({defaults:{ease:"none"}}).to(i,{timeScale:t*v,duration:.2,overwrite:!0}).to(i,{timeScale:t/v,duration:1},"+=0.3")}}));const w=r(()=>{i.pause()}),S=r(()=>{z?i.reverse():i.play()});return k&&(n.addEventListener("mouseenter",w),n.addEventListener("mouseleave",S)),()=>{n.removeEventListener("mouseenter",w),n.removeEventListener("mouseleave",S),i.kill(),null==h||h.kill()}},{dependencies:[A,f,p,d,m,y,g,h,S,k,N,E,T,s,L],revertOnUpdate:!0});const Y=a(()=>!Number.isFinite(A)||A<=0?null:Array.from({length:A},(e,t)=>v.jsx("div",{className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})},t)),[A,c,s]);return v.jsxs("div",{ref:C,style:{"--gradient-color":S||(h&&$?$:"transparent")},className:b("gsap-react-marquee-container"),children:[v.jsx("div",{ref:P,className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})}),Y]})});N.displayName="GSAPReactMarquee";export{_ as calculateDuplicates,b as cn,j as coreAnimation,N as default,w as getEffectiveBackgroundColor,O as getMinWidth,k as getTargetWidth,S as hasDefinedWidth,x as setupContainerStyles};

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

@@ -5,6 +5,6 @@ export declare const getEffectiveBackgroundColor: (el: HTMLElement) => string;
 export declare const setupContainerStyles: (containerMarquee: HTMLElement, marquees: HTMLElement[], marqueesChildren: HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
 export declare const hasDefinedWidth: (element: HTMLElement) => boolean;
 export declare const getTargetWidth: (containerElement: HTMLElement, isVertical: boolean) => number;
-export declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps, containerElement?: HTMLElement) => number;
+export declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => number;
 export declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => string | number;
 export declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, draggableTrigger: HTMLElement | HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;

package/package.json

@@ -3,7 +3,7 @@
   "author": "David Domenico Piscopo",
   "description": "A high-performance React marquee component powered by GSAP",
   "license": "MIT",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",