lavicon-animation/dist/index.esm.js

React component for animating spritesheets generated from lavicon.dev with multiple trigger modes (hover, click, auto)

import{jsx as r}from"react/jsx-runtime";import{useState as n,useRef as t,useEffect as e}from"react";import{useMotionValue as o,useSpring as i,motion as c}from"framer-motion";var a=function(a){var u=a.url,l=a.size,s=void 0===l?96:l,d=a.frameSize,f=void 0===d?196:d,m=a.fps,p=void 0===m?30:m,v=a.cols,h=void 0===v?10:v,g=a.totalFrames,k=void 0===g?150:g,w=a.triggerMode,x=void 0===w?"hover":w,b=a.loop,M=void 0!==b&&b,y=a.initialFrame,F=void 0===y?0:y,A=a.className,q=void 0===A?"":A,z=a.alt,P=void 0===z?"Animation sprite":z,C=a.onClick,N=a.autoPlay,R=void 0!==N&&N,S=a.renderingQuality,j=void 0===S?"crisp-edges":S,D=a.cursorPointer,E=void 0!==D&&D,H=n(!1),I=H[0],L=H[1],O=n(R),Q=O[0],U=O[1],B=n(F),G=B[0],J=B[1],K=n(!1),T=K[0],V=K[1],W=t(null),X=t(null),Y=t(0),Z=1e3/Math.min(p,120),$=t("forward"),_=t(!1),rr=o(0),nr=o(1),tr=i(nr,{stiffness:700,damping:30}),er=i(rr,{stiffness:500,damping:25}),or=s/f,ir=function(){null!==W.current&&(cancelAnimationFrame(W.current),W.current=null)},cr=function(r){X.current||(X.current=r,Y.current=r);var n=r-Y.current;if(n>=Z){var t=Math.min(Math.floor(n/Z),3);Y.current=r-n%Z,J((function(r){var n=r;return"forward"===$.current?(n=Math.min(r+t,k-1))>=k-1&&"click"===x&&!M?$.current="backward":n>=k-1&&M&&(n=F):(n=Math.max(r-t,F))<=F&&"click"===x&&(_.current=!1,U(!1)),n}))}Q||"hover"===x&&I||"backward"===$.current&&G>F?W.current=requestAnimationFrame(cr):ir()};return e((function(){return R&&!W.current||"hover"===x&&I&&!W.current||Q&&!W.current?($.current="forward",X.current=null,Y.current=0,W.current=requestAnimationFrame(cr)):"hover"===x&&!I&&G>F&&!W.current&&($.current="backward",X.current=null,Y.current=0,W.current=requestAnimationFrame(cr)),function(){ir()}}),[I,Q,R]),e((function(){T?(nr.set(.95),rr.set(2)):(nr.set(1),rr.set(0))}),[T,nr,rr]),r(c.div,{className:"relative inline-block overflow-hidden ".concat(q),style:{width:"".concat(s,"px"),height:"".concat(s,"px"),y:er,scale:tr,cursor:E||"click"===x?"pointer":"default"},onMouseEnter:function(){return L(!0)},onMouseLeave:function(){return L(!1)},onMouseDown:function(){return V(!0)},onMouseUp:function(){return V(!1)},onClick:function(){C&&C(),"click"!==x||_.current||($.current="forward",U(!0),_.current=!0,W.current||(X.current=null,Y.current=0,W.current=requestAnimationFrame(cr)))},initial:{opacity:.9},whileHover:{opacity:1,scale:"click"===x?1.02:1.05,transition:{duration:.2}},role:"img","aria-label":P,children:r("div",{style:{position:"absolute",top:0,left:0,width:"".concat(s,"px"),height:"".concat(s,"px"),overflow:"hidden"},children:r("div",{style:{position:"absolute",top:0,left:0,width:"".concat(f,"px"),height:"".concat(f,"px"),backgroundImage:"url(".concat(u,")"),backgroundSize:"".concat(h*f,"px auto"),backgroundPosition:"-".concat(G%h*f,"px -").concat(Math.floor(G/h)*f,"px"),backgroundRepeat:"no-repeat",transformOrigin:"top left",imageRendering:j,transform:"scale(".concat(or,")")}})})})};export{a as LaviconAnimation,a as default};
//# sourceMappingURL=index.esm.js.map