@ssgoi/core/dist/view-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 k=require("../utils-BSgyev81.cjs"),E=(t={})=>{var e,i;const n={stiffness:((e=t.spring)==null?void 0:e.stiffness)??300,damping:((i=t.spring)==null?void 0:i.damping)??30};return{in:s=>({spring:n,tick:l=>{s.style.opacity=l.toString()}}),out:s=>({spring:n,tick:l=>{s.style.opacity=l.toString()},prepare:k.prepareOutgoing})}};function m(t,n){return t.querySelector(`[data-hero-key="${n}"]`)}function A(t,n){const e=t.getBoundingClientRect(),i=n.getBoundingClientRect();return new DOMRect(i.left-e.left,i.top-e.top,i.width,i.height)}const C=(t={})=>{var l,h;const n={stiffness:((l=t.spring)==null?void 0:l.stiffness)??300,damping:((h=t.spring)==null?void 0:h.damping)??30},e=t.timeout??300;let i=null,s=null;return{in:async(r,a)=>{const u=r,g=Array.from(u.querySelectorAll("[data-hero-key]"));if(g.length===0)return{spring:n,tick:()=>{}};if(!await new Promise(o=>{i?o(!0):(s=o,setTimeout(()=>{s=null,o(!1)},e))})||!i)return i=null,{spring:n,tick:()=>{}};const p=g.map(o=>{const $=o.getAttribute("data-hero-key");if(!$)return null;const c=m(i,$);if(!c)return null;const d=o,w=A(i,c),f=A(u,d),x=w.left-f.left-a.scrollOffset.x,B=w.top-f.top-a.scrollOffset.y,q=w.width/f.width,T=w.height/f.height,M=d.style.transform,O=d.style.position,Y=d.style.transformOrigin;return{toEl:d,dx:x,dy:B,dw:q,dh:T,originalTransform:M,originalPosition:O,originalTransformOrigin:Y}}).filter(Boolean);return i=null,p.length===0?{spring:n,tick:()=>{}}:{spring:n,prepare:()=>{p.forEach(({toEl:o})=>{o.style.position="relative",o.style.transformOrigin="top left"})},tick:o=>{p.forEach(({toEl:$,dx:c,dy:d,dw:w,dh:f})=>{$.style.transform=`translate(${(1-o)*c}px,${(1-o)*d}px) scale(${o+(1-o)*w}, ${o+(1-o)*f})`})},onEnd:()=>{p.forEach(({toEl:o,originalTransform:$,originalPosition:c,originalTransformOrigin:d})=>{o.style.transform=$,o.style.position=c,o.style.transformOrigin=d})}}},out:async r=>({onStart:()=>{i=r,s&&(s(!0),s=null)},prepare:a=>{k.prepareOutgoing(a),a.style.opacity="0"}})}};function S(t,n){const e=t.getBoundingClientRect(),i=n.getBoundingClientRect();return new DOMRect(i.left-e.left,i.top-e.top,i.width,i.height)}function D({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:i},s){const l=n.left-t.left+(n.width-t.width)/2-i.x,h=n.top-t.top+(n.height-t.height)/2-i.y,r=n.width/t.width,a=n.height/t.height,u=Math.max(r,a),g=t.top/e.height*100,y=(e.width-(t.left+t.width))/e.width*100,p=(e.height-(t.top+t.height))/e.height*100,o=t.left/e.width*100;return s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,$=>{const c=1-$,d=g*c,w=y*c,f=p*c,x=o*c;s.style.clipPath=`inset(${d}% ${w}% ${f}% ${x}%)`,s.style.transform=`translate(${l*c}px, ${h*c}px) scale(${1+(u-1)*c})`}}function P({galleryRect:t,detailRect:n,scrollOffset:e},i){const s=n.left-t.left+(n.width-t.width)/2+e.x,l=n.top-t.top+(n.height-t.height)/2+e.y,h=n.width/t.width,r=n.height/t.height,a=Math.max(h,r);return u=>{i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const g=1-u;i.style.transform=`translate(${s*g-e.x}px, ${l*g-e.y}px) scale(${1+(a-1)*g})`,i.style.opacity=`${1-g}`}}function b({galleryRect:t,detailRect:n,scrollOffset:e},i){const s=n.left-t.left+(n.width-t.width)/2-e.x,l=n.top-t.top+(n.height-t.height)/2-e.y,h=n.width/t.width,r=n.height/t.height,a=Math.max(h,r);return u=>{const g=1-u,y=u;i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,i.style.transform=`translate(${s*g}px, ${l*g}px) scale(${1+(a-1)*g})`,i.style.opacity=`${y}`}}function F({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:i},s){const l=n.left-t.left+(n.width-t.width)/2+i.x,h=n.top-t.top+(n.height-t.height)/2+i.y,r=n.width/t.width,a=n.height/t.height,u=Math.min(r,a),g=t.top/e.height*100,y=(e.width-(t.left+t.width))/e.width*100,p=(e.height-(t.top+t.height))/e.height*100,o=t.left/e.width*100;return s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,$=>{const c=1-$,d=g*c,w=y*c,f=p*c,x=o*c;s.style.clipPath=`inset(${d}% ${w}% ${f}% ${x}%)`,s.style.transform=`translate(${l*c-i.x}px, ${h*c-i.y}px) scale(${1+(u-1)*c})`}}function L(t,n,e){const i=t.querySelector("[data-pinterest-detail-key]"),s=n.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||n.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let l=null,h=null,r=!1;if(!i&&s){h=s;const y=h.getAttribute("data-pinterest-detail-key");if(!y)return null;l=t.querySelector(`[data-pinterest-gallery-key="${y}"]`),l&&(r=!0)}else if(i&&!s){h=i;const y=h.getAttribute("data-pinterest-detail-key");if(!y)return null;l=n.querySelector(`[data-pinterest-gallery-key="${y}"]`),l&&(r=!1)}if(!l||!h)return null;const a=S(r?t:n,l),u=S(r?n:t,h),g=n.getBoundingClientRect();return r?{inAnimation:D({detailRect:u,galleryRect:a,pageRect:g,scrollOffset:e},n),outAnimation:P({galleryRect:a,detailRect:u,scrollOffset:e},t)}:{inAnimation:b({galleryRect:a,detailRect:u,scrollOffset:e},n),outAnimation:F({detailRect:u,galleryRect:a,pageRect:g,scrollOffset:e},t)}}const X=(t={})=>{var h,r;const n={stiffness:((h=t.spring)==null?void 0:h.stiffness)??50,damping:((r=t.spring)==null?void 0:r.damping)??10},e=t.timeout??300;let i=null,s=null,l=null;return{in:async(a,{scrollOffset:u})=>{const g=a;return!await new Promise(p=>{i?p(!0):(s=p,setTimeout(()=>{s=null,p(!1)},e))})||!i?(i=null,{spring:n,tick:()=>{}}):(l=L(i,g,u),l?(i=null,{spring:n,tick:p=>{l&&l.inAnimation(p)}}):{spring:n,tick:()=>{}})},out:async a=>({spring:n,onStart:()=>{i=a,s&&(s(!0),s=null)},prepare:u=>{k.prepareOutgoing(u),u.style.zIndex="-1"},tick:u=>{l&&l.outAnimation(u)}})}},I=(t={})=>{var s,l;const n=t.direction??"up",e={stiffness:((s=t.spring)==null?void 0:s.stiffness)??300,damping:((l=t.spring)==null?void 0:l.damping)??30},i=n==="up";return{in:h=>({spring:e,tick:r=>{const a=i?(1-r)*100:(1-r)*-100;h.style.transform=`translateY(${a}%)`}}),out:h=>({spring:e,tick:r=>{const a=i?(1-r)*-100:(1-r)*100;h.style.transform=`translateY(${a}%)`},prepare:k.prepareOutgoing})}};exports.fade=E;exports.hero=C;exports.pinterest=X;exports.scroll=I;