@ssgoi/core 2.3.1 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,130 @@
1
+ function R(i, a) {
2
+ function o(d) {
3
+ let l = 0, y = 0;
4
+ const t = d.offsetWidth, g = d.offsetHeight;
5
+ let s = d;
6
+ for (; s; )
7
+ l += s.offsetTop, y += s.offsetLeft, s = s.offsetParent;
8
+ return l -= window.scrollY, y -= window.scrollX, { top: l, left: y, width: t, height: g };
9
+ }
10
+ const e = o(i), n = o(a);
11
+ return new DOMRect(
12
+ n.left - e.left,
13
+ n.top - e.top,
14
+ n.width,
15
+ n.height
16
+ );
17
+ }
18
+ const v = (i, a) => {
19
+ i.style.position = "absolute", i.style.width = "100%", i.style.top = `${-1 * ((a == null ? void 0 : a.scroll.y) ?? 0)}px`, i.style.left = "0";
20
+ };
21
+ function M(i, a = "viewport") {
22
+ if (a === "positioned-parent") {
23
+ const o = i.positionedParent.getBoundingClientRect();
24
+ return {
25
+ top: o.top,
26
+ left: o.left,
27
+ width: o.width,
28
+ height: o.height
29
+ };
30
+ } else {
31
+ const o = R(document.body, i.positionedParent);
32
+ return {
33
+ top: i.scroll.y,
34
+ left: 0,
35
+ width: o.width,
36
+ height: window.innerHeight - o.top
37
+ };
38
+ }
39
+ }
40
+ const F = (i = {}) => O(i), O = (i = {}) => {
41
+ var l, y;
42
+ const a = {
43
+ // Much slower animation - 4x duration by reducing stiffness further
44
+ stiffness: ((l = i.spring) == null ? void 0 : l.stiffness) ?? 50,
45
+ damping: ((y = i.spring) == null ? void 0 : y.damping) ?? 30
46
+ }, o = i.initialRotation ?? 45, e = i.initialScale ?? 0.01, n = i.rotationTriggerPoint ?? 0.8, d = i.containerMode ?? "viewport";
47
+ return {
48
+ out: async (t, g) => {
49
+ const s = t.style.opacity;
50
+ return {
51
+ spring: {
52
+ stiffness: 80,
53
+ damping: 25
54
+ },
55
+ from: 1,
56
+ to: 0,
57
+ prepare: () => {
58
+ v(t, g), t.style.opacity = "1";
59
+ },
60
+ tick: (w) => {
61
+ t.style.opacity = String(w);
62
+ },
63
+ onEnd: () => {
64
+ t.style.opacity = s;
65
+ }
66
+ };
67
+ },
68
+ in: async (t, g) => {
69
+ const s = M(g, d), w = t.style.transform, b = t.style.transformOrigin, x = t.style.position, $ = t.style.zIndex;
70
+ return {
71
+ spring: a,
72
+ from: 0,
73
+ to: 1,
74
+ prepare: () => {
75
+ const r = Math.min(s.width, s.height) * 0.4;
76
+ if (t.style.setProperty(
77
+ "--max-border-radius",
78
+ `${r}px`
79
+ ), t.style.setProperty("--border-radius-scale", "1"), t.style.willChange = "transform", t.style.backfaceVisibility = "hidden", d === "positioned-parent")
80
+ t.style.transformOrigin = "50% 50%", t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.width = `${s.width}px`, t.style.height = `${s.height}px`;
81
+ else {
82
+ const p = s.left + s.width / 2, h = s.top + s.height / 2;
83
+ t.style.transformOrigin = `${p}px ${h}px`, t.style.position = "fixed", t.style.top = `${s.top}px`, t.style.left = `${s.left}px`, t.style.width = `${s.width}px`, t.style.height = `${s.height}px`;
84
+ }
85
+ t.style.zIndex = "1000", t.style.overflow = "hidden", t.style.transform = `rotate(${o}deg) scale(${e}) translateZ(0)`, t.style.borderRadius = "calc(var(--max-border-radius) * var(--border-radius-scale))", t.style.opacity = "1";
86
+ },
87
+ tick: (r) => {
88
+ let p;
89
+ if (r <= 0.05)
90
+ p = e;
91
+ else if (r <= n) {
92
+ const c = (r - 0.05) / (n - 0.05), u = Math.pow(c, 9);
93
+ p = e + (0.8 - e) * u;
94
+ } else {
95
+ const c = (r - n) / (1 - n);
96
+ p = 0.8 + 0.2 * (1 - Math.pow(1 - c, 3));
97
+ }
98
+ let h;
99
+ const f = 0.7;
100
+ if (r <= f)
101
+ h = o;
102
+ else {
103
+ const c = (r - f) / (1 - f), u = 1 - Math.pow(1 - c, 2);
104
+ h = o * (1 - u);
105
+ }
106
+ let P;
107
+ if (r <= f)
108
+ P = 1;
109
+ else {
110
+ const c = (r - f) / (1 - f);
111
+ P = 1 - Math.pow(c, 0.5);
112
+ }
113
+ t.style.transform = `rotate(${h.toFixed(2)}deg) scale(${p.toFixed(4)}) translateZ(0)`, t.style.setProperty(
114
+ "--border-radius-scale",
115
+ P.toFixed(4)
116
+ );
117
+ },
118
+ onEnd: () => {
119
+ t.style.willChange = "", t.style.backfaceVisibility = "", t.style.removeProperty("--max-border-radius"), t.style.removeProperty("--border-radius-scale"), t.style.transform = w, t.style.transformOrigin = b, t.style.position = x, t.style.zIndex = $, t.style.top = "", t.style.left = "", t.style.width = "", t.style.height = "", t.style.overflow = "", t.style.borderRadius = "";
120
+ }
121
+ };
122
+ }
123
+ };
124
+ };
125
+ export {
126
+ F as a,
127
+ R as g,
128
+ O as j,
129
+ v as p
130
+ };
@@ -0,0 +1 @@
1
+ "use strict";function b(i,a){function o(d){let l=0,y=0;const t=d.offsetWidth,g=d.offsetHeight;let s=d;for(;s;)l+=s.offsetTop,y+=s.offsetLeft,s=s.offsetParent;return l-=window.scrollY,y-=window.scrollX,{top:l,left:y,width:t,height:g}}const e=o(i),n=o(a);return new DOMRect(n.left-e.left,n.top-e.top,n.width,n.height)}const x=(i,a)=>{i.style.position="absolute",i.style.width="100%",i.style.top=`${-1*((a==null?void 0:a.scroll.y)??0)}px`,i.style.left="0"};function M(i,a="viewport"){if(a==="positioned-parent"){const o=i.positionedParent.getBoundingClientRect();return{top:o.top,left:o.left,width:o.width,height:o.height}}else{const o=b(document.body,i.positionedParent);return{top:i.scroll.y,left:0,width:o.width,height:window.innerHeight-o.top}}}const F=(i={})=>R(i),R=(i={})=>{var l,y;const a={stiffness:((l=i.spring)==null?void 0:l.stiffness)??50,damping:((y=i.spring)==null?void 0:y.damping)??30},o=i.initialRotation??45,e=i.initialScale??.01,n=i.rotationTriggerPoint??.8,d=i.containerMode??"viewport";return{out:async(t,g)=>{const s=t.style.opacity;return{spring:{stiffness:80,damping:25},from:1,to:0,prepare:()=>{x(t,g),t.style.opacity="1"},tick:w=>{t.style.opacity=String(w)},onEnd:()=>{t.style.opacity=s}}},in:async(t,g)=>{const s=M(g,d),w=t.style.transform,$=t.style.transformOrigin,O=t.style.position,v=t.style.zIndex;return{spring:a,from:0,to:1,prepare:()=>{const r=Math.min(s.width,s.height)*.4;if(t.style.setProperty("--max-border-radius",`${r}px`),t.style.setProperty("--border-radius-scale","1"),t.style.willChange="transform",t.style.backfaceVisibility="hidden",d==="positioned-parent")t.style.transformOrigin="50% 50%",t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.width=`${s.width}px`,t.style.height=`${s.height}px`;else{const p=s.left+s.width/2,h=s.top+s.height/2;t.style.transformOrigin=`${p}px ${h}px`,t.style.position="fixed",t.style.top=`${s.top}px`,t.style.left=`${s.left}px`,t.style.width=`${s.width}px`,t.style.height=`${s.height}px`}t.style.zIndex="1000",t.style.overflow="hidden",t.style.transform=`rotate(${o}deg) scale(${e}) translateZ(0)`,t.style.borderRadius="calc(var(--max-border-radius) * var(--border-radius-scale))",t.style.opacity="1"},tick:r=>{let p;if(r<=.05)p=e;else if(r<=n){const c=(r-.05)/(n-.05),u=Math.pow(c,9);p=e+(.8-e)*u}else{const c=(r-n)/(1-n);p=.8+.2*(1-Math.pow(1-c,3))}let h;const f=.7;if(r<=f)h=o;else{const c=(r-f)/(1-f),u=1-Math.pow(1-c,2);h=o*(1-u)}let P;if(r<=f)P=1;else{const c=(r-f)/(1-f);P=1-Math.pow(c,.5)}t.style.transform=`rotate(${h.toFixed(2)}deg) scale(${p.toFixed(4)}) translateZ(0)`,t.style.setProperty("--border-radius-scale",P.toFixed(4))},onEnd:()=>{t.style.willChange="",t.style.backfaceVisibility="",t.style.removeProperty("--max-border-radius"),t.style.removeProperty("--border-radius-scale"),t.style.transform=w,t.style.transformOrigin=$,t.style.position=O,t.style.zIndex=v,t.style.top="",t.style.left="",t.style.width="",t.style.height="",t.style.overflow="",t.style.borderRadius=""}}}}};exports.getRect=b;exports.jaemin=F;exports.jaeminInternal=R;exports.prepareOutgoing=x;
package/dist/types.d.ts CHANGED
@@ -74,6 +74,12 @@ export type SsgoiConfig = {
74
74
  from: string;
75
75
  to: string;
76
76
  };
