react-animate-observer/dist/entrypoint.js

A React component for scroll animations using Intersection Observer

import S from"react";import{useState as g,useEffect as k,useRef as O}from"react";var h=({mediaQueryWidth:i,largeScreenRootMargin:c,smallScreenRootMargin:s,threshold:o,once:r})=>{let[n,e]=g(!1),[l,m]=g(null),t=O(null),p=`(min-width: ${i??768}px)`,u=c??"-35% 0px",d=s??"-25% 0px",P=r??!0,b=o??0,f=()=>new IntersectionObserver(([a])=>{P?a.isIntersecting&&e(a.isIntersecting):e(a.isIntersecting)},{rootMargin:window.matchMedia(p).matches?u:d,threshold:b});return k(()=>(t.current&&t.current.disconnect(),t.current=f(),l&&t.current.observe(l),()=>{var a;return(a=t==null?void 0:t.current)==null?void 0:a.disconnect()}),[l]),k(()=>{let a=()=>{t.current&&(t.current.disconnect(),t.current=f(),l&&t.current.observe(l))};a();let T=window.matchMedia(p);return T.addEventListener("change",a),()=>T.removeEventListener("change",a)},[]),[m,n]},v=h;import{useState as $,useEffect as w}from"react";var I=(i,c)=>{let s={},o={},r="";return Object.keys(i).forEach(n=>{let e=i[n];switch(n){case"transitionDelay":s={...s,transitionDelay:`${e}s`};break;case"transitionDuration":s={...s,transitionDuration:`${e}s`};break;default:s={...s,[n]:`${e}`};return}}),Object.keys(c).forEach(n=>{let e=c[n];switch(n){case"translateX":r+=`translateX(${e}px) `;break;case"translateY":r+=`translateY(${e}px) `;break;case"translateZ":r+=`translateZ(${e}px) `;break;case"rotateX":r+=`rotateX(${e}deg) `;break;case"rotateY":r+=`rotateY(${e}deg) `;break;case"rotateZ":r+=`rotateZ(${e}deg) `;break;case"skewX":r+=`skewX(${e}deg) `;break;case"skewY":r+=`skewY(${e}deg) `;break;case"scaleX":r+=`scaleX(${e}) `;break;case"scaleY":r+=`scaleY(${e}) `;break;case"scaleZ":r+=`scaleZ(${e}) `;break;default:o={...o,[n]:`${e}`};return}}),o={...o,transform:r.trim()},{...s,...o}},y=I;var x=({children:i,start:c={opacity:0,translateY:30},end:s={opacity:1,translateY:0},transition:o={transitionDelay:.1,transitionDuration:.4,transitionTimingFunction:"ease-in"},as:r="div",customStyle:n=!1,observerOptions:e={},style:l,...m})=>{let[t,p]=v({mediaQueryWidth:768,largeScreenRootMargin:"-35% 0px",smallScreenRootMargin:"-25% 0px",threshold:0,once:!0,...e}),u=r,[d,P]=$(y(o,c));return w(()=>{let f=y(o,p?s:c);P(f)},[p]),S.createElement(S.Fragment,null,n?S.createElement(u,{ref:t,"data-is-active":p,...m},i):S.createElement(u,{ref:t,style:{...d,...l},"data-is-active":p,...m},i))},E=x;export{E as ScrollAnimator};
//# sourceMappingURL=entrypoint.js.map