@ssgoi/core
Version:
Core animation engine for SSGOI - Native app-like page transitions with spring physics
2 lines (1 loc) • 4.55 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=(p={})=>{const{from:n=0,to:s=1,spring:r={stiffness:300,damping:30}}=p;return{in:u=>({spring:r,tick:l=>{const c=n+(s-n)*l;u.style.opacity=c.toString()}}),out:u=>({spring:r,tick:l=>{const c=n+(s-n)*l;u.style.opacity=c.toString()}})}},b=(p={})=>{const{start:n=0,opacity:s=0,axis:r="both",spring:u={stiffness:300,damping:30}}=p,l=c=>{switch(r){case"x":return`scaleX(${c})`;case"y":return`scaleY(${c})`;case"both":default:return`scale(${c})`}};return{in:c=>({spring:u,tick:t=>{const e=n+(1-n)*t;c.style.transform=l(e),c.style.opacity=(s+(1-s)*t).toString()}}),out:c=>({spring:u,tick:t=>{const e=n+(1-n)*t;c.style.transform=l(e),c.style.opacity=(s+(1-s)*t).toString()}})}},m=(p={})=>{const{direction:n,distance:s=100,opacity:r=0,fade:u=!0,axis:l,spring:c={stiffness:400,damping:35}}=p,e=n||(l==="x"?"left":l==="y"?"up":"left"),o=a=>typeof a=="number"?`${a}px`:a,f=a=>{const i=1-a,y=typeof s=="number"?i*s:`calc(${o(s)} * ${i})`;switch(e){case"left":return typeof s=="number"?`translateX(${-y}px)`:`translateX(calc(-1 * ${y}))`;case"right":return typeof s=="number"?`translateX(${y}px)`:`translateX(${y})`;case"up":return typeof s=="number"?`translateY(${-y}px)`:`translateY(calc(-1 * ${y}))`;case"down":return typeof s=="number"?`translateY(${y}px)`:`translateY(${y})`}};return{in:a=>({spring:c,tick:i=>{a.style.transform=f(i),u&&(a.style.opacity=(r+(1-r)*i).toString())}}),out:a=>({spring:c,tick:i=>{a.style.transform=f(i),u&&(a.style.opacity=(r+(1-r)*i).toString())}})}},d=(p={})=>{const{degrees:n=360,clockwise:s=!0,scale:r=!1,fade:u=!0,origin:l="center",axis:c="2d",perspective:t=800,spring:e={stiffness:500,damping:25}}=p,o=s?n:-n,f=a=>{const i=(1-a)*o;switch(c){case"x":return`perspective(${t}px) rotateX(${i}deg)`;case"y":return`perspective(${t}px) rotateY(${i}deg)`;case"z":return`rotateZ(${i}deg)`;case"2d":default:return`rotate(${i}deg)`}};return{in:a=>({spring:e,tick:i=>{const y=[f(i)];r&&y.push(`scale(${i})`),a.style.transform=y.join(" "),a.style.transformOrigin=l,u&&(a.style.opacity=i.toString())}}),out:a=>({spring:e,tick:i=>{const y=[f(i)];r&&y.push(`scale(${i})`),a.style.transform=y.join(" "),a.style.transformOrigin=l,u&&(a.style.opacity=i.toString())}})}},g=(p={})=>{const{height:n=20,intensity:s=1,scale:r=!0,fade:u=!0,direction:l="up",spring:c={stiffness:800,damping:15}}=p;return{in:t=>({spring:c,tick:e=>{const o=[],f=Math.sin(e*Math.PI*(1+s)),a=1-e,i=f*n*a;if(l==="up"?o.push(`translateY(${-Math.abs(i)}px)`):o.push(`translateY(${Math.abs(i)}px)`),r){const y=.8+e*.2+f*.05*a;o.push(`scale(${y})`)}t.style.transform=o.join(" "),u&&(t.style.opacity=e.toString())}}),out:t=>({spring:c,tick:e=>{const o=[],f=Math.sin(e*Math.PI*(1+s)),a=1-e,i=f*n*a;if(l==="up"?o.push(`translateY(${-Math.abs(i)}px)`):o.push(`translateY(${Math.abs(i)}px)`),r){const y=.8+e*.2+f*.05*a;o.push(`scale(${y})`)}t.style.transform=o.join(" "),u&&(t.style.opacity=e.toString())}})}},x=(p={})=>{const{amount:n=10,opacity:s=0,scale:r=!1,fade:u=!0,spring:l={stiffness:300,damping:30}}=p,c=t=>typeof t=="number"?`${t}px`:t;return{in:t=>({spring:l,tick:e=>{const o=1-e,f=typeof n=="number"?o*n:`calc(${c(n)} * ${o})`;t.style.filter=typeof n=="number"?`blur(${f}px)`:`blur(${f})`,r&&(t.style.transform=`scale(${.8+e*.2})`),u&&(t.style.opacity=(s+(1-s)*e).toString())}}),out:t=>({spring:l,tick:e=>{const o=1-e,f=typeof n=="number"?o*n:`calc(${c(n)} * ${o})`;t.style.filter=typeof n=="number"?`blur(${f}px)`:`blur(${f})`,r&&(t.style.transform=`scale(${.8+e*.2})`),u&&(t.style.opacity=(s+(1-s)*e).toString())}})}},h=(p={})=>{const{x:n=0,y:s=-100,opacity:r=0,spring:u={stiffness:400,damping:35}}=p,l=t=>typeof t=="number"?`${t}px`:t,c=t=>typeof t=="number"?`${t}px`:t;return{in:t=>({spring:u,tick:e=>{const o=typeof n=="number"?(1-e)*n:`calc(${l(n)} * ${1-e})`,f=typeof s=="number"?(1-e)*s:`calc(${c(s)} * ${1-e})`;t.style.transform=`translate(${typeof n=="number"?o+"px":o}, ${typeof s=="number"?f+"px":f})`,t.style.opacity=(r+(1-r)*e).toString()}}),out:t=>({spring:u,tick:e=>{const o=typeof n=="number"?(1-e)*n:`calc(${l(n)} * ${1-e})`,f=typeof s=="number"?(1-e)*s:`calc(${c(s)} * ${1-e})`;t.style.transform=`translate(${typeof n=="number"?o+"px":o}, ${typeof s=="number"?f+"px":f})`,t.style.opacity=(r+(1-r)*e).toString()}})}},k=(p={})=>{const{spring:n={stiffness:1e3,damping:100}}=p;return{in:s=>({spring:n,tick:r=>{}}),out:s=>({spring:n,tick:r=>{}})}};exports.blur=x;exports.bounce=g;exports.fade=$;exports.fly=h;exports.none=k;exports.rotate=d;exports.scale=b;exports.slide=m;