77
+ /**
78
+ * Skip page transitions when iOS/Safari swipe-back gesture is detected
79
+ * This prevents animation conflicts between SSGOI and Safari's native swipe animation
80
+ * @default true
81
+ */
82
+ skipOnIosSwipe?: boolean;
77
83
  };
78
84
  export type SsgoiContext = (path: string) => Transition & {
79
85
  key: TransitionKey;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"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"}
@@ -1,6 +1,7 @@
1
+ import { SggoiTransitionContext } from '../types';
1
2
  /**
2
3
  * Applies common styles for outgoing page elements
3
4
  * Makes the element absolute positioned to allow the incoming page to take its place
4
5
  */
5
- export declare const prepareOutgoing: (element: HTMLElement) => void;
6
+ export declare const prepareOutgoing: (element: HTMLElement, context?: SggoiTransitionContext) => void;
6
7
  //# sourceMappingURL=prepare-outgoing.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"prepare-outgoing.d.ts","sourceRoot":"","sources":["../../src/lib/utils/prepare-outgoing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,KAAG,IAKtD,CAAC"}
1
+ {"version":3,"file":"prepare-outgoing.d.ts","sourceRoot":"","sources":["../../src/lib/utils/prepare-outgoing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,SAAS,WAAW,EACpB,UAAU,sBAAsB,KAC/B,IAKF,CAAC"}
package/dist/utils.d.ts CHANGED
@@ -1,8 +1,3 @@
1
- /**
2
- * Applies common styles for outgoing page elements
3
- * Makes the element absolute positioned to allow the incoming page to take its place
4
- */
5
- export declare const prepareOutgoing: (element: HTMLElement) => void;
6
1
  /**
7
2
  * Gets the scrolling element that contains the given element
8
3
  * Returns the first scrollable parent element or document.documentElement
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,KAAG,IAKtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,WAAW,KAAG,WAyB1D,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,MAAM,KACb;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IA+BnD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,IAAI,MAAM,KAAG,OAAO,CAAC,IAAI,CAE9C,CAAC"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,WAAW,KAAG,WAyB1D,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,MAAM,KACb;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IA+BnD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,IAAI,MAAM,KAAG,OAAO,CAAC,IAAI,CAE9C,CAAC"}
@@ -2,6 +2,9 @@ import { SggoiTransition, SpringConfig } from '../types';
2
2
  interface FilmOptions {
3
3
  spring?: SpringConfig;
4
4
  scale?: number;
5
+ border?: {
6
+ color?: string;
7
+ };
5
8
  }
6
9
  export declare const film: (options?: FilmOptions) => SggoiTransition;
7
10
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"film.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/film.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EAEf,YAAY,EACb,MAAM,UAAU,CAAC;AAgBlB,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwDD,eAAO,MAAM,IAAI,GAAI,UAAU,WAAW,KAAG,eAsG5C,CAAC"}
1
+ {"version":3,"file":"film.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/film.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EAEf,YAAY,EACb,MAAM,UAAU,CAAC;AAmClB,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,eAAO,MAAM,IAAI,GAAI,UAAU,WAAW,KAAG,eAoJ5C,CAAC"}
@@ -0,0 +1,28 @@
1
+ import { SpringConfig, SggoiTransition } from '../types';
2
+ interface JaeminOptions {
3
+ spring?: Partial<SpringConfig>;
4
+ initialRotation?: number;
5
+ initialScale?: number;
6
+ rotationTriggerPoint?: number;
7
+ }
8
+ /**
9
+ * Jaemin Transition
10
+ *
11
+ * Implements a shared element transition where:
12
+ * 1. Page A fades out
13
+ * 2. Page B appears rotated and scaled down at center
14
+ * 3. Page B scales up while rotating back to normal
15
+ *
16
+ * Based on analyzed animation log data showing 45° rotation over 1.728s
17
+ * Created by Jaemin
18
+ */
19
+ export declare const jaemin: (options?: JaeminOptions) => SggoiTransition;
20
+ /**
21
+ * Jaemin Reverse Transition
22
+ *
23
+ * Simple fade out for reverse navigation
24
+ * Created by Jaemin
25
+ */
26
+ export declare const jaeminReverse: (options?: Pick<JaeminOptions, "spring">) => SggoiTransition;
27
+ export {};
28
+ //# sourceMappingURL=hero-rotate.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hero-rotate.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/hero-rotate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9D,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB,KAAG,eA4JpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,UAAS,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAM,KAC1C,eA+CF,CAAC"}
@@ -2,6 +2,7 @@ import { SpringConfig, SggoiTransition } from '../types';
2
2
  interface HeroOptions {
3
3
  spring?: Partial<SpringConfig>;
4
4
  timeout?: number;
5
+ maxDistance?: number;
5
6
  }
6
7
  export declare const hero: (options?: HeroOptions) => SggoiTransition;
7
8
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/hero.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI9D,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD,eAAO,MAAM,IAAI,GAAI,UAAS,WAAgB,KAAG,eAgKhD,CAAC"}
1
+ {"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/hero.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI9D,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,IAAI,GAAI,UAAS,WAAgB,KAAG,eAqKhD,CAAC"}
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=t=>{t.style.position="absolute",t.style.width="100%",t.style.top="0",t.style.left="0"},N=t=>new Promise(n=>setTimeout(n,t)),v={stiffness:80,damping:25},C={stiffness:75,damping:25},G=300,q=10,B="horizontal",M="#000000",H=(t={})=>{const{inSpring:n=C,outSpring:e=v,transitionDelay:s=G,blindCount:l=q,direction:a=B,staggerDelay:r=100,blindColor:i=M}=t;let o,h=null;const d=(p,c,f,u=!1)=>{const y=Math.min(.5,r*f/1e3),g=1-y,x=(u?f-1-c:c)/f*y,S=x+g;return p<=x?0:p>=S?1:(p-x)/g},$=(p,c,f="left")=>{window.getComputedStyle(p).position==="static"&&(p.style.position="relative");const y=document.createElement("div");y.className="blind-container",y.style.cssText=`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../jaemin-DL1-g_B5.cjs"),H=t=>new Promise(e=>setTimeout(e,t)),N={stiffness:80,damping:25},B={stiffness:75,damping:25},G=300,M=10,q="horizontal",V="#000000",j=(t={})=>{const{inSpring:e=B,outSpring:o=N,transitionDelay:a=G,blindCount:i=M,direction:s=q,staggerDelay:r=100,blindColor:n=V}=t;let l,p=null;const d=(y,h,c,g=!1)=>{const f=Math.min(.5,r*c/1e3),$=1-f,x=(g?c-1-h:h)/c*f,w=x+$;return y<=x?0:y>=w?1:(y-x)/$},u=(y,h,c="left")=>{window.getComputedStyle(y).position==="static"&&(y.style.position="relative");const f=document.createElement("div");f.className="blind-container",f.style.cssText=`
2
2
  position: absolute;
3
3
  top: 0;
4
4
  left: 0;
@@ -7,29 +7,29 @@
7
7
  pointer-events: none;
8
8
  z-index: 9999;
9
9
  overflow: hidden;
10
- `;const g=[];for(let w=0;w<l;w++){const x=document.createElement("div");if(a==="horizontal"){const S=100/l,A=`calc(${S}% + 1px)`;x.style.cssText=`
10
+ `;const $=[];for(let m=0;m<i;m++){const x=document.createElement("div");if(s==="horizontal"){const w=100/i,A=`calc(${w}% + 1px)`;x.style.cssText=`
11
11
  position: absolute;
12
- top: ${S*w}%;
12
+ top: ${w*m}%;
13
13
  left: 0;
14
14
  width: 100%;
15
15
  height: ${A};
16
- background: ${i};
17
- transform: scaleX(${c==="hidden"?0:1});
18
- transform-origin: ${f} center;
16
+ background: ${n};
17
+ transform: scaleX(${h==="hidden"?0:1});
18
+ transform-origin: ${c} center;
19
19
  will-change: transform;
20
- `}else{const S=100/l,A=`calc(${S}% + 1px)`;x.style.cssText=`
20
+ `}else{const w=100/i,A=`calc(${w}% + 1px)`;x.style.cssText=`
21
21
  position: absolute;
22
22
  top: 0;
23
- left: ${S*w}%;
23
+ left: ${w*m}%;
24
24
  width: ${A};
25
25
  height: 100%;
26
- background: ${i};
27
- transform: scaleY(${c==="hidden"?0:1});
28
- transform-origin: ${f==="left"?"top":"bottom"} center;
26
+ background: ${n};
27
+ transform: scaleY(${h==="hidden"?0:1});
28
+ transform-origin: ${c==="left"?"top":"bottom"} center;
29
29
  will-change: transform;
30
- `}g.push(x),y.appendChild(x)}return p.appendChild(y),{container:y,blinds:g}};return{out:()=>{let p=null;return o=new Promise(c=>{h=c}),{spring:e,prepare:c=>{D(c),c.style.zIndex="1000",p=$(c,"hidden","left")},onStart:()=>{},tick:c=>{if(!p)return;const f=1-c;p.blinds.forEach((u,y)=>{const g=d(f,y,l,!1);a==="horizontal"?u.style.transform=`scaleX(${g})`:u.style.transform=`scaleY(${g})`})},onEnd:()=>{h&&h()}}},in:()=>{let p=null;return{spring:n,prepare:c=>{c.style.position="relative",c.style.zIndex="0",p=$(c,"closed","right")},onStart:()=>{},wait:async()=>{o&&await o,await N(s)},tick:c=>{p&&p.blinds.forEach((f,u)=>{const y=d(c,u,l,!1);a==="horizontal"?f.style.transform=`scaleX(${1-y})`:f.style.transform=`scaleY(${1-y})`})},onEnd:()=>{p&&p.container&&p.container.remove()}}}}},k=t=>{t.style.position="absolute",t.style.width="100%",t.style.top="0",t.style.left="0"},W=(t={})=>{var l,a;const{opacity:n=!1,direction:e="enter"}=t,s={stiffness:((l=t.spring)==null?void 0:l.stiffness)??150,damping:((a=t.spring)==null?void 0:a.damping)??20};return e==="enter"?{in:r=>({spring:s,tick:i=>{r.style.transform=`translateX(${(1-i)*100}%)`,n&&(r.style.opacity=i.toString())}}),out:r=>({spring:s,prepare:i=>{k(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=>{k(i),i.style.zIndex="100"},tick:i=>{r.style.transform=`translateX(${(1-i)*100}%)`,n&&(r.style.opacity=i.toString())}})}},j=t=>new Promise(n=>setTimeout(n,t)),Z={stiffness:400,damping:20},J={stiffness:40,damping:8},K=100,Q=(t={})=>{const{inSpring:n=J,outSpring:e=Z,transitionDelay:s=K}=t;let l,a=null;return{in:r=>({spring:n,prepare:i=>{i.style.opacity="0"},wait:async()=>{l&&(await l,await j(s))},tick:i=>{r.style.opacity=i.toString()}}),out:r=>(l=new Promise(i=>{a=i}),{spring:e,tick:i=>{r.style.opacity=i.toString()},prepare:k,onEnd:()=>{a&&a()}})}};function P(t,n){function e(a){let r=0,i=0;const o=a.offsetWidth,h=a.offsetHeight;let d=a;for(;d;)r+=d.offsetTop,i+=d.offsetLeft,d=d.offsetParent;return r-=window.scrollY,i-=window.scrollX,{top:r,left:i,width:o,height:h}}const s=e(t),l=e(n);return new DOMRect(l.left-s.left,l.top-s.top,l.width,l.height)}const V={stiffness:10,damping:5},m=.2,T=.82;function I(t){const n=P(document.body,t.positionedParent);return{top:t.scroll.y,left:0,width:n.width,height:window.innerHeight-n.top}}function b(t,n){const e=n.left+n.width/2,s=n.top+n.height/2;t.style.transformOrigin=`${e}px ${s}px`}function Y(t,n){t.style.clipPath=`polygon(
31
- ${n.left}px ${n.top}px,
32
- ${n.left+n.width}px ${n.top}px,
33
- ${n.left+n.width}px ${n.top+n.height}px,
34
- ${n.left}px ${n.top+n.height}px
35
- )`}function E(t,n,e){return t<=n?0:t>=e?1:(t-n)/(e-n)}const R=t=>{const n=(t==null?void 0:t.spring)??V,e=(t==null?void 0:t.scale)??.9;return{out:async(s,l)=>{const a=I(l);return{spring:n,prepare:()=>{D(s),b(s,a),Y(s,a)},onEnd:()=>{s.style.clipPath="",s.style.transformOrigin=""},tick:r=>{const i=1-r;if(i<m){const o=E(i,0,m),h=1-(1-e)*o;s.style.transform=`scale(${h})`}else if(i<T){const o=E(i,m,T),h=-a.height*o;s.style.transform=`translateY(${h}px) scale(${e})`}else{const o=E(i,T,1),h=e+(1-e)*o;s.style.transform=`translateY(${-a.height}px) scale(${h})`}}}},in:async(s,l)=>{const a=I(l);return{spring:n,prepare:()=>{b(s,a),Y(s,a),s.style.transform=`translateY(${a.height}px) scale(${e})`},onEnd:()=>{s.style.clipPath="",s.style.transformOrigin=""},tick:r=>{if(r<m)s.style.transform=`translateY(${a.height}px) scale(${e})`,s.style.opacity="0";else if(r<T){const i=E(r,m,T),o=a.height*(1-i);s.style.transform=`translateY(${o}px) scale(${e})`,s.style.opacity="1"}else{const i=E(r,T,1),o=e+(1-e)*i;s.style.transform=`scale(${o})`,s.style.opacity="1"}}}}}};function tt(t,n){return t.querySelector(`[data-hero-key="${n}"]`)}const nt=(t={})=>{var a,r;const n={stiffness:((a=t.spring)==null?void 0:a.stiffness)??300,damping:((r=t.spring)==null?void 0:r.damping)??30},e=t.timeout??300;let s=null,l=null;return{in:async(i,o)=>{const h=i,d=Array.from(h.querySelectorAll("[data-hero-key]"));if(d.length===0)return{spring:n,tick:()=>{}};if(!await new Promise(c=>{s?c(!0):(l=c,setTimeout(()=>{l=null,c(!1)},e))})||!s)return s=null,{spring:n,tick:()=>{}};const p=d.map(c=>{const f=c.getAttribute("data-hero-key");if(!f)return null;const u=tt(s,f);if(!u)return null;const y=c,g=P(s,u),w=P(h,y),x=g.left-w.left-o.scrollOffset.x,S=g.top-w.top-o.scrollOffset.y,A=g.width/w.width,F=g.height/w.height,O=y.style.transform,X=y.style.position,U=y.style.transformOrigin,z=y.style.zIndex;return{toEl:y,dx:x,dy:S,dw:A,dh:F,originalTransform:O,originalPosition:X,originalTransformOrigin:U,originalZIndex:z}}).filter(Boolean);return s=null,p.length===0?{spring:n,tick:()=>{}}:{spring:n,prepare:()=>{p.forEach(({toEl:c})=>{c.style.position="relative",c.style.transformOrigin="top left",c.style.zIndex="1000"})},tick:c=>{p.forEach(({toEl:f,dx:u,dy:y,dw:g,dh:w})=>{f.style.transform=`translate(${(1-c)*u}px,${(1-c)*y}px) scale(${c+(1-c)*g}, ${c+(1-c)*w})`})},onEnd:()=>{p.forEach(({toEl:c,originalTransform:f,originalPosition:u,originalTransformOrigin:y,originalZIndex:g})=>{c.style.transform=f,c.style.position=u,c.style.transformOrigin=y,c.style.zIndex=g})}}},out:async i=>({onStart:()=>{s=i,l&&(l(!0),l=null)},prepare:o=>{k(o),o.style.opacity="0"}})}};function it({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:s},l){const a=n.left-t.left+(n.width-t.width)/2-s.x,r=n.top-t.top+(n.height-t.height)/2-s.y,i=n.width/t.width,o=n.height/t.height,h=Math.max(i,o),d=t.top/e.height*100,$=(e.width-(t.left+t.width))/e.width*100,p=(e.height-(t.top+t.height))/e.height*100,c=t.left/e.width*100;return l.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,f=>{const u=1-f,y=d*u,g=$*u,w=p*u,x=c*u;l.style.clipPath=`inset(${y}% ${g}% ${w}% ${x}%)`,l.style.transform=`translate(${a*u}px, ${r*u}px) scale(${1+(h-1)*u})`}}function st({galleryRect:t,detailRect:n,scrollOffset:e},s){const l=n.left-t.left+(n.width-t.width)/2+e.x,a=n.top-t.top+(n.height-t.height)/2+e.y,r=n.width/t.width,i=n.height/t.height,o=Math.max(r,i);return h=>{s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const d=1-h;s.style.transform=`translate(${l*d-e.x}px, ${a*d-e.y}px) scale(${1+(o-1)*d})`,s.style.opacity=`${1-d}`}}function et({galleryRect:t,detailRect:n,scrollOffset:e},s){const l=n.left-t.left+(n.width-t.width)/2-e.x,a=n.top-t.top+(n.height-t.height)/2-e.y,r=n.width/t.width,i=n.height/t.height,o=Math.max(r,i);return h=>{const d=1-h,$=h;s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,s.style.transform=`translate(${l*d}px, ${a*d}px) scale(${1+(o-1)*d})`,s.style.opacity=`${$}`}}function rt({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:s},l){const a=n.left-t.left+(n.width-t.width)/2+s.x,r=n.top-t.top+(n.height-t.height)/2+s.y,i=n.width/t.width,o=n.height/t.height,h=Math.min(i,o),d=t.top/e.height*100,$=(e.width-(t.left+t.width))/e.width*100,p=(e.height-(t.top+t.height))/e.height*100,c=t.left/e.width*100;return l.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,f=>{const u=1-f,y=d*u,g=$*u,w=p*u,x=c*u;l.style.clipPath=`inset(${y}% ${g}% ${w}% ${x}%)`,l.style.transform=`translate(${a*u-s.x}px, ${r*u-s.y}px) scale(${1+(h-1)*u})`}}function at(t,n,e){const s=t.querySelector("[data-pinterest-detail-key]"),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 a=null,r=null,i=!1;if(!s&&l){r=l;const $=r.getAttribute("data-pinterest-detail-key");if(!$)return null;a=t.querySelector(`[data-pinterest-gallery-key="${$}"]`),a&&(i=!0)}else if(s&&!l){r=s;const $=r.getAttribute("data-pinterest-detail-key");if(!$)return null;a=n.querySelector(`[data-pinterest-gallery-key="${$}"]`),a&&(i=!1)}if(!a||!r)return null;const o=P(i?t:n,a),h=P(i?n:t,r),d=n.getBoundingClientRect();return i?{inAnimation:it({detailRect:h,galleryRect:o,pageRect:d,scrollOffset:e},n),outAnimation:st({galleryRect:o,detailRect:h,scrollOffset:e},t)}:{inAnimation:et({galleryRect:o,detailRect:h,scrollOffset:e},n),outAnimation:rt({detailRect:h,galleryRect:o,pageRect:d,scrollOffset:e},t)}}const lt=(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},e=t.timeout??300;let s=null,l=null,a=null;return{in:async(o,{scrollOffset:h})=>{const d=o;return!await new Promise(p=>{s?p(!0):(l=p,setTimeout(()=>{l=null,p(!1)},e))})||!s?(s=null,{spring:n,tick:()=>{}}):(a=at(s,d,h),a?(s=null,{spring:n,tick:p=>{a&&a.inAnimation(p)}}):{spring:n,tick:()=>{}})},out:async o=>({spring:n,onStart:()=>{s=o,l&&(l(!0),l=null)},prepare:h=>{k(h),h.style.zIndex="-1"},tick:h=>{a&&a.outAnimation(h)}})}},_={stiffness:30,damping:7},ot=(t={})=>{var l,a;const n=t.direction??"up",e={stiffness:((l=t.spring)==null?void 0:l.stiffness)??_.stiffness,damping:((a=t.spring)==null?void 0:a.damping)??_.damping},s=n==="up";return{in:r=>({spring:e,tick:i=>{const o=s?(1-i)*100:(1-i)*-100;r.style.transform=`translateY(${o}vh)`}}),out:r=>({spring:e,tick:i=>{const o=s?(1-i)*-100:(1-i)*100;r.style.transform=`translateY(${o}vh)`},prepare:i=>{k(i),i.style.zIndex=s?"-1":"1"}})}},L={stiffness:30,damping:7},ct=(t={})=>{var l,a;const n=t.direction??"left",e={stiffness:((l=t.spring)==null?void 0:l.stiffness)??L.stiffness,damping:((a=t.spring)==null?void 0:a.damping)??L.damping},s=n==="left";return{in:r=>({spring:e,tick:i=>{const o=s?(1-i)*100:(1-i)*-100;r.style.transform=`translateX(${o}%)`}}),out:r=>({spring:e,tick:i=>{const o=s?(1-i)*-100:(1-i)*100;r.style.transform=`translateX(${o}%)`},prepare:i=>{D(i),i.style.zIndex=s?"-1":"1"}})}};exports.blind=H;exports.drill=W;exports.fade=Q;exports.film=R;exports.hero=nt;exports.pinterest=lt;exports.scroll=ot;exports.slide=ct;
30
+ `}$.push(x),f.appendChild(x)}return y.appendChild(f),{container:f,blinds:$}};return{out:()=>{let y=null;return l=new Promise(h=>{p=h}),{spring:o,prepare:h=>{b.prepareOutgoing(h),h.style.zIndex="1000",y=u(h,"hidden","left")},onStart:()=>{},tick:h=>{if(!y)return;const c=1-h;y.blinds.forEach((g,f)=>{const $=d(c,f,i,!1);s==="horizontal"?g.style.transform=`scaleX(${$})`:g.style.transform=`scaleY(${$})`})},onEnd:()=>{p&&p()}}},in:()=>{let y=null;return{spring:e,prepare:h=>{h.style.position="relative",h.style.zIndex="0",y=u(h,"closed","right")},onStart:()=>{},wait:async()=>{l&&await l,await H(a)},tick:h=>{y&&y.blinds.forEach((c,g)=>{const f=d(h,g,i,!1);s==="horizontal"?c.style.transform=`scaleX(${1-f})`:c.style.transform=`scaleY(${1-f})`})},onEnd:()=>{y&&y.container&&y.container.remove()}}}}},Z=(t={})=>{var i,s;const{opacity:e=!1,direction:o="enter"}=t,a={stiffness:((i=t.spring)==null?void 0:i.stiffness)??150,damping:((s=t.spring)==null?void 0:s.damping)??20};return o==="enter"?{in:r=>({spring:a,tick:n=>{r.style.transform=`translateX(${(1-n)*100}%)`,e&&(r.style.opacity=n.toString())}}),out:(r,n)=>({spring:a,prepare:l=>{b.prepareOutgoing(l,n),l.style.zIndex="-1"},tick:l=>{r.style.transform=`translateX(${-(1-l)*20}%)`,e&&(r.style.opacity=l.toString())}})}:{in:r=>({spring:{stiffness:100,damping:20},tick:n=>{r.style.transform=`translateX(${-(1-n)*20}%)`,e&&(r.style.opacity=n.toString())}}),out:(r,n)=>({spring:{stiffness:100,damping:20},prepare:l=>{b.prepareOutgoing(l,n),l.style.zIndex="100"},tick:l=>{r.style.transform=`translateX(${(1-l)*100}%)`,e&&(r.style.opacity=l.toString())}})}},J=t=>new Promise(e=>setTimeout(e,t)),K={stiffness:400,damping:20},Q={stiffness:40,damping:8},R=100,tt=(t={})=>{const{inSpring:e=Q,outSpring:o=K,transitionDelay:a=R}=t;let i,s=null;return{in:r=>({spring:e,prepare:n=>{n.style.opacity="0"},wait:async()=>{i&&(await i,await J(a))},tick:n=>{r.style.opacity=n.toString()}}),out:(r,n)=>(i=new Promise(l=>{s=l}),{spring:o,tick:l=>{r.style.opacity=l.toString()},prepare:l=>b.prepareOutgoing(l,n),onEnd:()=>{s&&s()}})}},et={stiffness:5,damping:3.5},nt=.8,it="white",E={start:0,end:.45},L={start:.85,end:1},T={start:.2,end:.9},st=t=>{var i;const e=(t==null?void 0:t.spring)??et,o=(t==null?void 0:t.scale)??nt,a=((i=t==null?void 0:t.border)==null?void 0:i.color)??it;return{out:async(s,r)=>{const n=P(r),l=b.getRect(document.body,r.positionedParent),p=lt(a,{...n,top:l.top});let d=1,u=-n.top;return{spring:e,prepare:()=>{b.prepareOutgoing(s),I(s,n),v(s,n),ot(s,n);for(const y of p)r.positionedParent.appendChild(y)},onEnd:()=>{s.style.clipPath="",s.style.transformOrigin="",setTimeout(()=>{for(const y of p)r.positionedParent.removeChild(y)},1e3)},tick:y=>{const h=1-y;if(E.start<=h&&h<=E.end){const f=k(h,E.start,E.end);d=1-(1-o)*f}if(L.start<=h&&h<=L.end){const f=k(h,L.start,L.end);d=o+(1-o)*f}if(T.start<=h&&h<=T.end){const f=k(h,T.start,T.end);u=-n.top-n.height*f}s.style.transform=`translateY(${u}px) scale(${d})`;const c=(n.width-n.width*d)/2,g=(n.height-n.height*d)/2;rt(p,c,g)}}},in:async(s,r)=>{const n=P(r);let l=o,p=-n.top+n.height;return{spring:e,prepare:()=>{I(s,n),v(s,n),s.style.transform=`translateY(${-n.top+n.height}px) scale(${o})`},onEnd:()=>{s.style.clipPath="",s.style.transformOrigin="",s.style.transform=""},tick:d=>{if(E.start<=d&&d<=E.end){const u=k(d,E.start,E.end);l=1-(1-o)*u}if(L.start<=d&&d<=L.end){const u=k(d,L.start,L.end);l=o+(1-o)*u}if(T.start<=d&&d<=T.end){const u=k(d,T.start,T.end);p=-n.top+n.height*(1-u)}s.style.transform=`translateY(${p}px) scale(${l})`}}}}};function rt(t,e,o){const a=e*.7,i=o*.7;t.topLeft.style.transform=`translate(${a}px, ${i}px)`,t.topRight.style.transform=`translate(${-a}px, ${i}px)`,t.bottomLeft.style.transform=`translate(${a}px, ${-i}px)`,t.bottomRight.style.transform=`translate(${-a}px, ${-i}px)`}function lt(t="white",e){const i=document.createElement("div");i.style.position="fixed",i.style.pointerEvents="none",i.style.zIndex="9999",i.style.top=`${e.top-1}px`,i.style.left=`${e.left-1}px`,i.style.width="15px",i.style.height="15px";const s=document.createElement("div");s.style.position="absolute",s.style.width="15px",s.style.height="1px",s.style.backgroundColor=t,s.style.top="0",s.style.left="0";const r=document.createElement("div");r.style.position="absolute",r.style.width="1px",r.style.height="15px",r.style.backgroundColor=t,r.style.top="0",r.style.left="0",i.appendChild(s),i.appendChild(r);const n=document.createElement("div");n.style.position="fixed",n.style.pointerEvents="none",n.style.zIndex="9999",n.style.top=`${e.top-1}px`,n.style.left=`${e.left+e.width-15+1}px`,n.style.width="15px",n.style.height="15px";const l=document.createElement("div");l.style.position="absolute",l.style.width="15px",l.style.height="1px",l.style.backgroundColor=t,l.style.top="0",l.style.right="0";const p=document.createElement("div");p.style.position="absolute",p.style.width="1px",p.style.height="15px",p.style.backgroundColor=t,p.style.top="0",p.style.right="0",n.appendChild(l),n.appendChild(p);const d=document.createElement("div");d.style.position="fixed",d.style.pointerEvents="none",d.style.zIndex="9999",d.style.top=`${e.top+e.height-15+1}px`,d.style.left=`${e.left-1}px`,d.style.width="15px",d.style.height="15px";const u=document.createElement("div");u.style.position="absolute",u.style.width="15px",u.style.height="1px",u.style.backgroundColor=t,u.style.bottom="0",u.style.left="0";const y=document.createElement("div");y.style.position="absolute",y.style.width="1px",y.style.height="15px",y.style.backgroundColor=t,y.style.bottom="0",y.style.left="0",d.appendChild(u),d.appendChild(y);const h=document.createElement("div");h.style.position="fixed",h.style.pointerEvents="none",h.style.zIndex="9999",h.style.top=`${e.top+e.height-15+1}px`,h.style.left=`${e.left+e.width-15+1}px`,h.style.width="15px",h.style.height="15px";const c=document.createElement("div");c.style.position="absolute",c.style.width="15px",c.style.height="1px",c.style.backgroundColor=t,c.style.bottom="0",c.style.right="0";const g=document.createElement("div");return g.style.position="absolute",g.style.width="1px",g.style.height="15px",g.style.backgroundColor=t,g.style.bottom="0",g.style.right="0",h.appendChild(c),h.appendChild(g),{topLeft:i,topRight:n,bottomLeft:d,bottomRight:h,*[Symbol.iterator](){yield i,yield n,yield d,yield h}}}function P(t){const e=b.getRect(document.body,t.positionedParent);return{top:t.scroll.y,left:0,width:e.width,height:window.innerHeight-e.top}}function I(t,e){const o=e.left+e.width/2,a=e.top+e.height/2;t.style.transformOrigin=`${o}px ${a}px`}function v(t,e){t.style.clipPath=`polygon(
31
+ ${e.left}px ${e.top}px,
32
+ ${e.left+e.width}px ${e.top}px,
33
+ ${e.left+e.width}px ${e.top+e.height}px,
34
+ ${e.left}px ${e.top+e.height}px
35
+ )`}function ot(t,e){t.style.transform=`translateY(${-e.top}px)`}function k(t,e,o){return t<=e?0:t>=o?1:(t-e)/(o-e)}function at(t,e){return t.querySelector(`[data-hero-key="${e}"]`)}const dt=(t={})=>{var r,n;const e={stiffness:((r=t.spring)==null?void 0:r.stiffness)??300,damping:((n=t.spring)==null?void 0:n.damping)??30},o=t.timeout??300,a=t.maxDistance??700;let i=null,s=null;return{in:async(l,p)=>{const d=l,u=Array.from(d.querySelectorAll("[data-hero-key]"));if(u.length===0)return{spring:e,tick:()=>{}};if(!await new Promise(c=>{i?c(!0):(s=c,setTimeout(()=>{s=null,c(!1)},o))})||!i)return i=null,{spring:e,tick:()=>{}};const h=u.map(c=>{const g=c.getAttribute("data-hero-key");if(!g)return null;const f=at(i,g);if(!f)return null;const $=c,m=b.getRect(i,f),x=b.getRect(d,$),w=m.left-x.left-p.scrollOffset.x,A=m.top-x.top-p.scrollOffset.y,_=m.width/x.width,F=m.height/x.height,X=$.style.transform,U=$.style.position,W=$.style.transformOrigin,z=$.style.zIndex;return{toEl:$,dx:w,dy:A,dw:_,dh:F,originalTransform:X,originalPosition:U,originalTransformOrigin:W,originalZIndex:z}}).filter(c=>c!==null&&Math.abs(c.dy)<=a);return i=null,h.length===0?{spring:e,tick:()=>{}}:{spring:e,prepare:()=>{h.forEach(({toEl:c})=>{c.style.position="relative",c.style.transformOrigin="top left",c.style.zIndex="1000"})},tick:c=>{h.forEach(({toEl:g,dx:f,dy:$,dw:m,dh:x})=>{g.style.transform=`translate(${(1-c)*f}px,${(1-c)*$}px) scale(${c+(1-c)*m}, ${c+(1-c)*x})`})},onEnd:()=>{h.forEach(({toEl:c,originalTransform:g,originalPosition:f,originalTransformOrigin:$,originalZIndex:m})=>{c.style.transform=g,c.style.position=f,c.style.transformOrigin=$,c.style.zIndex=m})}}},out:async l=>({onStart:()=>{i=l,s&&(s(!0),s=null)},prepare:p=>{b.prepareOutgoing(p),p.style.opacity="0"}})}};function ct({detailRect:t,galleryRect:e,pageRect:o,scrollOffset:a},i){const s=e.left-t.left+(e.width-t.width)/2-a.x,r=e.top-t.top+(e.height-t.height)/2-a.y,n=e.width/t.width,l=e.height/t.height,p=Math.max(n,l),d=t.top/o.height*100,u=(o.width-(t.left+t.width))/o.width*100,y=(o.height-(t.top+t.height))/o.height*100,h=t.left/o.width*100;return i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,c=>{const g=1-c,f=d*g,$=u*g,m=y*g,x=h*g;i.style.clipPath=`inset(${f}% ${$}% ${m}% ${x}%)`,i.style.transform=`translate(${s*g}px, ${r*g}px) scale(${1+(p-1)*g})`}}function pt({galleryRect:t,detailRect:e,scrollOffset:o},a){const i=e.left-t.left+(e.width-t.width)/2+o.x,s=e.top-t.top+(e.height-t.height)/2+o.y,r=e.width/t.width,n=e.height/t.height,l=Math.max(r,n);return p=>{a.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const d=1-p;a.style.transform=`translate(${i*d-o.x}px, ${s*d-o.y}px) scale(${1+(l-1)*d})`,a.style.opacity=`${1-d}`}}function ht({galleryRect:t,detailRect:e,scrollOffset:o},a){const i=e.left-t.left+(e.width-t.width)/2-o.x,s=e.top-t.top+(e.height-t.height)/2-o.y,r=e.width/t.width,n=e.height/t.height,l=Math.max(r,n);return p=>{const d=1-p,u=p;a.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,a.style.transform=`translate(${i*d}px, ${s*d}px) scale(${1+(l-1)*d})`,a.style.opacity=`${u}`}}function yt({detailRect:t,galleryRect:e,pageRect:o,scrollOffset:a},i){const s=e.left-t.left+(e.width-t.width)/2+a.x,r=e.top-t.top+(e.height-t.height)/2+a.y,n=e.width/t.width,l=e.height/t.height,p=Math.min(n,l),d=t.top/o.height*100,u=(o.width-(t.left+t.width))/o.width*100,y=(o.height-(t.top+t.height))/o.height*100,h=t.left/o.width*100;return i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,c=>{const g=1-c,f=d*g,$=u*g,m=y*g,x=h*g;i.style.clipPath=`inset(${f}% ${$}% ${m}% ${x}%)`,i.style.transform=`translate(${s*g-a.x}px, ${r*g-a.y}px) scale(${1+(p-1)*g})`}}function ut(t,e,o){const a=t.querySelector("[data-pinterest-detail-key]"),i=e.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||e.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let s=null,r=null,n=!1;if(!a&&i){r=i;const u=r.getAttribute("data-pinterest-detail-key");if(!u)return null;s=t.querySelector(`[data-pinterest-gallery-key="${u}"]`),s&&(n=!0)}else if(a&&!i){r=a;const u=r.getAttribute("data-pinterest-detail-key");if(!u)return null;s=e.querySelector(`[data-pinterest-gallery-key="${u}"]`),s&&(n=!1)}if(!s||!r)return null;const l=b.getRect(n?t:e,s),p=b.getRect(n?e:t,r),d=e.getBoundingClientRect();return n?{inAnimation:ct({detailRect:p,galleryRect:l,pageRect:d,scrollOffset:o},e),outAnimation:pt({galleryRect:l,detailRect:p,scrollOffset:o},t)}:{inAnimation:ht({galleryRect:l,detailRect:p,scrollOffset:o},e),outAnimation:yt({detailRect:p,galleryRect:l,pageRect:d,scrollOffset:o},t)}}const gt=(t={})=>{var r,n;const e={stiffness:((r=t.spring)==null?void 0:r.stiffness)??50,damping:((n=t.spring)==null?void 0:n.damping)??10},o=t.timeout??300;let a=null,i=null,s=null;return{in:async(l,{scrollOffset:p})=>{const d=l;return!await new Promise(y=>{a?y(!0):(i=y,setTimeout(()=>{i=null,y(!1)},o))})||!a?(a=null,{spring:e,tick:()=>{}}):(s=ut(a,d,p),s?(a=null,{spring:e,tick:y=>{s&&s.inAnimation(y)}}):{spring:e,tick:()=>{}})},out:async l=>({spring:e,onStart:()=>{a=l,i&&(i(!0),i=null)},prepare:p=>{b.prepareOutgoing(p),p.style.zIndex="-1"},tick:p=>{s&&s.outAnimation(p)}})}},D={stiffness:30,damping:7},ft=(t={})=>{var l,p;const e=t.direction??"up",o={stiffness:((l=t.spring)==null?void 0:l.stiffness)??D.stiffness,damping:((p=t.spring)==null?void 0:p.damping)??D.damping},a=e==="up";let i=null,s=null,r=null;const n=()=>{if(i===null||s===null)return null;const d=Math.min(i,s),u=window.innerHeight;return Math.max(d,u)};return{in:d=>(s=d.offsetHeight,i!==null&&(r=n()),{spring:o,tick:u=>{if(r===null&&(r=n(),r===null))return;const y=a?(1-u)*r:(1-u)*-r;d.style.transform=`translateY(${y}px)`}}),out:d=>({spring:o,onStart:()=>{i=d.offsetHeight,s!==null&&(r=n())},tick:u=>{if(r===null&&(r=n(),r===null))return;const y=a?(1-u)*-r:(1-u)*r;d.style.transform=`translateY(${y}px)`},prepare:u=>{b.prepareOutgoing(u),u.style.zIndex=a?"-1":"1"}})}},O={stiffness:30,damping:7},$t=(t={})=>{var i,s;const e=t.direction??"left",o={stiffness:((i=t.spring)==null?void 0:i.stiffness)??O.stiffness,damping:((s=t.spring)==null?void 0:s.damping)??O.damping},a=e==="left";return{in:r=>({spring:o,tick:n=>{const l=a?(1-n)*100:(1-n)*-100;r.style.transform=`translateX(${l}%)`}}),out:(r,n)=>({spring:o,tick:l=>{const p=a?(1-l)*-100:(1-l)*100;r.style.transform=`translateX(${p}%)`},prepare:l=>{b.prepareOutgoing(l,n),l.style.zIndex=a?"-1":"1"}})}},Y={stiffness:300,damping:30},S=20,C=800,xt=()=>{let t,e=null;return{in:o=>({spring:Y,prepare:a=>{a.style.transform=`perspective(${C}px) rotateY(${S}deg) translateX(-100%)`},wait:async()=>{t&&await t},tick:a=>{const i=(1-a)*S,s=-(1-a)*100;o.style.transform=`perspective(${C}px) rotateY(${i}deg) translateX(${s}%)`},onEnd:()=>{o.style.transform=""}}),out:(o,a)=>(t=new Promise(i=>{e=i}),{spring:Y,prepare:i=>{b.prepareOutgoing(i,a)},tick:i=>{const s=1-i,r=s*S,n=s*100;o.style.transform=`perspective(${C}px) rotateY(${-r}deg) translateX(${n}%)`},onEnd:()=>{e&&e(),o.style.transform=""}})}};exports.jaemin=b.jaemin;exports.blind=j;exports.drill=Z;exports.fade=tt;exports.film=st;exports.hero=dt;exports.pinterest=gt;exports.scroll=ft;exports.slide=$t;exports.strip=xt;
@@ -3,7 +3,9 @@ export * from './drill';
3
3
  export * from './fade';
4
4
  export * from './film';
5
5
  export * from './hero';
6
+ export { jaemin } from './jaemin';
6
7
  export * from './pinterest';
7
8
  export * from './scroll';
8
9
  export * from './slide';
10
+ export * from './strip';
9
11
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}