cm-ricochet/dist/index.js

Creates a ricochet effect for an element inside a container.

var O=({container:g,item:a,horizontalSpeed:F=370,verticalSpeed:x=200,initialDirection:T,onHitBorder:p,onHitLeft:w,onHitRight:L,onHitTop:M,onHitBottom:C})=>{let v=0,d=0,n,i,b=performance.now(),h=performance.now(),o=!1,m,s,A=t=>{let e=g.getBoundingClientRect(),r=a.getBoundingClientRect(),R=r.top-e.top,y=r.left-e.left,V=R+r.height,E=y+r.width;if(t==="top")return R<=0;if(t==="bottom")return V>=e.height;if(t==="left")return y<=0;if(t==="right")return E>=e.width},c=t=>{if(o)return;let e=(t-h)/1e3;if(h=t,d-=F*e,a.style.left=d+"px",A("left")){p?.(),w?.(),n=requestAnimationFrame(l),m=l;return}n=requestAnimationFrame(c),m=c},l=t=>{if(o)return;let e=(t-h)/1e3;if(h=t,d+=F*e,a.style.left=d+"px",A("right")){p?.(),L?.(),n=requestAnimationFrame(c),m=c;return}n=requestAnimationFrame(l),m=l},u=t=>{if(o)return;let e=(t-b)/1e3;if(b=t,v-=x*e,a.style.top=v+"px",A("top")){p?.(),M?.(),i=requestAnimationFrame(f),s=f;return}i=requestAnimationFrame(u),s=u},f=t=>{if(o)return;let e=(t-b)/1e3;if(b=t,v+=x*e,a.style.top=v+"px",A("bottom")){p?.(),C?.(),i=requestAnimationFrame(u),s=u;return}i=requestAnimationFrame(f),s=f},I=()=>{o||(o=!0,cancelAnimationFrame(n),cancelAnimationFrame(i))},z=()=>{o&&(o=!1,h=performance.now(),b=performance.now(),n=requestAnimationFrame(m),i=requestAnimationFrame(s))},q=()=>{document.visibilityState==="hidden"?I():document.visibilityState==="visible"&&z()},D=()=>{g.style.position="relative",a.style.position="absolute";let t={"bottom-left":[c,f],"bottom-right":[l,f],"top-right":[l,u],"top-left":[c,u]},[e,r]=t[T??"bottom-right"];m=e,s=r,n=requestAnimationFrame(e),i=requestAnimationFrame(r)};return document.addEventListener("visibilitychange",q),D(),()=>{cancelAnimationFrame(n),cancelAnimationFrame(i),document.removeEventListener("visibilitychange",q)}};export{O as startRicochet};