@ssgoi/core/dist/transitions/index.cjs

Core animation engine for SSGOI - Native app-like page transitions with spring physics

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=($={})=>{const{from:e=0,to:s=1,spring:f={stiffness:300,damping:30},key:l}=$;return{in:u=>({spring:f,tick:y=>{const a=e+(s-e)*y;u.style.opacity=a.toString()}}),out:u=>({spring:f,tick:y=>{const a=e+(s-e)*y;u.style.opacity=a.toString()}}),...l&&{key:l}}},h=($={})=>{const{start:e=0,opacity:s=0,axis:f="both",spring:l={stiffness:300,damping:30},key:u}=$,y=a=>{switch(f){case"x":return`scaleX(${a})`;case"y":return`scaleY(${a})`;case"both":default:return`scale(${a})`}};return{in:a=>({spring:l,tick:n=>{const t=e+(1-e)*n;a.style.transform=y(t),a.style.opacity=(s+(1-s)*n).toString()}}),out:a=>({spring:l,tick:n=>{const t=e+(1-e)*n;a.style.transform=y(t),a.style.opacity=(s+(1-s)*n).toString()}}),...u&&{key:u}}},x=($={})=>{const{direction:e,distance:s=100,opacity:f=0,fade:l=!0,axis:u,spring:y={stiffness:400,damping:35},key:a}=$,t=e||(u==="x"?"left":u==="y"?"up":"left"),c=i=>typeof i=="number"?`${i}px`:i,o=i=>{const r=1-i,p=typeof s=="number"?r*s:`calc(${c(s)} * ${r})`;switch(t){case"left":return typeof s=="number"?`translateX(${-p}px)`:`translateX(calc(-1 * ${p}))`;case"right":return typeof s=="number"?`translateX(${p}px)`:`translateX(${p})`;case"up":return typeof s=="number"?`translateY(${-p}px)`:`translateY(calc(-1 * ${p}))`;case"down":return typeof s=="number"?`translateY(${p}px)`:`translateY(${p})`}};return{in:i=>({spring:y,tick:r=>{i.style.transform=o(r),l&&(i.style.opacity=(f+(1-f)*r).toString())}}),out:i=>({spring:y,tick:r=>{i.style.transform=o(r),l&&(i.style.opacity=(f+(1-f)*r).toString())}}),...a&&{key:a}}},k=($={})=>{const{degrees:e=360,clockwise:s=!0,scale:f=!1,fade:l=!0,origin:u="center",axis:y="2d",perspective:a=800,spring:n={stiffness:500,damping:25},key:t}=$,c=s?e:-e,o=i=>{const r=(1-i)*c;switch(y){case"x":return`perspective(${a}px) rotateX(${r}deg)`;case"y":return`perspective(${a}px) rotateY(${r}deg)`;case"z":return`rotateZ(${r}deg)`;case"2d":default:return`rotate(${r}deg)`}};return{in:i=>({spring:n,tick:r=>{const p=[o(r)];f&&p.push(`scale(${r})`),i.style.transform=p.join(" "),i.style.transformOrigin=u,l&&(i.style.opacity=r.toString())}}),out:i=>({spring:n,tick:r=>{const p=[o(r)];f&&p.push(`scale(${r})`),i.style.transform=p.join(" "),i.style.transformOrigin=u,l&&(i.style.opacity=r.toString())}}),...t&&{key:t}}},S=($={})=>{const{height:e=20,intensity:s=1,scale:f=!0,fade:l=!0,direction:u="up",spring:y={stiffness:800,damping:15},key:a}=$;return{in:n=>({spring:y,tick:t=>{const c=[],o=Math.sin(t*Math.PI*(1+s)),i=1-t,r=o*e*i;if(u==="up"?c.push(`translateY(${-Math.abs(r)}px)`):c.push(`translateY(${Math.abs(r)}px)`),f){const p=.8+t*.2+o*.05*i;c.push(`scale(${p})`)}n.style.transform=c.join(" "),l&&(n.style.opacity=t.toString())}}),out:n=>({spring:y,tick:t=>{const c=[],o=Math.sin(t*Math.PI*(1+s)),i=1-t,r=o*e*i;if(u==="up"?c.push(`translateY(${-Math.abs(r)}px)`):c.push(`translateY(${Math.abs(r)}px)`),f){const p=.8+t*.2+o*.05*i;c.push(`scale(${p})`)}n.style.transform=c.join(" "),l&&(n.style.opacity=t.toString())}}),...a&&{key:a}}},M=($={})=>{const{amount:e=10,opacity:s=0,scale:f=!1,fade:l=!0,spring:u={stiffness:300,damping:30},key:y}=$,a=n=>typeof n=="number"?`${n}px`:n;return{in:n=>({spring:u,tick:t=>{const c=1-t,o=typeof e=="number"?c*e:`calc(${a(e)} * ${c})`;n.style.filter=typeof e=="number"?`blur(${o}px)`:`blur(${o})`,f&&(n.style.transform=`scale(${.8+t*.2})`),l&&(n.style.opacity=(s+(1-s)*t).toString())}}),out:n=>({spring:u,tick:t=>{const c=1-t,o=typeof e=="number"?c*e:`calc(${a(e)} * ${c})`;n.style.filter=typeof e=="number"?`blur(${o}px)`:`blur(${o})`,f&&(n.style.transform=`scale(${.8+t*.2})`),l&&(n.style.opacity=(s+(1-s)*t).toString())}}),...y&&{key:y}}},Y=($={})=>{const{x:e=0,y:s=-100,opacity:f=0,spring:l={stiffness:400,damping:35},key:u}=$,y=n=>typeof n=="number"?`${n}px`:n,a=n=>typeof n=="number"?`${n}px`:n;return{in:n=>({spring:l,tick:t=>{const c=typeof e=="number"?(1-t)*e:`calc(${y(e)} * ${1-t})`,o=typeof s=="number"?(1-t)*s:`calc(${a(s)} * ${1-t})`;n.style.transform=`translate(${typeof e=="number"?c+"px":c}, ${typeof s=="number"?o+"px":o})`,n.style.opacity=(f+(1-f)*t).toString()}}),out:n=>({spring:l,tick:t=>{const c=typeof e=="number"?(1-t)*e:`calc(${y(e)} * ${1-t})`,o=typeof s=="number"?(1-t)*s:`calc(${a(s)} * ${1-t})`;n.style.transform=`translate(${typeof e=="number"?c+"px":c}, ${typeof s=="number"?o+"px":o})`,n.style.opacity=(f+(1-f)*t).toString()}}),...u&&{key:u}}},O=($={})=>{const{shape:e="circle",origin:s="center",scale:f=1.5,fade:l=!1,spring:u={stiffness:300,damping:30},key:y}=$,a=()=>{switch(s){case"top":return"50% 0%";case"bottom":return"50% 100%";case"left":return"0% 50%";case"right":return"100% 50%";case"top-left":return"0% 0%";case"top-right":return"100% 0%";case"bottom-left":return"0% 100%";case"bottom-right":return"100% 100%";case"center":default:return"50% 50%"}},n=t=>{const c=t*f*100,o=a();switch(e){case"ellipse":return`ellipse(${c}% ${c*.75}% at ${o})`;case"square":{const i=t*f*100,[r,p]=o.split(" "),m=parseFloat(r),d=parseFloat(p),b=i/2;return`polygon(${m-b}% ${d-b}%, ${m+b}% ${d-b}%, ${m+b}% ${d+b}%, ${m-b}% ${d+b}%)`}case"circle":default:return`circle(${c}% at ${o})`}};return{in:t=>({spring:u,tick:c=>{t.style.clipPath=n(c),l&&(t.style.opacity=c.toString())}}),out:t=>({spring:u,tick:c=>{t.style.clipPath=n(c),l&&(t.style.opacity=c.toString())}}),...y&&{key:y}}},V=($={})=>{const{spring:e={stiffness:1e3,damping:100},key:s}=$;return{in:()=>({spring:e,tick:()=>{}}),out:()=>({spring:e,tick:()=>{}}),...s&&{key:s}}};exports.blur=M;exports.bounce=S;exports.fade=g;exports.fly=Y;exports.mask=O;exports.none=V;exports.rotate=k;exports.scale=h;exports.slide=x;