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

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

import t,{useState as a,useRef as e,useCallback as r,useEffect as i,forwardRef as n}from"react";var o,s={exports:{}},c={};var l,u={};
/**
 * @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?s.exports=function(){if(o)return c;o=1;var t=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function e(a,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:t,type:a,key:i,ref:void 0!==e?e:null,props:r}}return c.Fragment=a,c.jsx=e,c.jsxs=e,c}():s.exports=(l||(l=1,"production"!==process.env.NODE_ENV&&function(){function a(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 y:return"Fragment";case b:return"Profiler";case d:return"StrictMode";case v:return"Suspense";case z:return"SuspenseList";case w:return"Activity"}if("object"==typeof t)switch(t.tag,t.$$typeof){case m:return"Portal";case x:return(t.displayName||"Context")+".Provider";case g:return(t._context.displayName||"Context")+".Consumer";case h:var e=t.render;return(t=t.displayName)||(t=""!==(t=e.displayName||e.name||"")?"ForwardRef("+t+")":"ForwardRef"),t;case k:return null!==(e=t.displayName||null)?e:a(t.type)||"Memo";case I:e=t._payload,t=t._init;try{return a(t(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(t){if(t===y)return"<>";if("object"==typeof t&&null!==t&&t.$$typeof===I)return"<...>";try{var e=a(t);return e?"<"+e+">":"<...>"}catch(t){return"<...>"}}function n(){return Error("react-stack-top-frame")}function o(){var t=a(this.type);return j[t]||(j[t]=!0),void 0!==(t=this.props.ref)?t:null}function s(t,e,i,n,s,u,p,m){var y,d=e.children;if(void 0!==d)if(n){if(S(d)){for(n=0;n<d.length;n++)c(d[n]);Object.freeze&&Object.freeze(d)}}else c(d);if(_.call(e,"key")){d=a(t);var b=Object.keys(e).filter(function(t){return"key"!==t});n=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",E[d+n]||(b=0<b.length?"{"+b.join(": ..., ")+": ...}":"{}",E[d+n]=!0)}if(d=null,void 0!==i&&(r(i),d=""+i),function(t){if(_.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(){l||(l=!0)}a.isReactWarning=!0,Object.defineProperty(t,"key",{get:a,configurable:!0})}(i,"function"==typeof t&&(t.displayName||t.name)),function(t,a,e,r,i,n,s,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:o}):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:s}),Object.defineProperty(t,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:c}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}(t,d,u,0,null===(y=Y.A)?null:y.getOwner(),i,p,m)}function c(t){"object"==typeof t&&null!==t&&t.$$typeof===f&&t._store&&(t._store.validated=1)}var l,p=t,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"),I=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),O=Symbol.for("react.client.reference"),Y=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,_=Object.prototype.hasOwnProperty,S=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,n)(),$=X(i(n)),E={};u.Fragment=y,u.jsx=function(t,a,e,r,n){var o=1e4>Y.recentlyCreatedOwnerStacks++;return s(t,a,e,!1,0,n,o?Error("react-stack-top-frame"):N,o?X(i(t)):$)},u.jsxs=function(t,a,e,r,n){var o=1e4>Y.recentlyCreatedOwnerStacks++;return s(t,a,e,!0,0,n,o?Error("react-stack-top-frame"):N,o?X(i(t)):$)}}()),u);var p=s.exports;const f=({threshold:t=.1,rootMargin:n="0px",triggerOnce:o=!0})=>{const[s,c]=a(!1),[l,u]=a(!1),p=e(null),f=r(t=>{const[a]=t;a.isIntersecting?(c(!0),u(!0)):o&&l||c(!1)},[o,l]);return i(()=>{const a=p.current;if(!a)return;const e=new IntersectionObserver(f,{threshold:t,rootMargin:n});return e.observe(a),()=>e.disconnect()},[f,t,n]),{ref:p,isInView:s}},m={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=n(({children:a,type:e="fadeIn",variant:r,threshold:i=.1,rootMargin:n="0px",triggerOnce:o=!0,duration:s,delay:c=0,easing:l,className:u,style:y,onInView:d,onOutView:b,...g},x)=>{const{ref:h,isInView:v}=f({threshold:i,rootMargin:n,triggerOnce:o}),z=r||m[e],k={duration:s||z.transition?.duration||600,delay:c,easing:l||z.transition?.easing||"ease-out"},I=((t,a,e)=>`opacity ${t}ms ${e} ${a}ms, transform ${t}ms ${e} ${a}ms`)(k.duration,k.delay,k.easing),w=v?z.animate:z.initial,O=(Y={transition:I,willChange:"opacity, transform",...w},(_=y)?{...Y,..._}:Y);var Y,_;t.useEffect(()=>{v&&d?d():!v&&b&&b()},[v,d,b]);const S=t.useCallback(t=>{h.current=t,x&&("function"==typeof x?x(t):x.current=t)},[h,x]);return p.jsx("div",{ref:S,className:u,style:O,...g,children:a})});AnimateOnView.displayName="AnimateOnView";const y=a=>n((e,r)=>{const{children:i,...n}=e,{type:o,variant:s,threshold:c,rootMargin:l,triggerOnce:u,duration:f,delay:m,easing:y,className:d,style:b,onInView:g,onOutView:x,...h}=n,v={children:t.createElement(a,h,i),type:o,variant:s,threshold:c,rootMargin:l,triggerOnce:u,duration:f,delay:m,easing:y,className:d,style:b,onInView:g,onOutView:x};return p.jsx(AnimateOnView,{ref:r,...v})}),animate={div:y("div"),span:y("span"),h1:y("h1"),h2:y("h2"),h3:y("h3"),h4:y("h4"),h5:y("h5"),h6:y("h6"),p:y("p"),img:y("img"),section:y("section"),article:y("article"),aside:y("aside"),header:y("header"),footer:y("footer"),main:y("main"),nav:y("nav"),ul:y("ul"),ol:y("ol"),li:y("li"),button:y("button"),input:y("input")};export{AnimateOnView,animate,m as defaultVariants,f as useIntersectionObserver};
//# sourceMappingURL=index.esm.js.map