vanish-effect
Version:
A lightweight JavaScript library that creates a Thanos-inspired disintegration effect for HTML elements in vanilla JS, React, and Next.js
2 lines (1 loc) • 8.42 kB
JavaScript
var Et=Object.defineProperty;var bt=Object.getOwnPropertySymbols;var It=Object.prototype.hasOwnProperty,Dt=Object.prototype.propertyIsEnumerable;var Mt=(m,t,i)=>t in m?Et(m,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):m[t]=i,_=(m,t)=>{for(var i in t||(t={}))It.call(t,i)&&Mt(m,i,t[i]);if(bt)for(var i of bt(t))Dt.call(t,i)&&Mt(m,i,t[i]);return m};import Vt from"html2canvas";function Ct(m,t){let i=console.warn,$=console.error,d=e=>typeof e=="string"&&(e.includes("document.write")||e.includes("Avoid using document.write")||e.includes("Violation"));return console.warn=function(...e){e.length>0&&d(e[0])||i.apply(console,e)},console.error=function(...e){e.length>0&&d(e[0])||$.apply(console,e)},Vt(m,t).finally(()=>{console.warn=i,console.error=$})}var Y=class{static getVectorAngle(t=0,i=-1,$=.5,d=.5){let e=Math.sqrt(t*t+i*i),n=e>0?t/e:0,a=e>0?i/e:-1,w=Math.atan2(a,n);if(d>=.95)return{baseAngle:0,spread:Math.PI*2};if(d<.1)return{baseAngle:w,spread:.1*$};let S=Math.PI*$*d;return{baseAngle:w,spread:S}}static directionToVector(t){switch(t){case"up":return{x:0,y:-1};case"down":return{x:0,y:1};case"left":return{x:-1,y:0};case"right":return{x:1,y:0};default:return{x:0,y:-1}}}static easeOutQuad(t){return t*(2-t)}static snap(t,i={}){let $=_(_({},this.defaultOptions),i),{duration:d=.8,direction:e="up",vectorX:n=0,vectorY:a=-1,onComplete:w,onStart:q,particleDensity:S=1,angleVariation:H=.5,removeFromDOM:N=!1,randomness:h=.5,animated:J=!0}=$;if(i.direction&&i.vectorX===void 0&&i.vectorY===void 0){let B=this.directionToVector(e);n=B.x,a=B.y}return new Promise(B=>{var ht;let Z=performance.now(),p=document.createElement("canvas"),r=p.getContext("2d",{alpha:!0});if(!r){console.error("Could not get canvas context"),B();return}q&&q();let D=t.getBoundingClientRect(),nt=D.height,xt=D.width,vt=window.getComputedStyle(t).marginTop,wt=window.getComputedStyle(t).marginBottom,Ht=t.style.transition,St=t.style.overflow,dt=window.getComputedStyle(t).display,Pt=window.getComputedStyle(t).position,Tt=window.getComputedStyle(t).pointerEvents,T=300;p.width=D.width+T*2,p.height=D.height+T*2;let g=document.createElement("div");g.style.position="fixed",g.style.left=D.left-T+"px",g.style.top=D.top-T+"px",g.style.width=p.width+"px",g.style.height=p.height+"px",g.style.pointerEvents="none",g.style.zIndex="10000",g.style.overflow="visible",g.style.willChange="transform",p.style.position="absolute",p.style.left="0",p.style.top="0",p.style.overflow="visible",p.style.willChange="transform",g.appendChild(p),document.body.appendChild(g);let s=null;J?(s=document.createElement("div"),s.style.height=`${nt}px`,s.style.width=`${xt}px`,s.style.marginTop=vt,s.style.marginBottom=wt,s.style.transition=`height ${d}s cubic-bezier(0.25, 1, 0.5, 1), margin ${d}s cubic-bezier(0.25, 1, 0.5, 1)`,s.style.overflow="hidden",s.style.display=dt==="inline"?"inline-block":dt,(ht=t.parentNode)==null||ht.insertBefore(s,t),s.offsetHeight,s.style.height="0px",s.style.marginTop="0px",s.style.marginBottom="0px"):(t.style.position="absolute",t.style.visibility="hidden",t.style.pointerEvents="none"),Ct(t,{backgroundColor:null,scale:1,logging:!1,useCORS:!0}).then(l=>{J&&(t.style.position="absolute",t.style.visibility="hidden",t.style.pointerEvents="none");let W=l.getContext("2d").getImageData(0,0,l.width,l.height).data,{baseAngle:j,spread:Ot}=this.getVectorAngle(n,a,H,h),$t=350;console.log(`Vector: (${n}, ${a}), Base Angle: ${j}, Spread: ${Ot}, AngleVariation: ${H}, Randomness: ${h}`),r.drawImage(l,T,T);let Ft=1e5,pt=l.width*l.height,yt=Math.min(1,Ft/pt),zt=pt<4e4,at=1e4,V=zt?Math.max(1,Math.round(1/(S*yt*4))):Math.max(1,Math.round(1/(S*yt*3))),ut=Math.ceil(l.width/V*(l.height/V)*S*.8);if(ut>at){let y=Math.sqrt(ut/at);V=Math.max(1,Math.ceil(V*y))}let At=Math.min(at,Math.ceil(l.width/V*(l.height/V)*S*.8)),R=new Array(At),gt=0;for(let y=0;y<l.height;y+=V)for(let c=0;c<l.width;c+=V){let k=(y*l.width+c)*4;if(W[k+3]<5||Math.random()>S*.98)continue;let C=Math.random()<.7?Math.random()<.5?3:2:1;for(let L=0;L<C;L++){let ot=(Math.random()-.5)*4,ct=(Math.random()-.5)*4,X;if(h>=.95)X=Math.random()*Math.PI*2;else if(h>.1){let A=j,E=Math.PI*H*h,O;if(e==="up"||e==="down"){let P=Math.random(),f=Math.random();O=P-f}else O=Math.random()*2-1;X=A+O*E}else{let A=(Math.random()-.5)*.2*H;X=j+A}let G=c/l.width,K=y/l.height,F;Math.abs(a)>Math.abs(n)?F=a<0?K:1-K:Math.abs(n)>Math.abs(a)?F=n<0?G:1-G:F=(G+K)/2,F=F*.7+Math.random()*.3;let mt=h>=.95?.6:.4,z=h>=.95?2:1.5,et=mt+Math.random()*z,Q=$t*et,U=h>=.95?.3:.5,it=h>=.95?3:2,o=U+Math.random()*(it-U),M=Math.random()*Math.PI*2,x=h>=.95?30:20,u=(Math.random()-.5)*x;R[gt++]={x:c+ot+T,y:y+ct+T,color:`rgba(${W[k]},${W[k+1]},${W[k+2]},${W[k+3]/255})`,velocity:{x:Math.cos(X)*Q,y:Math.sin(X)*Q},size:o,rotation:M,rotationSpeed:u,opacity:1,delayFactor:F}}}R.length=gt;let ft=performance.now(),st=0,rt=performance.now(),tt=60,lt=y=>{st++,y-rt>500&&(tt=Math.round(st/(y-rt)*1e3),st=0,rt=y);let c=Math.min(.05,(y-ft)/1e3),k=(y-Z)/1e3,C=Math.min(1,k/d),L=this.easeOutQuad(C),ot=h>=.95?200:150,ct=Math.cos(j)*ot*L,X=Math.sin(j)*ot*L,G=(Math.random()*2-1)*10*L,K=(Math.random()*2-1)*10*L;if(g.style.transform=`translate3d(${ct+G}px, ${X+K}px, 0)`,tt<40&&y%2!==0){for(let b=0;b<R.length;b++){let o=R[b],M=h>=.95?120:80,x=0,u=0;a<-.5?u=M:a>.5?u=M*.5:u=M*.7,Math.abs(n)>.7&&(x=-n*M*.2),o.velocity.y+=u*c,o.velocity.x+=x*c,o.x+=o.velocity.x*c,o.y+=o.velocity.y*c,o.rotation+=o.rotationSpeed*c}requestAnimationFrame(lt);return}r.clearRect(0,0,p.width,p.height),C<.05&&(r.globalAlpha=1-C*20,r.drawImage(l,T,T),r.globalAlpha=1);let F=.1,mt=Math.max(0,(C-F)/(1-F)),z={},et=2,Q=0,U=tt<50?3e3:5e3;for(let b=0;b<R.length;b++){let o=R[b],M=o.delayFactor||0,x=Math.max(0,(C-M*.4)/(1-M*.4));if(x<=0)continue;let u=h>=.95?120:80,A=0,E=0;if(a<-.5?E=u:a>.5?E=u*.5:E=u*.7,Math.abs(n)>.7&&(A=-n*u*.2),o.velocity.y+=E*c,o.velocity.x+=A*c,o.x+=o.velocity.x*c,o.y+=o.velocity.y*c,o.rotation+=o.rotationSpeed*c,o.opacity=Math.max(0,1-x*.8),o.opacity<.01)continue;let O=tt<50?.2+x*.3:.05+x*.2;if(R.length>U&&Math.random()>1-O)continue;let P=Math.floor(o.opacity*et)/et;if(z[P]||(z[P]={}),z[P][o.color]||(z[P][o.color]=[]),z[P][o.color].push(o),Q++,Q>=U)break}let it=Object.keys(z);for(let b=0;b<it.length;b++){let o=parseFloat(it[b]),M=z[o];r.globalAlpha=o;let x=Object.keys(M);for(let u=0;u<x.length;u++){let A=x[u],E=M[A];r.fillStyle=A;let O=[],P=[];for(let f=0;f<E.length;f++){let v=E[f];v.size<1.2?O.push(v):P.push(v)}if(O.length>0)for(let f=0;f<O.length;f++){let v=O[f],I=v.size*1.2;r.fillRect(v.x-I/2,v.y-I/2,I,I)}for(let f=0;f<P.length;f++){let v=P[f];r.save(),r.translate(v.x,v.y),r.rotate(v.rotation);let I=v.size*1.3;r.fillRect(-I/2,-I/2,I,I),r.restore()}}}ft=y,C<1?requestAnimationFrame(lt):(g.remove(),s&&s.parentNode&&s.parentNode.removeChild(s),N?t.parentNode&&t.parentNode.removeChild(t):(t.style.display="none",t.style.visibility="",t.style.overflow=St,t.style.position=Pt,t.style.pointerEvents=Tt),w&&w(),B())};requestAnimationFrame(lt)})})}static _fadeIn(t,i={}){let $=_(_({},this.defaultInternalFadeInOptions),i),{duration:d=.8,delay:e=0,onComplete:n,onStart:a,animated:w=!0,initialScale:q=.95,easing:S="ease-out"}=$;return new Promise(H=>{let N=t.style.display||"",h=t.style.visibility||"",J=t.style.opacity||"",B=t.style.transform||"",Z=t.style.height||"",p=t.style.overflow||"",r=t.style.transition||"",D=window.getComputedStyle(t).height;if(t.style.opacity="0",t.style.transform=`scale(${q})`,t.style.display=N==="none"?"block":N,t.style.visibility="visible",!w){t.style.opacity=J||"1",t.style.transform=B,a&&a(),n&&n(),H();return}w&&(N==="none"||h==="hidden")&&(t.style.height="0",t.style.overflow="hidden"),t.offsetHeight,a&&a(),t.style.transition=`opacity ${d}s ${S} ${e}s, transform ${d}s ${S} ${e}s${w?`, height ${d}s ${S} ${e}s`:""}`,setTimeout(()=>{t.style.opacity="1",t.style.transform="scale(1)",w&&t.style.height==="0px"&&(t.style.height=D)},20);let nt=(d+e)*1e3;setTimeout(()=>{t.style.transition=r,t.style.overflow=p,w&&t.style.height!==Z&&(t.style.height=Z),n&&n(),H()},nt+50)})}};Y.defaultOptions={duration:.8,direction:"up",vectorX:0,vectorY:-1,animated:!0,particleDensity:1,angleVariation:.5,removeFromDOM:!1,randomness:.5},Y.defaultInternalFadeInOptions={duration:.8,delay:0,animated:!0,initialScale:.95,easing:"ease-out"};if(typeof window!="undefined"){let m={snap:Y.snap.bind(Y)};window.Thanos=m,console.log("thanossnap library loaded, Thanos.snap is available")}export{Y as Thanos};