lavicon-animation/dist/index.js

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

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