@ssgoi/core 0.0.3 → 2.0.0

package/dist/types.d.ts

@@ -3,17 +3,19 @@ export type SpringConfig = {
     stiffness?: number;
     damping?: number;
 };
-export type TransitionConfig = {
+export type TransitionConfig<TAnimationValue = number> = {
     spring?: SpringConfig;
-    tick?: (progress: number) => void;
+    from?: TAnimationValue;
+    to?: TAnimationValue;
+    tick?: (progress: TAnimationValue) => void;
     prepare?: (element: HTMLElement) => void;
     onStart?: () => void;
     onEnd?: () => void;
 };
-export type GetTransitionConfig<TContext = undefined> = TContext extends undefined ? (node: HTMLElement) => TransitionConfig | Promise<TransitionConfig> : (node: HTMLElement, context: TContext) => TransitionConfig | Promise<TransitionConfig>;
-export type Transition<TContext = undefined> = {
-    in?: GetTransitionConfig<TContext>;
-    out?: GetTransitionConfig<TContext>;
+export type GetTransitionConfig<TContext = undefined, TAnimationValue = number> = TContext extends undefined ? (node: HTMLElement) => TransitionConfig<TAnimationValue> | Promise<TransitionConfig<TAnimationValue>> : (node: HTMLElement, context: TContext) => TransitionConfig<TAnimationValue> | Promise<TransitionConfig<TAnimationValue>>;
+export type Transition<TContext = undefined, TAnimationValue = number> = {
+    in?: GetTransitionConfig<TContext, TAnimationValue>;
+    out?: GetTransitionConfig<TContext, TAnimationValue>;
 };
 export type TransitionCallback = (element: HTMLElement | null) => void | (() => void);
 export type SggoiTransitionContext = {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAE7B,MAAM,CAAC,EAAE,YAAY,CAAC;IAGtB,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAGlC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAGzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAGrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,QAAQ,GAAG,SAAS,IAClD,QAAQ,SAAS,SAAS,GACtB,CAAC,IAAI,EAAE,WAAW,KAAK,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC,GACnE,CACE,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,QAAQ,KACd,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAExD,MAAM,MAAM,UAAU,CAAC,QAAQ,GAAG,SAAS,IAAI;IAC7C,EAAE,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACnC,GAAG,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,CAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,KACxB,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAEzB,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,UAAU,EAAE,eAAe,CAAC;QAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,EAAE,CAAC;IACJ,iBAAiB,CAAC,EAAE,eAAe,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,CACzB,IAAI,EAAE,MAAM,KACT,UAAU,GAAG;IAAE,GAAG,EAAE,aAAa,CAAA;CAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,eAAe,GAAG,MAAM,IAAI;IAEvD,MAAM,CAAC,EAAE,YAAY,CAAC;IAGtB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,EAAE,CAAC,EAAE,eAAe,CAAC;IAGrB,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAG3C,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAGzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAGrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,QAAQ,GAAG,SAAS,EAAE,eAAe,GAAG,MAAM,IAC5E,QAAQ,SAAS,SAAS,GACtB,CAAC,IAAI,EAAE,WAAW,KAAK,gBAAgB,CAAC,eAAe,CAAC,GAAG,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,GACrG,CACE,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,QAAQ,KACd,gBAAgB,CAAC,eAAe,CAAC,GAAG,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;AAE1F,MAAM,MAAM,UAAU,CAAC,QAAQ,GAAG,SAAS,EAAE,eAAe,GAAG,MAAM,IAAI;IACvE,EAAE,CAAC,EAAE,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;IACpD,GAAG,CAAC,EAAE,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,CAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,KACxB,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAEzB,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,UAAU,EAAE,eAAe,CAAC;QAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,EAAE,CAAC;IACJ,iBAAiB,CAAC,EAAE,eAAe,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,CACzB,IAAI,EAAE,MAAM,KACT,UAAU,GAAG;IAAE,GAAG,EAAE,aAAa,CAAA;CAAE,CAAC"}

package/dist/view-transitions/index.cjs

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

package/dist/view-transitions/index.d.ts

@@ -1,5 +1,5 @@
 export * from './fade';
 export * from './hero';
 export * from './pinterest';
-export * from './ripple';
+export * from './scroll';
 //# sourceMappingURL=index.d.ts.map

package/dist/view-transitions/index.js

@@ -21,7 +21,7 @@ const X = (t = {}) => {
     })
   };
 };
