react-gsap-animation-library/dist/index.esm.js

A comprehensive React component library that leverages GSAP for animations with official GSAP-React integration

import e,{useState as t,useEffect as n,useContext as r,useLayoutEffect as o,createContext as i,useRef as a}from"react";import c from"gsap";import{useGSAP as l}from"@gsap/react";import s from"gsap/ScrollTrigger";function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function d(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(){return f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},f.apply(null,arguments)}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function v(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,c=[],l=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(c.push(r.value),c.length!==t);l=!0);}catch(e){s=!0,o=e}finally{try{if(!l&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw o}}return c}}(e,t)||function(e,t){if(e){if("string"==typeof e)return u(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}if("undefined"!=typeof window)try{c.registerPlugin(l,s)}catch(e){console.warn("GSAP plugin registration failed:",e)}var g="undefined"!=typeof window?o:n,b={defaultDuration:.8,defaultEase:"power3.out",defaultDelay:0,defaultStagger:.1,disableAllAnimations:!1,disableScrollAnimations:!1,animationQuality:"high"},h=i(b),w=function(r){var o=r.children,i=r.settings,a=void 0===i?{}:i,u=y(t(m(m({},b),a)),2),d=u[0],f=u[1],p=function(e){f((function(t){return m(m({},t),e)}))};g((function(){if("undefined"!=typeof window)try{c.registerPlugin(l,s),c.defaults({ease:d.defaultEase,duration:d.defaultDuration,overwrite:"auto"})}catch(e){console.warn("GSAP initialization failed:",e)}}),[d.defaultEase,d.defaultDuration]),n((function(){if("undefined"!=typeof window){var e=window.matchMedia("(prefers-reduced-motion: reduce)");e.matches&&p({disableAllAnimations:!0,disableScrollAnimations:!0});var t=function(e){p({disableAllAnimations:e.matches,disableScrollAnimations:e.matches})};try{return e.addEventListener("change",t),function(){return e.removeEventListener("change",t)}}catch(n){try{return e.addListener(t),function(){return e.removeListener(t)}}catch(e){}}}}),[]),n((function(){if("undefined"!=typeof navigator&&"getBattery"in navigator)try{navigator.getBattery().then((function(e){e.level<.2&&!e.charging&&p({animationQuality:"low"}),e.addEventListener("levelchange",(function(){e.level<.2&&!e.charging?p({animationQuality:"low"}):(e.level>.5||e.charging)&&p({animationQuality:"high"})}))}))}catch(e){console.warn("Battery status detection failed:",e)}}),[]);var v=m(m({},d),{},{updateSettings:p});return e.createElement(h.Provider,{value:v},o)},k=function(){var e=r(h);if(void 0===e)throw new Error("useAnimationSettings must be used within an AnimationProvider");return e};if("undefined"!=typeof window)try{c.registerPlugin(l,s)}catch(e){console.warn("GSAP plugin registration failed:",e)}var A=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=k().disableAllAnimations,n=e.scope||a(null),r=l({scope:n}),o=r.contextSafe,i=r.context,s=r.revert,u=r.kill;return{containerRef:n,contextSafe:o,timeline:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t?c.timeline():c.timeline(e,i)},tween:function(e,n){return t?{kill:function(){}}:c.to(e,n,i)},add:function(e,n,r){return t?e:e.add(n,r)},context:i,revert:s,kill:u}},x=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.effect,r=void 0===n?"fadeIn":n,o=t.direction,i=void 0===o?"up":o,a=t.distance,u=void 0===a?30:a,d=t.duration,f=void 0===d?.8:d,p=t.delay,v=void 0===p?0:p,y=t.ease,g=void 0===y?"power3.out":y,b=t.trigger,h=void 0===b?"scroll":b,w=t.threshold,A=void 0===w?.2:w,x=t.onComplete,C=k(),S=C.disableAllAnimations,O=C.disableScrollAnimations;return l((function(){if(!(null==e||!e.current||S||"scroll"===h&&O)){var t;switch(r){case"fadeIn":var n={opacity:0};"up"===i?n.y=u:"down"===i?n.y=-u:"left"===i?n.x=u:"right"===i&&(n.x=-u),t=c.from(e.current,m(m({},n),{},{duration:f,delay:v,ease:g,onComplete:x,clearProps:"all"}));break;case"fadeOut":var o={opacity:0};"up"===i?o.y=-u:"down"===i?o.y=u:"left"===i?o.x=-u:"right"===i&&(o.x=u),t=c.to(e.current,m(m({},o),{},{duration:f,delay:v,ease:g,onComplete:x}));break;case"slideIn":var a={};"up"===i?a.y=u:"down"===i?a.y=-u:"left"===i?a.x=-u:"right"===i&&(a.x=u),c.set(e.current,m(m({},a),{},{opacity:0})),t=c.to(e.current,m(m({},{opacity:1}),{},{x:0,y:0,duration:f,delay:v,ease:g,onComplete:x,clearProps:"all"}));break;default:return void console.warn("Unknown animation effect: ".concat(r))}"scroll"!==h||O||(t.pause(),s.create({trigger:e.current,start:"top bottom-=".concat(100*A,"%"),onEnter:function(){return t.play()},once:!0}))}}),{scope:e,dependencies:[r,i,u,f,v,g,h,A,S,O]}),{ref:e}},C=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.animation,r=t.initial,o=t.start,i=void 0===o?"top bottom-=10%":o,a=t.end,u=void 0===a?"bottom top+=10%":a,d=t.scrub,f=void 0!==d&&d,p=t.markers,m=void 0!==p&&p,v=t.pin,y=void 0!==v&&v,g=t.toggleActions,b=void 0===g?"play none none reset":g,h=t.onEnter,w=t.onLeave,A=t.onEnterBack,x=t.onLeaveBack,C=k(),S=C.disableAllAnimations,O=C.disableScrollAnimations;return l((function(){var t;null==e||!e.current||S||O||(r&&c.set(e.current,r),t="function"==typeof n?n(e.current):n?c.to(e.current,n):c.to(e.current,{opacity:1,y:0,duration:1}),f||t.pause(),s.create({trigger:e.current,start:i,end:u,markers:m,scrub:f,pin:y,toggleActions:b,onEnter:h||(f?null:function(){return t.play()}),onLeave:w,onEnterBack:A,onLeaveBack:x}))}),{scope:e,dependencies:[JSON.stringify(n),JSON.stringify(r),i,u,f,m,y,b,S,O]}),{ref:e}},S=["children","duration","delay","ease","direction","trigger","threshold","onStart","onComplete","className","style"],O=function(t){var n=t.children,r=t.duration,o=void 0===r?.8:r,i=t.delay,u=void 0===i?0:i,d=t.ease,f=void 0===d?"power3.out":d,p=t.direction,y=void 0===p?"up":p,g=t.trigger,b=void 0===g?"scroll":g,h=t.threshold,w=void 0===h?.2:h,A=t.onStart,x=void 0===A?function(){}:A,C=t.onComplete,O=void 0===C?function(){}:C,E=t.className,z=void 0===E?"":E,I=t.style,P=void 0===I?{}:I,j=v(t,S),N=a(null),T=k(),L=T.disableAllAnimations,B=T.disableScrollAnimations,D=function(){var e={opacity:0};switch(y){case"up":default:return m(m({},e),{},{y:30});case"down":return m(m({},e),{},{y:-30});case"left":return m(m({},e),{},{x:30});case"right":return m(m({},e),{},{x:-30});case"none":return e}},R=(0,l((function(){if(N.current){if(!(L||"scroll"===b&&B)){if("load"===b||"scroll"===b){var e=D(),t=c.from(N.current,m(m({},e),{},{duration:o,delay:u,ease:f,onStart:x,onComplete:O,paused:"scroll"===b}));"scroll"!==b||B?"load"===b&&t.play():s.create({trigger:N.current,start:"top bottom-=".concat(100*w,"%"),onEnter:function(){return t.play()}})}return function(){"scroll"===b&&s.getAll().filter((function(e){return e.vars.trigger===N.current})).forEach((function(e){return e.kill()}))}}c.set(N.current,{opacity:1,x:0,y:0})}}),{scope:N,dependencies:[y,o,u,f,b,w,L,B]}).contextSafe)((function(){if(!L){var e=D();c.fromTo(N.current,e,{opacity:1,x:0,y:0,duration:o,ease:f,onStart:x,onComplete:O})}})),M=m(m({ref:N,className:"react-gsap-fadein ".concat(z),style:P,"data-animation-direction":y},L?{}:"hover"===b?{onMouseEnter:R}:"click"===b?{onClick:R}:{}),j);return e.createElement("div",M,"function"==typeof n?n({play:R}):n)},E=["children","duration","delay","ease","direction","distance","fade","bounce","trigger","threshold","onStart","onComplete","className","style"],z=function(t){var n=t.children,r=t.duration,o=void 0===r?.8:r,i=t.delay,u=void 0===i?0:i,d=t.ease,f=t.direction,p=void 0===f?"up":f,y=t.distance,g=void 0===y?100:y,b=t.fade,h=void 0===b||b,w=t.bounce,A=void 0!==w&&w,x=t.trigger,C=void 0===x?"scroll":x,S=t.threshold,O=void 0===S?.2:S,z=t.onStart,I=void 0===z?function(){}:z,P=t.onComplete,j=void 0===P?function(){}:P,N=t.className,T=void 0===N?"":N,L=t.style,B=void 0===L?{}:L,D=v(t,E),R=a(null),M=k(),G=M.disableAllAnimations,X=M.disableScrollAnimations;d||(d=A?"back.out(1.7)":"power3.out");var U=function(){var e=h?{opacity:0}:{};switch(p){case"up":default:return m(m({},e),{},{y:g});case"down":return m(m({},e),{},{y:-g});case"left":return m(m({},e),{},{x:-g});case"right":return m(m({},e),{},{x:g})}},Y=(0,l((function(){if(R.current){if(!(G||"scroll"===C&&X)){if("load"===C||"scroll"===C){var e=U(),t=c.from(R.current,m(m({},e),{},{duration:o,delay:u,ease:d,onStart:I,onComplete:j,paused:"scroll"===C}));"scroll"!==C||X?"load"===C&&t.play():s.create({trigger:R.current,start:"top bottom-=".concat(100*O,"%"),onEnter:function(){return t.play()}})}return function(){"scroll"===C&&s.getAll().filter((function(e){return e.vars.trigger===R.current})).forEach((function(e){return e.kill()}))}}c.set(R.current,{opacity:1,x:0,y:0})}}),{scope:R,dependencies:[p,g,o,u,d,C,O,h,A,G,X]}).contextSafe)((function(){if(!G){var e=U();c.fromTo(R.current,e,{opacity:h?1:void 0,x:0,y:0,duration:o,ease:d,onStart:I,onComplete:j})}})),Q=m(m({ref:R,className:"react-gsap-slidein ".concat(T),style:B,"data-animation-direction":p,"data-fade":h.toString(),"data-bounce":A.toString()},G?{}:"hover"===C?{onMouseEnter:Y}:"click"===C?{onClick:Y}:{}),D);return e.createElement("div",Q,"function"==typeof n?n({play:Y}):n)},I=function(){return{none:"linear","power1.in":"cubic-bezier(0.550, 0.085, 0.680, 0.530)","power1.out":"cubic-bezier(0.250, 0.460, 0.450, 0.940)","power1.inOut":"cubic-bezier(0.455, 0.030, 0.515, 0.955)","power2.in":"cubic-bezier(0.550, 0.055, 0.675, 0.190)","power2.out":"cubic-bezier(0.215, 0.610, 0.355, 1.000)","power2.inOut":"cubic-bezier(0.645, 0.045, 0.355, 1.000)","power3.in":"cubic-bezier(0.895, 0.030, 0.685, 0.220)","power3.out":"cubic-bezier(0.165, 0.840, 0.440, 1.000)","power3.inOut":"cubic-bezier(0.770, 0.000, 0.175, 1.000)","power4.in":"cubic-bezier(0.895, 0.030, 0.685, 0.220)","power4.out":"cubic-bezier(0.165, 0.840, 0.440, 1.000)","power4.inOut":"cubic-bezier(0.770, 0.000, 0.175, 1.000)","back.in":"cubic-bezier(0.600, -0.280, 0.735, 0.045)","back.out":"cubic-bezier(0.175, 0.885, 0.320, 1.275)","back.inOut":"cubic-bezier(0.680, -0.550, 0.265, 1.550)","elastic.in":"cubic-bezier(0.700, 0.000, 0.835, 0.000)","elastic.out":"cubic-bezier(0.165, 0.840, 0.440, 1.000)","elastic.inOut":"cubic-bezier(0.770, 0.000, 0.175, 1.000)","circ.in":"cubic-bezier(0.600, 0.040, 0.980, 0.335)","circ.out":"cubic-bezier(0.075, 0.820, 0.165, 1.000)","circ.inOut":"cubic-bezier(0.785, 0.135, 0.150, 0.860)","expo.in":"cubic-bezier(0.950, 0.050, 0.795, 0.035)","expo.out":"cubic-bezier(0.190, 1.000, 0.220, 1.000)","expo.inOut":"cubic-bezier(1.000, 0.000, 0.000, 1.000)","sine.in":"cubic-bezier(0.470, 0.000, 0.745, 0.715)","sine.out":"cubic-bezier(0.390, 0.575, 0.565, 1.000)","sine.inOut":"cubic-bezier(0.445, 0.050, 0.550, 0.950)"}[arguments.length>0&&void 0!==arguments[0]?arguments[0]:"power2.out"]||"ease-out"},P=["children","animationType","duration","delay","threshold","ease","repeat","yoyo","trigger","onStart","onComplete","className","style"],j=function(r){var o=r.children,i=r.animationType,c=void 0===i?"fadeIn":i,l=r.duration,s=void 0===l?.8:l,u=r.delay,d=void 0===u?0:u,f=r.threshold,p=void 0===f?.2:f,g=r.ease,b=void 0===g?"power3.out":g,h=r.repeat,w=void 0===h?0:h,A=r.yoyo,x=void 0!==A&&A,C=r.trigger,S=void 0===C?"scroll":C,O=r.onStart,E=void 0===O?function(){}:O,z=r.onComplete,j=void 0===z?function(){}:z,N=r.className,T=void 0===N?"":N,L=r.style,B=void 0===L?{}:L,D=v(r,P),R=a(null),M=y(t({hasAnimated:!1,isAnimating:!1}),2),G=M[0],X=M[1],U=k(),Y=U.disableAllAnimations,Q=U.disableScrollAnimations;n((function(){!function(){if("undefined"!=typeof document&&!document.getElementById("react-gsap-keyframes")){var e=document.createElement("style");e.id="react-gsap-keyframes",e.textContent="\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n    \n    @keyframes fadeInUp {\n      from {\n        opacity: 0;\n        transform: translate3d(0, 30px, 0);\n      }\n      to {\n        opacity: 1;\n        transform: translate3d(0, 0, 0);\n      }\n    }\n    \n    @keyframes fadeInDown {\n      from {\n        opacity: 0;\n        transform: translate3d(0, -30px, 0);\n      }\n      to {\n        opacity: 1;\n        transform: translate3d(0, 0, 0);\n      }\n    }\n    \n    @keyframes fadeInLeft {\n      from {\n        opacity: 0;\n        transform: translate3d(-30px, 0, 0);\n      }\n      to {\n        opacity: 1;\n        transform: translate3d(0, 0, 0);\n      }\n    }\n    \n    @keyframes fadeInRight {\n      from {\n        opacity: 0;\n        transform: translate3d(30px, 0, 0);\n      }\n      to {\n        opacity: 1;\n        transform: translate3d(0, 0, 0);\n      }\n    }\n    \n    @keyframes slideInUp {\n      from {\n        transform: translate3d(0, 100%, 0);\n        visibility: visible;\n      }\n      to {\n        transform: translate3d(0, 0, 0);\n      }\n    }\n    \n    @keyframes slideInDown {\n      from {\n        transform: translate3d(0, -100%, 0);\n        visibility: visible;\n      }\n      to {\n        transform: translate3d(0, 0, 0);\n      }\n    }\n    \n    @keyframes slideInLeft {\n      from {\n        transform: translate3d(-100%, 0, 0);\n        visibility: visible;\n      }\n      to {\n        transform: translate3d(0, 0, 0);\n      }\n    }\n    \n    @keyframes slideInRight {\n      from {\n        transform: translate3d(100%, 0, 0);\n        visibility: visible;\n      }\n      to {\n        transform: translate3d(0, 0, 0);\n      }\n    }\n    \n    @keyframes zoomIn {\n      from {\n        opacity: 0;\n        transform: scale3d(0.3, 0.3, 0.3);\n      }\n      50% {\n        opacity: 1;\n      }\n    }\n    \n    @keyframes pulse {\n      from {\n        transform: scale3d(1, 1, 1);\n      }\n      50% {\n        transform: scale3d(1.05, 1.05, 1.05);\n      }\n      to {\n        transform: scale3d(1, 1, 1);\n      }\n    }\n    \n    @keyframes typewriter {\n      from { width: 0; }\n      to { width: 100%; }\n    }\n    \n    @keyframes blinkCursor {\n      from { border-right-color: rgba(0,0,0,.75); }\n      to { border-right-color: transparent; }\n    }\n\n    @keyframes reveal {\n      from { clip-path: inset(0 100% 0 0); }\n      to { clip-path: inset(0 0 0 0); }\n    }\n\n    @keyframes revealUp {\n      from { clip-path: inset(100% 0 0 0); }\n      to { clip-path: inset(0 0 0 0); }\n    }\n\n    @keyframes revealDown {\n      from { clip-path: inset(0 0 100% 0); }\n      to { clip-path: inset(0 0 0 0); }\n    }\n\n    @keyframes bounce {\n      from, 20%, 53%, 80%, to {\n        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n        transform: translate3d(0, 0, 0);\n      }\n      40%, 43% {\n        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n        transform: translate3d(0, -30px, 0);\n      }\n      70% {\n        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n        transform: translate3d(0, -15px, 0);\n      }\n      90% {\n        transform: translate3d(0, -4px, 0);\n      }\n    }\n\n    @keyframes ripple {\n      0% {\n        transform: scale(0);\n        opacity: 1;\n      }\n      100% {\n        transform: scale(1);\n        opacity: 0;\n      }\n    }\n\n    @keyframes shine {\n      from {\n        background-position: -200% 0;\n      }\n      to {\n        background-position: 200% 0;\n      }\n    }\n  ",document.head.appendChild(e)}}()}),[]);var _=function(){if(!(Y||G.hasAnimated||G.isAnimating)){X(m(m({},G),{},{isAnimating:!0})),E();var e=function(){X({hasAnimated:!0,isAnimating:-1===w}),j(),-1!==w&&R.current.removeEventListener("animationend",e)};R.current.addEventListener("animationend",e)}},J=function(){Y||(X({hasAnimated:!1,isAnimating:!1}),R.current&&R.current.removeEventListener("animationend",(function(){})))};n((function(){if(R.current){if(!(Y||"scroll"===S&&Q)){var e,t;switch(S){case"scroll":!function(){if(Q)return;(e=new IntersectionObserver((function(t){if(y(t,1)[0].isIntersecting){if(_(),-1===w)return;e.disconnect()}}),{threshold:p})).observe(R.current)}();break;case"load":t=setTimeout(_,10)}return function(){e&&e.disconnect(),t&&clearTimeout(t),R.current.removeEventListener("animationend",(function(){}))}}R.current&&(R.current.style.visibility="visible")}}),[S,p,Y,Q,w]);var F=m(m({},B),{animation:"".concat(G.isAnimating?c:"none"," ").concat(s,"s ").concat(I(b)," ").concat(d,"s ").concat(-1===w?"infinite":w," ").concat(x?"alternate":"normal"," both"),visibility:G.hasAnimated||G.isAnimating?"visible":"hidden"}),Z=m(m({ref:R,className:"react-simple-animated ".concat(c," ").concat(T),style:F,"data-animation-state":G.hasAnimated?"completed":G.isAnimating?"running":"initial","data-animation-type":c},Y?{}:"hover"===S?{onMouseEnter:_,onMouseLeave:J}:"click"===S?{onClick:_}:{}),D);return e.createElement("div",Z,"function"==typeof o?o({play:_,reset:J,state:G}):o)},N=["children","duration","delay","ease","direction","backgroundColor","textColor","maskStyle","trigger","threshold","onStart","onComplete","className","style"],T=function(t){var n=t.children,r=t.duration,o=void 0===r?1.2:r,i=t.delay,u=void 0===i?0:i,p=t.ease,y=void 0===p?"power4.inOut":p,g=t.direction,b=void 0===g?"left":g,h=t.backgroundColor,w=void 0===h?"#000":h,A=t.textColor,x=void 0===A?"inherit":A,C=t.maskStyle,S=void 0===C?"solid":C,O=t.trigger,E=void 0===O?"scroll":O,z=t.threshold,I=void 0===z?.2:z,P=t.onStart,j=void 0===P?function(){}:P,T=t.onComplete,L=void 0===T?function(){}:T,B=t.className,D=void 0===B?"":B,R=t.style,M=void 0===R?{}:R,G=v(t,N),X=a(null),U=a(null),Y=a(null),Q=k(),_=Q.disableAllAnimations,J=Q.disableScrollAnimations,F=(0,l((function(){if(X.current&&U.current&&Y.current){if(_||"scroll"===E&&J)return c.set(U.current,{opacity:1}),void c.set(Y.current,{display:"none"});if("load"===E||"scroll"===E){c.set(U.current,{opacity:0});var e="left"===b||"right"===b,t=c.timeline({paused:"scroll"===E,onStart:j,onComplete:L});return"split"===S?t.to(Y.current,d(d(d({},e?"x":"y",e?"left"===b?"100%":"-100%":"top"===b?"100%":"-100%"),"duration",.6*o),"ease",y)):t.to(Y.current,d(d(d(d({},e?"scaleX":"scaleY",0),"duration",.6*o),"ease",y),"transformOrigin","left"===b?"right center":"right"===b?"left center":"top"===b?"center bottom":"center top")),t.to(U.current,{opacity:1,duration:.4*o,ease:"power2.out"},"-=0.25"),"scroll"!==E||J?"load"===E&&t.play():s.create({trigger:X.current,start:"top bottom-=".concat(100*I,"%"),onEnter:function(){return t.play()}}),function(){"scroll"===E&&s.getAll().filter((function(e){return e.vars.trigger===X.current})).forEach((function(e){return e.kill()}))}}}}),{scope:X,dependencies:[o,u,y,b,S,E,I,_,J]}).contextSafe)((function(){if(!_&&X.current&&U.current&&Y.current){c.set(U.current,{opacity:0}),c.set(Y.current,{display:"block",scaleX:"left"===b||"right"===b?1:void 0,scaleY:"top"===b||"bottom"===b?1:void 0,x:0,y:0});var e=c.timeline({onStart:j,onComplete:function(){L(),c.set(Y.current,{display:"none"})}}),t="left"===b||"right"===b;"split"===S?e.to(Y.current,d(d(d({},t?"x":"y",t?"left"===b?"100%":"-100%":"top"===b?"100%":"-100%"),"duration",.6*o),"ease",y)):e.to(Y.current,d(d(d(d({},t?"scaleX":"scaleY",0),"duration",.6*o),"ease",y),"transformOrigin","left"===b?"right center":"right"===b?"left center":"top"===b?"center bottom":"center top")),e.to(U.current,{opacity:1,duration:.4*o,ease:"power2.out"},"-=0.25"),e.play()}})),Z=m({position:"relative",overflow:"hidden",display:"inline-block"},M);return e.createElement("div",f({ref:X,className:"react-gsap-textreveal ".concat(D),style:Z},_?{}:"hover"===E?{onMouseEnter:F}:"click"===E?{onClick:F}:{},G),e.createElement("div",{ref:Y,className:"react-gsap-textreveal-mask",style:function(){var e={position:"absolute",background:w,zIndex:1,top:0,right:0,bottom:0,left:0},t="left"===b?"right center":"right"===b?"left center":"top"===b?"center bottom":"center top";if("gradient"===S){var n="left"===b?"to right":"right"===b?"to left":"top"===b?"to bottom":"to top";return m(m({},e),{},{transformOrigin:t,background:"linear-gradient(".concat(n,", ").concat(w," 0%, ").concat(w,"CC 70%, ").concat(w,"00 100%)")})}return m(m({},e),{},{transformOrigin:t})}()}),e.createElement("div",{ref:U,className:"react-gsap-textreveal-text",style:{position:"relative",zIndex:2,color:x,opacity:0}},"function"==typeof n?n({play:F}):n))},L=["text","typingSpeed","deleteSpeed","delayBetweenTexts","startDelay","cursorBlink","cursorChar","cursorColor","trigger","threshold","loop","onComplete","className","style"],B=function(t){var n=t.text,r=void 0===n?"":n,o=t.typingSpeed,i=void 0===o?10:o,s=t.deleteSpeed,u=void 0===s?5:s,d=t.delayBetweenTexts,p=void 0===d?1.5:d,m=t.startDelay,y=void 0===m?.5:m,g=t.cursorBlink,b=void 0===g||g,h=t.cursorChar,w=void 0===h?"|":h,A=t.cursorColor,x=void 0===A?"inherit":A,C=t.trigger,S=void 0===C?"load":C,O=t.threshold,E=void 0===O?.2:O,z=t.loop,I=void 0===z?0:z,P=t.onComplete,j=void 0===P?function(){}:P,N=t.className,T=void 0===N?"":N,B=t.style,D=void 0===B?{}:B,R=v(t,L),M=a(null),G=a(null),X=a(null),U=k(),Y=U.disableAllAnimations,Q=U.disableScrollAnimations,_=Array.isArray(r)?r:[r];l((function(){if(M.current&&G.current&&X.current){if(Y||"scroll"===S&&Q)return G.current.textContent=_[_.length-1]||"",void(X.current.style.opacity=0);if("load"===S||"scroll"===S){var e=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=_[t%_.length]||"";if(!r&&n<=o.length)G.current.textContent=o.substring(0,n),n++,c.delayedCall(1/i,(function(){e(t,n,r)}));else if(r&&n>=0)G.current.textContent=o.substring(0,n),n--,c.delayedCall(1/u,(function(){e(t,n,r)}));else if(!r&&n>o.length)_.length>1||0!==I?c.delayedCall(p,(function(){e(t,n,!0)})):"function"==typeof j&&j();else if(r&&n<0){var a=t+1;a<_.length||I===1/0||a<_.length*(I+1)?c.delayedCall(y,(function(){e(a,0,!1)})):"function"==typeof j&&j()}};if(b&&c.to(X.current,{opacity:0,duration:.5,repeat:-1,yoyo:!0}),c.delayedCall(y,(function(){e(0,0,!1)})),"scroll"===S){var t=c.timeline({paused:!0});ScrollTrigger.create({trigger:M.current,start:"top bottom-=".concat(100*E,"%"),onEnter:function(){return t.play()}})}return function(){c.killTweensOf(G.current),c.killTweensOf(X.current),"scroll"===S&&ScrollTrigger.getAll().filter((function(e){return e.vars.trigger===M.current})).forEach((function(e){return e.kill()}))}}}}),{scope:M,dependencies:[JSON.stringify(_),i,u,p,y,b,S,E,I,Y,Q]});var J={color:x,display:"inline-block",marginLeft:"0.1em",fontWeight:"normal"};return e.createElement("div",f({ref:M,className:"react-gsap-typing-text ".concat(T),style:D},R),e.createElement("span",{ref:G}),e.createElement("span",{ref:X,style:J},w))},D=["children","effect","effectColor","duration","ease","onClick","className","style","asChild"],R=function(t){var n=t.children,r=t.effect,o=void 0===r?"ripple":r,i=t.effectColor,s=void 0===i?"rgba(255, 255, 255, 0.4)":i,u=t.duration,d=void 0===u?.6:u,f=t.ease,p=void 0===f?"power2.out":f,y=t.onClick,g=void 0===y?function(){}:y,b=t.className,h=void 0===b?"":b,w=t.style,A=void 0===w?{}:w,x=t.asChild,C=void 0!==x&&x,S=v(t,D),O=a(null),E=a(null),z=k().disableAllAnimations,I=l((function(){if(!z){if(["ripple","shine"].includes(o)&&O.current&&!E.current){var e=document.createElement("span");e.className="animated-button-effect ".concat(o,"-effect"),"ripple"===o?Object.assign(e.style,{position:"absolute",borderRadius:"50%",backgroundColor:s,transform:"scale(0)",pointerEvents:"none",zIndex:"1"}):"shine"===o&&Object.assign(e.style,{position:"absolute",top:"0",left:"-100%",width:"60%",height:"100%",background:"linear-gradient(to right, transparent 0%, ".concat(s," 50%, transparent 100%)"),transform:"skewX(-25deg)",pointerEvents:"none",zIndex:"1"}),O.current.style.position="relative",O.current.style.overflow="hidden",O.current.appendChild(e),E.current=e}return function(){if(E.current&&O.current)try{O.current.removeChild(E.current),E.current=null}catch(e){}}}}),{scope:O,dependencies:[o,s,z]}).contextSafe,P=I((function(e){if(!z&&O.current&&E.current){var t=O.current.getBoundingClientRect(),n=e?e.clientX-t.left:t.width/2,r=e?e.clientY-t.top:t.height/2,o=2*Math.max(t.width,t.height);c.set(E.current,{x:n-o/2,y:r-o/2,width:o,height:o,opacity:.5,scale:0}),c.to(E.current,{scale:1,opacity:0,duration:d,ease:p})}})),j=I((function(){!z&&E.current&&c.fromTo(E.current,{left:"-100%"},{left:"100%",duration:d,ease:p,onComplete:function(){c.set(E.current,{left:"-100%"})}})})),N=I((function(){!z&&O.current&&c.to(O.current,{scale:1.05,duration:d/2,ease:"power1.out",onComplete:function(){c.to(O.current,{scale:1,duration:d/2,ease:"power1.in"})}})})),T=I((function(){!z&&O.current&&c.to(O.current,{scale:.95,duration:d/3,ease:"power2.out",onComplete:function(){c.to(O.current,{scale:1,duration:d/2,ease:"elastic.out(1, 0.3)"})}})})),L=I((function(){if(!z&&O.current){var e=window.getComputedStyle(O.current).backgroundColor;c.to(O.current,{backgroundColor:s,duration:d,ease:p,onComplete:function(){c.to(O.current,{backgroundColor:e,duration:d,ease:p})}})}})),B=I((function(e){if(z)g(e);else{switch(o){case"ripple":P(e);break;case"shine":j();break;case"pulse":N();break;case"scale":T();break;case"fill":L()}g(e)}})),R=m({ref:O,className:"react-gsap-button ".concat(o,"-button ").concat(h),onClick:B,style:m({position:"relative",overflow:"hidden"},A)},S);return C&&1===e.Children.count(n)?e.cloneElement(e.Children.only(n),R):e.createElement("button",R,n)},M=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.duration,r=void 0===n?.8:n,o=t.delay,i=void 0===o?0:o,a=t.ease,l=void 0===a?"power3.out":a,s=t.direction,u=void 0===s?"up":s,d=t.distance,f=void 0===d?30:d,p=t.onComplete,v={opacity:0};return"up"===u?v.y=f:"down"===u?v.y=-f:"left"===u?v.x=-f:"right"===u&&(v.x=f),c.from(e,m(m({},v),{},{duration:r,delay:i,ease:l,onComplete:p,clearProps:"all"}))},G=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.duration,r=void 0===n?.8:n,o=t.delay,i=void 0===o?0:o,a=t.ease,l=void 0===a?"power3.out":a,s=t.direction,u=void 0===s?"down":s,d=t.distance,f=void 0===d?30:d,p=t.onComplete,v={opacity:0};return"up"===u?v.y=-f:"down"===u?v.y=f:"left"===u?v.x=-f:"right"===u&&(v.x=f),c.to(e,m(m({},v),{},{duration:r,delay:i,ease:l,onComplete:p}))},X=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.duration,r=void 0===n?.8:n,o=t.delay,i=void 0===o?0:o,a=t.ease,l=void 0===a?"power3.out":a,s=t.direction,u=void 0===s?"up":s,d=t.distance,f=void 0===d?100:d,p=t.fade,v=void 0===p||p,y=t.onComplete,g=v?{opacity:0}:{};return"up"===u?g.y=f:"down"===u?g.y=-f:"left"===u?g.x=-f:"right"===u&&(g.x=f),c.from(e,m(m({},g),{},{duration:r,delay:i,ease:l,onComplete:y,clearProps:"all"}))},U=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.duration,r=void 0===n?1.2:n,o=t.delay,i=void 0===o?0:o,a=t.ease,l=void 0===a?"power4.inOut":a,s=t.direction,u=void 0===s?"left":s,f=t.maskStyle,p=void 0===f?"solid":f,m=t.onComplete,v=e.container,y=e.text,g=e.mask;if(!v||!y||!g)return console.error("textReveal: All elements (container, text, mask) are required"),null;var b=c.timeline({delay:i,onComplete:m}),h="left"===u||"right"===u;return c.set(y,{opacity:0}),"split"===p?b.to(g,d(d(d({},h?"x":"y",h?"left"===u?"100%":"-100%":"top"===u?"100%":"-100%"),"duration",.6*r),"ease",l)):b.to(g,d(d(d(d({},h?"scaleX":"scaleY",0),"duration",.6*r),"ease",l),"transformOrigin","left"===u?"right center":"right"===u?"left center":"top"===u?"center bottom":"center top")),b.to(y,{opacity:1,duration:.4*r,ease:"power2.out"},"-=0.25"),b},Y={fadeIn:M,fadeOut:G,slideIn:X,textReveal:U},Q=Object.freeze({__proto__:null,default:Y,fadeIn:M,fadeOut:G,slideIn:X,textReveal:U}),_="2.0.0",J={name:"react-gsap-animation-library",version:_,description:"A comprehensive React component library that leverages GSAP for animations with official GSAP-React integration",author:"Itamar Zand",license:"MIT",repository:"https://github.com/ItamarZand88/react-gsap-animation-library"};if("undefined"!=typeof window)try{c.registerPlugin(l,s)}catch(e){console.warn("Failed to register GSAP plugins:",e.message)}var F={AnimationProvider:w,useAnimationSettings:k,useAnimation:A,useAnimationEffect:x,useScrollTrigger:C,FadeIn:O,SlideIn:z,SimpleAnimated:j,TextReveal:T,TypingText:B,AnimatedButton:R,animations:Q,version:_,info:J};export{R as AnimatedButton,w as AnimationProvider,O as FadeIn,j as SimpleAnimated,z as SlideIn,T as TextReveal,B as TypingText,Q as animations,F as default,J as info,A as useAnimation,x as useAnimationEffect,k as useAnimationSettings,C as useScrollTrigger,_ as version};
//# sourceMappingURL=index.esm.js.map