@ssgoi/core 0.0.3 → 2.1.0

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

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

@@ -1,5 +1,6 @@
+export * from './drill';
 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC"}

package/dist/view-transitions/index.js

@@ -1,84 +1,142 @@
-import { p as k } from "../utils-DR41YsAh.js";
-const X = (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
+import { a as x, s as Y } from "../utils-DTRMUQW4.js";
+const b = (t = {}) => {
+  var l, r;
+  const { opacity: n = !1, direction: s = "enter" } = t, e = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 150,
+    damping: ((r = t.spring) == null ? void 0 : r.damping) ?? 20
   };
+  return s === "enter" ? {
+    in: (a) => ({
+      spring: e,
+      tick: (i) => {
+        a.style.transform = `translateX(${(1 - i) * 100}%)`, n && (a.style.opacity = i.toString());
+      }
+    }),
+    out: (a) => ({
+      spring: e,
+      prepare: (i) => {
+        x(i), i.style.zIndex = "-1";
+      },
+      tick: (i) => {
+        a.style.transform = `translateX(${-(1 - i) * 20}%)`, n && (a.style.opacity = i.toString());
+      }
+    })
+  } : {
+    in: (a) => ({
+      spring: {
+        stiffness: 100,
+        damping: 20
+      },
+      tick: (i) => {
+        a.style.transform = `translateX(${-(1 - i) * 20}%)`, n && (a.style.opacity = i.toString());
+      }
+    }),
+    out: (a) => ({
+      spring: {
+        stiffness: 100,
+        damping: 20
+      },
+      prepare: (i) => {
+        x(i), i.style.zIndex = "100";
+      },
+      tick: (i) => {
+        a.style.transform = `translateX(${(1 - i) * 100}%)`, n && (a.style.opacity = i.toString());
+      }
+    })
+  };
+}, q = { stiffness: 400, damping: 20 }, F = { stiffness: 40, damping: 8 }, X = 100, v = (t = {}) => {
+  const {
+    inSpring: n = F,
+    outSpring: s = q,
+    transitionDelay: e = X
+  } = t;
+  let l, r = null;
   return {
-    in: (s) => ({
+    in: (a) => ({
       spring: n,
-      tick: (l) => {
-        s.style.opacity = l.toString();
+      prepare: (i) => {
+        i.style.opacity = "0";
+      },
+      wait: async () => {
+        l && (await l, await Y(e));
+      },
+      tick: (i) => {
+        a.style.opacity = i.toString();
       }
     }),
-    out: (s) => ({
-      spring: n,
-      tick: (l) => {
-        s.style.opacity = l.toString();
+    out: (a) => (l = new Promise((i) => {
+      r = i;
+    }), {
+      spring: s,
+      tick: (i) => {
+        a.style.opacity = i.toString();
       },
-      prepare: k
+      prepare: x,
+      onEnd: () => {
+        r && r();
+      }
     })
   };
 };
-function D(t, n) {
+function z(t, n) {
   return t.querySelector(`[data-hero-key="${n}"]`);
 }
 function A(t, n) {
-  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+  const s = t.getBoundingClientRect(), e = n.getBoundingClientRect();
   return new DOMRect(
-    i.left - e.left,
-    i.top - e.top,
-    i.width,
-    i.height
+    e.left - s.left,
+    e.top - s.top,
+    e.width,
+    e.height
   );
 }
-const Y = (t = {}) => {
-  var l, r;
+const H = (t = {}) => {
+  var r, a;
   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;
+    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? 300,
+    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? 30
+  }, s = t.timeout ?? 300;
+  let e = null, l = null;
   return {
-    in: async (c, o) => {
-      const h = c, g = Array.from(h.querySelectorAll("[data-hero-key]"));
-      if (g.length === 0)
+    in: async (i, o) => {
+      const c = i, y = Array.from(c.querySelectorAll("[data-hero-key]"));
+      if (y.length === 0)
         return {
           spring: n,
           tick: () => {
           }
           // No hero elements, skip animation
         };
-      if (!await new Promise((a) => {
-        i ? a(!0) : (s = a, setTimeout(() => {
-          s = null, a(!1);
-        }, e));
-      }) || !i)
-        return i = null, {
+      if (!await new Promise((h) => {
+        e ? h(!0) : (l = h, setTimeout(() => {
+          l = null, h(!1);
+        }, s));
+      }) || !e)
+        return e = null, {
           spring: n,
           tick: () => {
           }
           // 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);
+      const p = y.map((h) => {
+        const $ = h.getAttribute("data-hero-key");
+        if (!$) return null;
+        const u = z(e, $);
         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 g = h, f = A(e, u), w = A(c, g), k = f.left - w.left - o.scrollOffset.x, T = f.top - w.top - o.scrollOffset.y, m = f.width / w.width, D = f.height / w.height, E = g.style.transform, B = g.style.position, L = g.style.transformOrigin, P = g.style.zIndex;
         return {
-          toEl: d,
-          dx: x,
-          dy: M,
-          dw: q,
-          dh: T,
-          originalTransform: C,
-          originalPosition: E,
-          originalTransformOrigin: P
+          toEl: g,
+          dx: k,
+          dy: T,
+          dw: m,
+          dh: D,
+          originalTransform: E,
+          originalPosition: B,
+          originalTransformOrigin: L,
+          originalZIndex: P
         };
       }).filter(Boolean);
-      return i = null, p.length === 0 ? {
+      return e = null, p.length === 0 ? {
         spring: n,
         tick: () => {
         }
@@ -86,164 +144,165 @@ const Y = (t = {}) => {
       } : {
         spring: n,
         prepare: () => {
-          p.forEach(({ toEl: a }) => {
-            a.style.position = "relative", a.style.transformOrigin = "top left";
+          p.forEach(({ toEl: h }) => {
+            h.style.position = "relative", h.style.transformOrigin = "top left", h.style.zIndex = "1000";
           });
         },
-        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: (h) => {
+          p.forEach(({ toEl: $, dx: u, dy: g, dw: f, dh: w }) => {
+            $.style.transform = `translate(${(1 - h) * u}px,${(1 - h) * g}px) scale(${h + (1 - h) * f}, ${h + (1 - h) * w})`;
           });
         },
         onEnd: () => {
           p.forEach(
             ({
-              toEl: a,
-              originalTransform: f,
+              toEl: h,
+              originalTransform: $,
               originalPosition: u,
-              originalTransformOrigin: d
+              originalTransformOrigin: g,
+              originalZIndex: f
             }) => {
-              a.style.transform = f, a.style.position = u, a.style.transformOrigin = d;
+              h.style.transform = $, h.style.position = u, h.style.transformOrigin = g, h.style.zIndex = f;
             }
           );
         }
       };
     },
-    out: async (c) => ({
+    out: async (i) => ({
       onStart: () => {
-        i = c, s && (s(!0), s = null);
+        e = i, l && (l(!0), l = null);
       },
       prepare: (o) => {
-        k(o), o.style.opacity = "0";
+        x(o), o.style.opacity = "0";
       }
     })
   };
 };
 function S(t, n) {
-  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+  const s = t.getBoundingClientRect(), e = n.getBoundingClientRect();
   return new DOMRect(
-    i.left - e.left,
-    i.top - e.top,
-    i.width,
-    i.height
+    e.left - s.left,
+    e.top - s.top,
+    e.width,
+    e.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})`;
+  pageRect: s,
+  scrollOffset: e
+}, l) {
+  const r = n.left - t.left + (n.width - t.width) / 2 - e.x, a = n.top - t.top + (n.height - t.height) / 2 - e.y, i = n.width / t.width, o = n.height / t.height, c = Math.max(i, o), y = t.top / s.height * 100, d = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, h = t.left / s.width * 100;
+  return l.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, ($) => {
+    const u = 1 - $, g = y * u, f = d * u, w = p * u, k = h * u;
+    l.style.clipPath = `inset(${g}% ${f}% ${w}% ${k}%)`, l.style.transform = `translate(${r * u}px, ${a * u}px) scale(${1 + (c - 1) * u})`;
   };
 }
-function b({
+function M({
   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}`;
+  scrollOffset: s
+}, e) {
+  const l = n.left - t.left + (n.width - t.width) / 2 + s.x, r = n.top - t.top + (n.height - t.height) / 2 + s.y, a = n.width / t.width, i = n.height / t.height, o = Math.max(a, i);
+  return (c) => {
+    e.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
+    const y = 1 - c;
+    e.style.transform = `translate(${l * y - s.x}px, ${r * y - s.y}px) scale(${1 + (o - 1) * y})`, e.style.opacity = `${1 - y}`;
   };
 }
 function O({
   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}`;
+  scrollOffset: s
+}, e) {
+  const l = n.left - t.left + (n.width - t.width) / 2 - s.x, r = n.top - t.top + (n.height - t.height) / 2 - s.y, a = n.width / t.width, i = n.height / t.height, o = Math.max(a, i);
+  return (c) => {
+    const y = 1 - c, d = c;
+    e.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, e.style.transform = `translate(${l * y}px, ${r * y}px) scale(${1 + (o - 1) * y})`, e.style.opacity = `${d}`;
   };
 }
-function F({
+function _({
   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})`;
+  pageRect: s,
+  scrollOffset: e
+}, l) {
+  const r = n.left - t.left + (n.width - t.width) / 2 + e.x, a = n.top - t.top + (n.height - t.height) / 2 + e.y, i = n.width / t.width, o = n.height / t.height, c = Math.min(i, o), y = t.top / s.height * 100, d = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, h = t.left / s.width * 100;
+  return l.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, ($) => {
+    const u = 1 - $, g = y * u, f = d * u, w = p * u, k = h * u;
+    l.style.clipPath = `inset(${g}% ${f}% ${w}% ${k}%)`, l.style.transform = `translate(${r * u - e.x}px, ${a * u - e.y}px) scale(${1 + (c - 1) * u})`;
   };
 }
-function I(t, n, e) {
-  const i = t.querySelector(
+function U(t, n, s) {
+  const e = t.querySelector(
     "[data-pinterest-detail-key]"
-  ), s = n.querySelector(
+  ), l = 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);
+  let r = null, a = null, i = !1;
+  if (!e && l) {
+    a = l;
+    const d = a.getAttribute("data-pinterest-detail-key");
+    if (!d) return null;
+    r = t.querySelector(
+      `[data-pinterest-gallery-key="${d}"]`
+    ), r && (i = !0);
+  } else if (e && !l) {
+    a = e;
+    const d = a.getAttribute("data-pinterest-detail-key");
+    if (!d) return null;
+    r = n.querySelector(
+      `[data-pinterest-gallery-key="${d}"]`
+    ), r && (i = !1);
   }
-  if (!l || !r)
+  if (!r || !a)
     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 o = S(i ? t : n, r), c = S(i ? n : t, a), y = n.getBoundingClientRect();
+  return i ? {
+    inAnimation: C(
+      { detailRect: c, galleryRect: o, pageRect: y, scrollOffset: s },
       n
     ),
-    outAnimation: b(
-      { galleryRect: o, detailRect: h, scrollOffset: e },
+    outAnimation: M(
+      { galleryRect: o, detailRect: c, scrollOffset: s },
       t
     )
   } : {
     inAnimation: O(
-      { galleryRect: o, detailRect: h, scrollOffset: e },
+      { galleryRect: o, detailRect: c, scrollOffset: s },
       n
     ),
-    outAnimation: F(
-      { detailRect: h, galleryRect: o, pageRect: g, scrollOffset: e },
+    outAnimation: _(
+      { detailRect: c, galleryRect: o, pageRect: y, scrollOffset: s },
       t
     )
   };
 }
-const m = (t = {}) => {
-  var r, c;
+const N = (t = {}) => {
+  var a, i;
   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;
+    stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ?? 50,
+    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 10
+  }, s = t.timeout ?? 300;
+  let e = null, l = null, r = null;
   return {
-    in: async (o, { scrollOffset: h }) => {
-      const g = o;
+    in: async (o, { scrollOffset: c }) => {
+      const y = o;
       return !await new Promise((p) => {
-        i ? p(!0) : (s = p, setTimeout(() => {
-          s = null, p(!1);
-        }, e));
-      }) || !i ? (i = null, {
+        e ? p(!0) : (l = p, setTimeout(() => {
+          l = null, p(!1);
+        }, s));
+      }) || !e ? (e = null, {
         spring: n,
         tick: () => {
         }
-      }) : (l = I(i, g, h), l ? (i = null, {
+      }) : (r = U(e, y, c), r ? (e = null, {
         spring: n,
         tick: (p) => {
-          l && l.inAnimation(p);
+          r && r.inAnimation(p);
         }
       }) : {
         spring: n,
@@ -254,52 +313,49 @@ const m = (t = {}) => {
     out: async (o) => ({
       spring: n,
       onStart: () => {
-        i = o, s && (s(!0), s = null);
+        e = o, l && (l(!0), l = null);
       },
-      prepare: (h) => {
-        k(h), h.style.zIndex = "-1";
+      prepare: (c) => {
+        x(c), c.style.zIndex = "-1";
       },
-      tick: (h) => {
-        l && l.outAnimation(h);
+      tick: (c) => {
+        r && r.outAnimation(c);
       }
     })
   };
-};
-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
-  };
+}, I = {
+  stiffness: 30,
+  damping: 7
+}, Z = (t = {}) => {
+  var l, r;
+  const n = t.direction ?? "up", s = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? I.stiffness,
+    damping: ((r = t.spring) == null ? void 0 : r.damping) ?? I.damping
+  }, e = 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: (a) => ({
+      spring: s,
+      tick: (i) => {
+        const o = e ? (1 - i) * 100 : (1 - i) * -100;
+        a.style.transform = `translateY(${o}vh)`;
+      }
+    }),
+    out: (a) => ({
+      spring: s,
+      tick: (i) => {
+        const o = e ? (1 - i) * -100 : (1 - i) * 100;
+        a.style.transform = `translateY(${o}vh)`;
+      },
+      prepare: (i) => {
+        x(i), i.style.zIndex = e ? "-1" : "1";
+      }
+    })
   };
 };
 export {
-  X as fade,
-  Y as hero,
-  m as pinterest,
-  z as ripple
+  b as drill,
+  v as fade,
+  H as hero,
+  N as pinterest,
+  Z 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;AAOD,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB,KAAG,eAkCpD,CAAC"}