-function D(t, n) {
+function M(t, n) {
   return t.querySelector(`[data-hero-key="${n}"]`);
 }
 function A(t, n) {
@@ -33,16 +33,16 @@ function A(t, n) {
     i.height
   );
 }
-const Y = (t = {}) => {
-  var l, r;
+const b = (t = {}) => {
+  var l, h;
   const n = {
     stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 300,
-    damping: ((r = t.spring) == null ? void 0 : r.damping) ?? 30
+    damping: ((h = t.spring) == null ? void 0 : h.damping) ?? 30
   }, e = t.timeout ?? 300;
   let i = null, s = null;
   return {
-    in: async (c, o) => {
-      const h = c, g = Array.from(h.querySelectorAll("[data-hero-key]"));
+    in: async (a, r) => {
+      const u = a, g = Array.from(u.querySelectorAll("[data-hero-key]"));
       if (g.length === 0)
         return {
           spring: n,
@@ -50,9 +50,9 @@ const Y = (t = {}) => {
           }
           // No hero elements, skip animation
         };
-      if (!await new Promise((a) => {
-        i ? a(!0) : (s = a, setTimeout(() => {
-          s = null, a(!1);
+      if (!await new Promise((o) => {
+        i ? o(!0) : (s = o, setTimeout(() => {
+          s = null, o(!1);
         }, e));
       }) || !i)
         return i = null, {
@@ -61,24 +61,24 @@ const Y = (t = {}) => {
           }
           // No fromNode, skip animation
         };
-      const p = g.map((a) => {
-        const f = a.getAttribute("data-hero-key");
-        if (!f) return null;
-        const u = D(i, f);
-        if (!u) return null;
-        const d = a, $ = A(i, u), w = A(h, d), x = $.left - w.left - o.scrollOffset.x, M = $.top - w.top - o.scrollOffset.y, q = $.width / w.width, T = $.height / w.height, C = d.style.transform, E = d.style.position, P = d.style.transformOrigin;
+      const y = 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 - r.scrollOffset.x, B = w.top - f.top - r.scrollOffset.y, q = w.width / f.width, T = w.height / f.height, Y = d.style.transform, m = d.style.position, E = d.style.transformOrigin;
         return {
           toEl: d,
           dx: x,
-          dy: M,
+          dy: B,
           dw: q,
           dh: T,
-          originalTransform: C,
-          originalPosition: E,
-          originalTransformOrigin: P
+          originalTransform: Y,
+          originalPosition: m,
+          originalTransformOrigin: E
         };
       }).filter(Boolean);
-      return i = null, p.length === 0 ? {
+      return i = null, y.length === 0 ? {
         spring: n,
         tick: () => {
         }
@@ -86,35 +86,35 @@ const Y = (t = {}) => {
       } : {
         spring: n,
         prepare: () => {
-          p.forEach(({ toEl: a }) => {
-            a.style.position = "relative", a.style.transformOrigin = "top left";
+          y.forEach(({ toEl: o }) => {
+            o.style.position = "relative", o.style.transformOrigin = "top left";
           });
         },
-        tick: (a) => {
-          p.forEach(({ toEl: f, dx: u, dy: d, dw: $, dh: w }) => {
-            f.style.transform = `translate(${(1 - a) * u}px,${(1 - a) * d}px) scale(${a + (1 - a) * $}, ${a + (1 - a) * w})`;
+        tick: (o) => {
+          y.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(
+          y.forEach(
             ({
-              toEl: a,
-              originalTransform: f,
-              originalPosition: u,
+              toEl: o,
+              originalTransform: $,
+              originalPosition: c,
               originalTransformOrigin: d
             }) => {
-              a.style.transform = f, a.style.position = u, a.style.transformOrigin = d;
+              o.style.transform = $, o.style.position = c, o.style.transformOrigin = d;
             }
           );
         }
       };
     },
-    out: async (c) => ({
+    out: async (a) => ({
       onStart: () => {
-        i = c, s && (s(!0), s = null);
+        i = a, s && (s(!0), s = null);
       },
-      prepare: (o) => {
-        k(o), o.style.opacity = "0";
+      prepare: (r) => {
+        k(r), r.style.opacity = "0";
       }
     })
   };
@@ -128,39 +128,39 @@ function S(t, n) {
     i.height
   );
 }
-function H({
+function C({
   detailRect: t,
   galleryRect: n,
   pageRect: e,
   scrollOffset: i
 }, s) {
-  const l = n.left - t.left + (n.width - t.width) / 2 - i.x, r = n.top - t.top + (n.height - t.height) / 2 - i.y, c = n.width / t.width, o = n.height / t.height, h = Math.max(c, o), 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, a = t.left / e.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (f) => {
-    const u = 1 - f, d = g * u, $ = y * u, w = p * u, x = a * u;
-    s.style.clipPath = `inset(${d}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${l * u}px, ${r * u}px) scale(${1 + (h - 1) * u})`;
+  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, a = n.width / t.width, r = n.height / t.height, u = Math.max(a, r), g = t.top / e.height * 100, p = (e.width - (t.left + t.width)) / e.width * 100, y = (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 = p * c, f = y * 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 b({
+function D({
   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, r = n.width / t.width, c = n.height / t.height, o = Math.max(r, c);
-  return (h) => {
+  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, a = n.height / t.height, r = Math.max(h, a);
+  return (u) => {
     i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
-    const g = 1 - h;
-    i.style.transform = `translate(${s * g - e.x}px, ${l * g - e.y}px) scale(${1 + (o - 1) * g})`, i.style.opacity = `${1 - g}`;
+    const g = 1 - u;
+    i.style.transform = `translate(${s * g - e.x}px, ${l * g - e.y}px) scale(${1 + (r - 1) * g})`, i.style.opacity = `${1 - g}`;
   };
 }
-function O({
+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, r = n.width / t.width, c = n.height / t.height, o = Math.max(r, c);
-  return (h) => {
-    const g = 1 - h, y = h;
-    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 + (o - 1) * g})`, i.style.opacity = `${y}`;
+  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, a = n.height / t.height, r = Math.max(h, a);
+  return (u) => {
+    const g = 1 - u, p = 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 + (r - 1) * g})`, i.style.opacity = `${p}`;
   };
 }
 function F({
@@ -169,13 +169,13 @@ function F({
   pageRect: e,
   scrollOffset: i
 }, s) {
-  const l = n.left - t.left + (n.width - t.width) / 2 + i.x, r = n.top - t.top + (n.height - t.height) / 2 + i.y, c = n.width / t.width, o = n.height / t.height, h = Math.min(c, o), 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, a = t.left / e.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (f) => {
-    const u = 1 - f, d = g * u, $ = y * u, w = p * u, x = a * u;
-    s.style.clipPath = `inset(${d}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${l * u - i.x}px, ${r * u - i.y}px) scale(${1 + (h - 1) * u})`;
+  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, a = n.width / t.width, r = n.height / t.height, u = Math.min(a, r), g = t.top / e.height * 100, p = (e.width - (t.left + t.width)) / e.width * 100, y = (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 = p * c, f = y * 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 I(t, n, e) {
+function L(t, n, e) {
   const i = t.querySelector(
     "[data-pinterest-detail-key]"
   ), s = n.querySelector(
@@ -183,67 +183,67 @@ function I(t, n, e) {
   );
   if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
     return null;
-  let l = null, r = null, c = !1;
+  let l = null, h = null, a = !1;
   if (!i && s) {
-    r = s;
-    const y = r.getAttribute("data-pinterest-detail-key");
-    if (!y) return null;
+    h = s;
+    const p = h.getAttribute("data-pinterest-detail-key");
+    if (!p) return null;
     l = t.querySelector(
-      `[data-pinterest-gallery-key="${y}"]`
-    ), l && (c = !0);
+      `[data-pinterest-gallery-key="${p}"]`
+    ), l && (a = !0);
   } else if (i && !s) {
-    r = i;
-    const y = r.getAttribute("data-pinterest-detail-key");
-    if (!y) return null;
+    h = i;
+    const p = h.getAttribute("data-pinterest-detail-key");
+    if (!p) return null;
     l = n.querySelector(
-      `[data-pinterest-gallery-key="${y}"]`
-    ), l && (c = !1);
+      `[data-pinterest-gallery-key="${p}"]`
+    ), l && (a = !1);
   }
-  if (!l || !r)
+  if (!l || !h)
     return null;
-  const o = S(c ? t : n, l), h = S(c ? n : t, r), g = n.getBoundingClientRect();
-  return c ? {
-    inAnimation: H(
-      { detailRect: h, galleryRect: o, pageRect: g, scrollOffset: e },
+  const r = S(a ? t : n, l), u = S(a ? n : t, h), g = n.getBoundingClientRect();
+  return a ? {
+    inAnimation: C(
+      { detailRect: u, galleryRect: r, pageRect: g, scrollOffset: e },
       n
     ),
-    outAnimation: b(
-      { galleryRect: o, detailRect: h, scrollOffset: e },
+    outAnimation: D(
+      { galleryRect: r, detailRect: u, scrollOffset: e },
       t
     )
   } : {
-    inAnimation: O(
-      { galleryRect: o, detailRect: h, scrollOffset: e },
+    inAnimation: P(
+      { galleryRect: r, detailRect: u, scrollOffset: e },
       n
     ),
     outAnimation: F(
-      { detailRect: h, galleryRect: o, pageRect: g, scrollOffset: e },
+      { detailRect: u, galleryRect: r, pageRect: g, scrollOffset: e },
       t
     )
   };
 }
-const m = (t = {}) => {
-  var r, c;
+const I = (t = {}) => {
+  var h, a;
   const n = {
-    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? 50,
-    damping: ((c = t.spring) == null ? void 0 : c.damping) ?? 10
+    stiffness: ((h = t.spring) == null ? void 0 : h.stiffness) ?? 50,
+    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? 10
   }, e = t.timeout ?? 300;
   let i = null, s = null, l = null;
   return {
-    in: async (o, { scrollOffset: h }) => {
-      const g = o;
-      return !await new Promise((p) => {
-        i ? p(!0) : (s = p, setTimeout(() => {
-          s = null, p(!1);
+    in: async (r, { scrollOffset: u }) => {
+      const g = r;
+      return !await new Promise((y) => {
+        i ? y(!0) : (s = y, setTimeout(() => {
+          s = null, y(!1);
         }, e));
       }) || !i ? (i = null, {
         spring: n,
         tick: () => {
         }
-      }) : (l = I(i, g, h), l ? (i = null, {
+      }) : (l = L(i, g, u), l ? (i = null, {
         spring: n,
-        tick: (p) => {
-          l && l.inAnimation(p);
+        tick: (y) => {
+          l && l.inAnimation(y);
         }
       }) : {
         spring: n,
@@ -251,55 +251,46 @@ const m = (t = {}) => {
         }
       });
     },
-    out: async (o) => ({
+    out: async (r) => ({
       spring: n,
       onStart: () => {
-        i = o, s && (s(!0), s = null);
+        i = r, s && (s(!0), s = null);
       },
-      prepare: (h) => {
-        k(h), h.style.zIndex = "-1";
+      prepare: (u) => {
+        k(u), u.style.zIndex = "-1";
       },
-      tick: (h) => {
-        l && l.outAnimation(h);
+      tick: (u) => {
+        l && l.outAnimation(u);
       }
     })
   };
-};
-function B(t) {
-  const n = t.getBoundingClientRect(), e = t.clientHeight, s = 50 * (window.innerHeight - n.top) / e;
-  return Math.min(Math.max(s, 0), 100);
-}
-const z = (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) ?? 200
-  };
+}, G = (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: (s) => {
-      const l = B(s);
-      return {
-        spring: n,
-        tick: (r) => {
-          s.style.clipPath = `circle(${r * 100}% at 50% ${l}%)`;
-        }
-      };
-    },
-    out: (s) => {
-      const l = B(s);
-      return {
-        spring: n,
-        tick: (r) => {
-          s.style.clipPath = `circle(${r * 100}% at 50% ${l}%)`, s.style.zIndex = "100";
-        },
-        prepare: k
-      };
-    }
+    in: (h) => ({
+      spring: e,
+      tick: (a) => {
+        const r = i ? (1 - a) * 100 : (1 - a) * -100;
+        h.style.transform = `translateY(${r}%)`;
+      }
+    }),
+    out: (h) => ({
+      spring: e,
+      tick: (a) => {
+        const r = i ? (1 - a) * -100 : (1 - a) * 100;
+        h.style.transform = `translateY(${r}%)`;
+      },
+      prepare: k
+    })
   };
 };
 export {
   X as fade,
-  Y as hero,
-  m as pinterest,
-  z as ripple
+  b as hero,
+  I as pinterest,
+  G as scroll
 };

package/dist/view-transitions/scroll.d.ts

@@ -0,0 +1,8 @@
+import { SpringConfig, SggoiTransition } from '../types';
+interface ScrollOptions {
+    direction?: "up" | "down";
+    spring?: Partial<SpringConfig>;
+}
+export declare const scroll: (options?: ScrollOptions) => SggoiTransition;
+export {};
+//# sourceMappingURL=scroll.d.ts.map

package/dist/view-transitions/scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/scroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG9D,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB,KAAG,eA8BpD,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ssgoi/core",
-  "version": "0.0.3",
-  "description": "A smooth page transition library",
+  "version": "2.0.0",
+  "description": "Core animation engine for SSGOI - Native app-like page transitions with spring physics",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",
@@ -31,6 +31,12 @@
       "import": "./dist/types.js",
       "require": "./dist/types.cjs",
       "default": "./dist/types.js"
+    },
+    "./presets": {
+      "types": "./dist/presets/index.d.ts",
+      "import": "./dist/presets/index.js",
+      "require": "./dist/presets/index.cjs",
+      "default": "./dist/presets/index.js"
     }
   },
   "files": [
@@ -46,13 +52,23 @@
     "spring-physics",
     "ssgoi"
   ],
-  "author": "",
+  "author": "MeurSyphus <tmdeoans@snu.ac.kr>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/ssgoi.git",
+    "url": "git+https://github.com/meursyphus/ssgoi.git",
     "directory": "packages/core"
   },
+  "homepage": "https://ssgoi.dev",
+  "bugs": {
+    "url": "https://github.com/meursyphus/ssgoi/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "devDependencies": {
     "@types/node": "^22.10.6",
     "typescript": "^5.7.3",
@@ -64,6 +80,7 @@
   },
   "scripts": {
     "dev": "vite",
+    "watch": "vite build --watch",
     "build": "tsc && vite build",
     "preview": "vite preview"
   }