animate-on-view/dist/react/index.js

High-performance, zero-dependency animation library for React/Next.js and Svelte with TypeScript support

"use strict";var t,a=require("react"),e={exports:{}},r={};var i,n={};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */"production"===process.env.NODE_ENV?e.exports=function(){if(t)return r;t=1;var a=Symbol.for("react.transitional.element"),e=Symbol.for("react.fragment");function i(t,e,r){var i=null;if(void 0!==r&&(i=""+r),void 0!==e.key&&(i=""+e.key),"key"in e)for(var n in r={},e)"key"!==n&&(r[n]=e[n]);else r=e;return e=r.ref,{$$typeof:a,type:t,key:i,ref:void 0!==e?e:null,props:r}}return r.Fragment=e,r.jsx=i,r.jsxs=i,r}():e.exports=(i||(i=1,"production"!==process.env.NODE_ENV&&function(){function t(a){if(null==a)return null;if("function"==typeof a)return a.$$typeof===O?null:a.displayName||a.name||null;if("string"==typeof a)return a;switch(a){case y:return"Fragment";case b:return"Profiler";case d:return"StrictMode";case v:return"Suspense";case z:return"SuspenseList";case I:return"Activity"}if("object"==typeof a)switch(a.tag,a.$$typeof){case m:return"Portal";case x:return(a.displayName||"Context")+".Provider";case g:return(a._context.displayName||"Context")+".Consumer";case h:var e=a.render;return(a=a.displayName)||(a=""!==(a=e.displayName||e.name||"")?"ForwardRef("+a+")":"ForwardRef"),a;case k:return null!==(e=a.displayName||null)?e:t(a.type)||"Memo";case w:e=a._payload,a=a._init;try{return t(a(e))}catch(t){}}return null}function e(t){return""+t}function r(t){try{e(t);var a=!1}catch(t){a=!0}if(a){var r=(a=console).error,i="function"==typeof Symbol&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return r.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",i),e(t)}}function i(a){if(a===y)return"<>";if("object"==typeof a&&null!==a&&a.$$typeof===w)return"<...>";try{var e=t(a);return e?"<"+e+">":"<...>"}catch(t){return"<...>"}}function o(){return Error("react-stack-top-frame")}function s(){var a=t(this.type);return j[a]||(j[a]=!0),void 0!==(a=this.props.ref)?a:null}function c(a,e,i,n,o,c,p,m){var y,d=e.children;if(void 0!==d)if(n){if(_(d)){for(n=0;n<d.length;n++)l(d[n]);Object.freeze&&Object.freeze(d)}}else l(d);if(S.call(e,"key")){d=t(a);var b=Object.keys(e).filter(function(t){return"key"!==t});n=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",R[d+n]||(b=0<b.length?"{"+b.join(": ..., ")+": ...}":"{}",R[d+n]=!0)}if(d=null,void 0!==i&&(r(i),d=""+i),function(t){if(S.call(t,"key")){var a=Object.getOwnPropertyDescriptor(t,"key").get;if(a&&a.isReactWarning)return!1}return void 0!==t.key}(e)&&(r(e.key),d=""+e.key),"key"in e)for(var g in i={},e)"key"!==g&&(i[g]=e[g]);else i=e;return d&&function(t){function a(){u||(u=!0)}a.isReactWarning=!0,Object.defineProperty(t,"key",{get:a,configurable:!0})}(i,"function"==typeof a&&(a.displayName||a.name)),function(t,a,e,r,i,n,o,c){return e=n.ref,t={$$typeof:f,type:t,key:a,props:n,_owner:i},null!==(void 0!==e?e:null)?Object.defineProperty(t,"ref",{enumerable:!1,get:s}):Object.defineProperty(t,"ref",{enumerable:!1,value:null}),t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(t,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(t,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:o}),Object.defineProperty(t,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:c}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}(a,d,c,0,null===(y=Y.A)?null:y.getOwner(),i,p,m)}function l(t){"object"==typeof t&&null!==t&&t.$$typeof===f&&t._store&&(t._store.validated=1)}var u,p=a,f=Symbol.for("react.transitional.element"),m=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),d=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),x=Symbol.for("react.context"),h=Symbol.for("react.forward_ref"),v=Symbol.for("react.suspense"),z=Symbol.for("react.suspense_list"),k=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),I=Symbol.for("react.activity"),O=Symbol.for("react.client.reference"),Y=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,S=Object.prototype.hasOwnProperty,_=Array.isArray,X=console.createTask?console.createTask:function(){return null},j={},N=(p={react_stack_bottom_frame:function(t){return t()}}).react_stack_bottom_frame.bind(p,o)(),$=X(i(o)),R={};n.Fragment=y,n.jsx=function(t,a,e,r,n){var o=1e4>Y.recentlyCreatedOwnerStacks++;return c(t,a,e,!1,0,n,o?Error("react-stack-top-frame"):N,o?X(i(t)):$)},n.jsxs=function(t,a,e,r,n){var o=1e4>Y.recentlyCreatedOwnerStacks++;return c(t,a,e,!0,0,n,o?Error("react-stack-top-frame"):N,o?X(i(t)):$)}}()),n);var o=e.exports;const s=({threshold:t=.1,rootMargin:e="0px",triggerOnce:r=!0})=>{const[i,n]=a.useState(!1),[o,s]=a.useState(!1),c=a.useRef(null),l=a.useCallback(t=>{const[a]=t;a.isIntersecting?(n(!0),s(!0)):r&&o||n(!1)},[r,o]);return a.useEffect(()=>{const a=c.current;if(!a)return;const r=new IntersectionObserver(l,{threshold:t,rootMargin:e});return r.observe(a),()=>r.disconnect()},[l,t,e]),{ref:c,isInView:i}},c={fadeIn:{initial:{opacity:0},animate:{opacity:1},transition:{duration:.6,easing:"ease-out"}},fadeInUp:{initial:{opacity:0,transform:"translateY(30px)"},animate:{opacity:1,transform:"translateY(0px)"},transition:{duration:.6,easing:"ease-out"}},fadeInDown:{initial:{opacity:0,transform:"translateY(-30px)"},animate:{opacity:1,transform:"translateY(0px)"},transition:{duration:.6,easing:"ease-out"}},fadeInLeft:{initial:{opacity:0,transform:"translateX(-30px)"},animate:{opacity:1,transform:"translateX(0px)"},transition:{duration:.6,easing:"ease-out"}},fadeInRight:{initial:{opacity:0,transform:"translateX(30px)"},animate:{opacity:1,transform:"translateX(0px)"},transition:{duration:.6,easing:"ease-out"}},slideUp:{initial:{opacity:0,transform:"translateY(50px)"},animate:{opacity:1,transform:"translateY(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.25, 0.46, 0.45, 0.94)"}},slideDown:{initial:{opacity:0,transform:"translateY(-50px)"},animate:{opacity:1,transform:"translateY(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.25, 0.46, 0.45, 0.94)"}},slideLeft:{initial:{opacity:0,transform:"translateX(50px)"},animate:{opacity:1,transform:"translateX(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.25, 0.46, 0.45, 0.94)"}},slideRight:{initial:{opacity:0,transform:"translateX(-50px)"},animate:{opacity:1,transform:"translateX(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.25, 0.46, 0.45, 0.94)"}},scaleIn:{initial:{opacity:0,transform:"scale(0.8)"},animate:{opacity:1,transform:"scale(1)"},transition:{duration:.6,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},scaleOut:{initial:{opacity:0,transform:"scale(1.2)"},animate:{opacity:1,transform:"scale(1)"},transition:{duration:.6,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},scaleX:{initial:{opacity:0,transform:"scaleX(0)"},animate:{opacity:1,transform:"scaleX(1)"},transition:{duration:.7,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},scaleY:{initial:{opacity:0,transform:"scaleY(0)"},animate:{opacity:1,transform:"scaleY(1)"},transition:{duration:.7,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},rotateIn:{initial:{opacity:0,transform:"rotate(-10deg) scale(0.9)"},animate:{opacity:1,transform:"rotate(0deg) scale(1)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},rotateInLeft:{initial:{opacity:0,transform:"rotate(-45deg)"},animate:{opacity:1,transform:"rotate(0deg)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},rotateInRight:{initial:{opacity:0,transform:"rotate(45deg)"},animate:{opacity:1,transform:"rotate(0deg)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},flipX:{initial:{opacity:0,transform:"rotateX(-90deg)"},animate:{opacity:1,transform:"rotateX(0deg)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},flipY:{initial:{opacity:0,transform:"rotateY(-90deg)"},animate:{opacity:1,transform:"rotateY(0deg)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zoomIn:{initial:{opacity:0,transform:"scale(0.3)"},animate:{opacity:1,transform:"scale(1)"},transition:{duration:.6,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zoomInUp:{initial:{opacity:0,transform:"scale(0.3) translateY(100px)"},animate:{opacity:1,transform:"scale(1) translateY(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zoomInDown:{initial:{opacity:0,transform:"scale(0.3) translateY(-100px)"},animate:{opacity:1,transform:"scale(1) translateY(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zoomInLeft:{initial:{opacity:0,transform:"scale(0.3) translateX(-100px)"},animate:{opacity:1,transform:"scale(1) translateX(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zoomInRight:{initial:{opacity:0,transform:"scale(0.3) translateX(100px)"},animate:{opacity:1,transform:"scale(1) translateX(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},bounceIn:{initial:{opacity:0,transform:"scale(0.3)"},animate:{opacity:1,transform:"scale(1)"},transition:{duration:.8,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},bounceInUp:{initial:{opacity:0,transform:"translateY(100px)"},animate:{opacity:1,transform:"translateY(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},bounceInDown:{initial:{opacity:0,transform:"translateY(-100px)"},animate:{opacity:1,transform:"translateY(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},bounceInLeft:{initial:{opacity:0,transform:"translateX(-100px)"},animate:{opacity:1,transform:"translateX(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},bounceInRight:{initial:{opacity:0,transform:"translateX(100px)"},animate:{opacity:1,transform:"translateX(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},elasticIn:{initial:{opacity:0,transform:"scale(0)"},animate:{opacity:1,transform:"scale(1)"},transition:{duration:1,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},elasticInUp:{initial:{opacity:0,transform:"translateY(100px) scale(0.8)"},animate:{opacity:1,transform:"translateY(0px) scale(1)"},transition:{duration:1,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},elasticInDown:{initial:{opacity:0,transform:"translateY(-100px) scale(0.8)"},animate:{opacity:1,transform:"translateY(0px) scale(1)"},transition:{duration:1,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},blurIn:{initial:{opacity:0,filter:"blur(10px)"},animate:{opacity:1,filter:"blur(0px)"},transition:{duration:.8,easing:"ease-out"}},blurInUp:{initial:{opacity:0,filter:"blur(10px)",transform:"translateY(50px)"},animate:{opacity:1,filter:"blur(0px)",transform:"translateY(0px)"},transition:{duration:.8,easing:"ease-out"}},skewIn:{initial:{opacity:0,transform:"skewX(-20deg)"},animate:{opacity:1,transform:"skewX(0deg)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},skewInUp:{initial:{opacity:0,transform:"skewY(-20deg) translateY(50px)"},animate:{opacity:1,transform:"skewY(0deg) translateY(0px)"},transition:{duration:.8,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},rollIn:{initial:{opacity:0,transform:"translateX(-100px) rotate(-120deg)"},animate:{opacity:1,transform:"translateX(0px) rotate(0deg)"},transition:{duration:1,easing:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},lightSpeedIn:{initial:{opacity:0,transform:"translateX(100px) skewX(-30deg)"},animate:{opacity:1,transform:"translateX(0px) skewX(0deg)"},transition:{duration:.6,easing:"ease-out"}},jackInTheBox:{initial:{opacity:0,transform:"scale(0.1) rotate(30deg)"},animate:{opacity:1,transform:"scale(1) rotate(0deg)"},transition:{duration:.8,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},gentle:{initial:{opacity:0,transform:"translateY(20px)"},animate:{opacity:1,transform:"translateY(0px)"},transition:{duration:.5,easing:"ease-out"}},soft:{initial:{opacity:0,transform:"scale(0.95)"},animate:{opacity:1,transform:"scale(1)"},transition:{duration:.4,easing:"ease-out"}},smooth:{initial:{opacity:0,transform:"translateY(10px)"},animate:{opacity:1,transform:"translateY(0px)"},transition:{duration:.3,easing:"ease-out"}},dramatic:{initial:{opacity:0,transform:"scale(0.5) rotate(-180deg)"},animate:{opacity:1,transform:"scale(1) rotate(0deg)"},transition:{duration:1.2,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}},explosive:{initial:{opacity:0,transform:"scale(0.1) rotate(180deg)"},animate:{opacity:1,transform:"scale(1) rotate(0deg)"},transition:{duration:.8,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"}}},AnimateOnView=a.forwardRef(({children:t,type:e="fadeIn",variant:r,threshold:i=.1,rootMargin:n="0px",triggerOnce:l=!0,duration:u,delay:p=0,easing:f,className:m,style:y,onInView:d,onOutView:b,...g},x)=>{const{ref:h,isInView:v}=s({threshold:i,rootMargin:n,triggerOnce:l}),z=r||c[e],k={duration:u||z.transition?.duration||600,delay:p,easing:f||z.transition?.easing||"ease-out"},w=((t,a,e)=>`opacity ${t}ms ${e} ${a}ms, transform ${t}ms ${e} ${a}ms`)(k.duration,k.delay,k.easing),I=v?z.animate:z.initial,O=(Y={transition:w,willChange:"opacity, transform",...I},(S=y)?{...Y,...S}:Y);var Y,S;a.useEffect(()=>{v&&d?d():!v&&b&&b()},[v,d,b]);const _=a.useCallback(t=>{h.current=t,x&&("function"==typeof x?x(t):x.current=t)},[h,x]);return o.jsx("div",{ref:_,className:m,style:O,...g,children:t})});AnimateOnView.displayName="AnimateOnView";const l=t=>a.forwardRef((e,r)=>{const{children:i,...n}=e,{type:s,variant:c,threshold:l,rootMargin:u,triggerOnce:p,duration:f,delay:m,easing:y,className:d,style:b,onInView:g,onOutView:x,...h}=n,v={children:a.createElement(t,h,i),type:s,variant:c,threshold:l,rootMargin:u,triggerOnce:p,duration:f,delay:m,easing:y,className:d,style:b,onInView:g,onOutView:x};return o.jsx(AnimateOnView,{ref:r,...v})}),animate={div:l("div"),span:l("span"),h1:l("h1"),h2:l("h2"),h3:l("h3"),h4:l("h4"),h5:l("h5"),h6:l("h6"),p:l("p"),img:l("img"),section:l("section"),article:l("article"),aside:l("aside"),header:l("header"),footer:l("footer"),main:l("main"),nav:l("nav"),ul:l("ul"),ol:l("ol"),li:l("li"),button:l("button"),input:l("input")};exports.AnimateOnView=AnimateOnView,exports.animate=animate,exports.defaultVariants=c,exports.useIntersectionObserver=s;
//# sourceMappingURL=index.js.map