@cosmictraveler002/anim-kit 1.1.0 → 1.2.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.
- package/README.md +114 -29
- package/dist/anim-kit.standalone.js +18 -8
- package/dist/anim-kit.standalone.js.map +1 -1
- package/dist/core/gsap.d.ts +2 -1
- package/dist/core/gsap.d.ts.map +1 -1
- package/dist/core/gsap.js +3 -2
- package/dist/core/gsap.js.map +1 -1
- package/dist/effects/clip-wipe.d.ts +10 -2
- package/dist/effects/clip-wipe.d.ts.map +1 -1
- package/dist/effects/clip-wipe.js +30 -9
- package/dist/effects/clip-wipe.js.map +1 -1
- package/dist/effects/cursor-follower.d.ts.map +1 -1
- package/dist/effects/cursor-follower.js +22 -4
- package/dist/effects/cursor-follower.js.map +1 -1
- package/dist/effects/flip-words.d.ts +31 -0
- package/dist/effects/flip-words.d.ts.map +1 -0
- package/dist/effects/flip-words.js +104 -0
- package/dist/effects/flip-words.js.map +1 -0
- package/dist/effects/magnetic.d.ts +15 -0
- package/dist/effects/magnetic.d.ts.map +1 -0
- package/dist/effects/magnetic.js +59 -0
- package/dist/effects/magnetic.js.map +1 -0
- package/dist/effects/media-settle.d.ts +2 -0
- package/dist/effects/media-settle.d.ts.map +1 -1
- package/dist/effects/media-settle.js +5 -2
- package/dist/effects/media-settle.js.map +1 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/core/gsap.ts +3 -2
- package/src/effects/clip-wipe.ts +50 -10
- package/src/effects/cursor-follower.ts +21 -4
- package/src/effects/flip-words.ts +148 -0
- package/src/effects/magnetic.ts +87 -0
- package/src/effects/media-settle.ts +7 -1
- package/src/index.ts +9 -1
package/dist/core/gsap.d.ts
CHANGED
|
@@ -10,8 +10,9 @@ import { SplitText } from "gsap/SplitText";
|
|
|
10
10
|
import { Draggable } from "gsap/Draggable";
|
|
11
11
|
import { CustomEase } from "gsap/CustomEase";
|
|
12
12
|
import { ScrollSmoother } from "gsap/ScrollSmoother";
|
|
13
|
+
import { Flip } from "gsap/Flip";
|
|
13
14
|
import type { TargetLike } from "./types.js";
|
|
14
|
-
export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother };
|
|
15
|
+
export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother, Flip };
|
|
15
16
|
/** Named eases recovered from dzinrstudio.com's bundles. */
|
|
16
17
|
export declare const EASES: {
|
|
17
18
|
/** `.76,0,.2,1` — the studio's signature menu / nav curtain ease. */
|
package/dist/core/gsap.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gsap.d.ts","sourceRoot":"","sources":["../../src/core/gsap.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"gsap.d.ts","sourceRoot":"","sources":["../../src/core/gsap.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAEvF,4DAA4D;AAC5D,eAAO,MAAM,KAAK;IAChB,qEAAqE;;IAErE,0DAA0D;;IAE1D,qDAAqD;;IAErD,sDAAsD;;CAE9C,CAAC;AAIX,wDAAwD;AACxD,wBAAgB,QAAQ,IAAI,IAAI,CAuB/B;AAID;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,IAAI,CAIvF"}
|
package/dist/core/gsap.js
CHANGED
|
@@ -10,8 +10,9 @@ import { SplitText } from "gsap/SplitText";
|
|
|
10
10
|
import { Draggable } from "gsap/Draggable";
|
|
11
11
|
import { CustomEase } from "gsap/CustomEase";
|
|
12
12
|
import { ScrollSmoother } from "gsap/ScrollSmoother";
|
|
13
|
+
import { Flip } from "gsap/Flip";
|
|
13
14
|
import { toArray } from "./util.js";
|
|
14
|
-
export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother };
|
|
15
|
+
export { gsap, ScrollTrigger, SplitText, Draggable, CustomEase, ScrollSmoother, Flip };
|
|
15
16
|
/** Named eases recovered from dzinrstudio.com's bundles. */
|
|
16
17
|
export const EASES = {
|
|
17
18
|
/** `.76,0,.2,1` — the studio's signature menu / nav curtain ease. */
|
|
@@ -29,7 +30,7 @@ export function initGSAP() {
|
|
|
29
30
|
if (initted || typeof window === "undefined")
|
|
30
31
|
return;
|
|
31
32
|
initted = true;
|
|
32
|
-
gsap.registerPlugin(ScrollTrigger, SplitText, Draggable, CustomEase);
|
|
33
|
+
gsap.registerPlugin(ScrollTrigger, SplitText, Draggable, CustomEase, Flip);
|
|
33
34
|
// ScrollSmoother is a bonus for people who prefer it over Lenis; it is only
|
|
34
35
|
// registered so `ScrollSmoother.create()` works if you call it yourself.
|
|
35
36
|
try {
|
package/dist/core/gsap.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gsap.js","sourceRoot":"","sources":["../../src/core/gsap.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"gsap.js","sourceRoot":"","sources":["../../src/core/gsap.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAEvF,4DAA4D;AAC5D,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,qEAAqE;IACrE,OAAO,EAAE,YAAY;IACrB,0DAA0D;IAC1D,SAAS,EAAE,eAAe;IAC1B,qDAAqD;IACrD,MAAM,EAAE,WAAW;IACnB,sDAAsD;IACtD,UAAU,EAAE,gBAAgB;CACpB,CAAC;AAEX,IAAI,OAAO,GAAG,KAAK,CAAC;AAEpB,wDAAwD;AACxD,MAAM,UAAU,QAAQ;IACtB,IAAI,OAAO,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO;IACrD,OAAO,GAAG,IAAI,CAAC;IAEf,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IAE3E,4EAA4E;IAC5E,yEAAyE;IACzE,IAAI,CAAC;QACH,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,CAAC;IAAC,MAAM,CAAC;QACP,sCAAsC;IACxC,CAAC;IAED,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;QACnC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAC/C,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,mDAAmD,CAAC,CAAC;QACxF,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;QAClD,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC;IAC3D,CAAC;IAED,yDAAyD;IACzD,aAAa,CAAC,MAAM,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAC;AACrD,CAAC;AAED,QAAQ,EAAE,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,UAAU,CAAC,MAAsD;IAC/E,MAAM,GAAG,GAAsC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAChG,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAiB,EAAE,CAAC,EAAE,YAAY,OAAO,CAAC,CAAC;IACtE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;AAClD,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export type ClipWipeFrom = "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "frame";
|
|
2
3
|
export interface ClipWipeOptions extends CommonOptions {
|
|
3
|
-
/** Which edge the wipe starts from. @default "left" */
|
|
4
|
-
from?:
|
|
4
|
+
/** Which edge or corner the wipe starts from. @default "left" */
|
|
5
|
+
from?: ClipWipeFrom;
|
|
5
6
|
/** Frame margin in % (only used when `from: "frame"`). @default 15 */
|
|
6
7
|
inset?: number;
|
|
7
8
|
/** Animation duration, seconds. @default 1 */
|
|
@@ -16,8 +17,15 @@ export interface ClipWipeOptions extends CommonOptions {
|
|
|
16
17
|
mode?: "scroll" | "immediate";
|
|
17
18
|
/** ScrollTrigger start position. @default "top 85%" */
|
|
18
19
|
start?: string;
|
|
20
|
+
/** ScrollTrigger end position (scrub mode). @default "top 20%" */
|
|
21
|
+
end?: string;
|
|
19
22
|
/** Re-wipe when leaving / re-entering the viewport. @default false */
|
|
20
23
|
replay?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Bind the wipe to scroll progress instead of playing it on enter —
|
|
26
|
+
* number = scrub smoothing seconds, `true` = immediate. unset = one-shot.
|
|
27
|
+
*/
|
|
28
|
+
scrub?: number | boolean;
|
|
21
29
|
}
|
|
22
30
|
export declare function clipWipe(target: TargetLike, options?: ClipWipeOptions): Destroy;
|
|
23
31
|
//# sourceMappingURL=clip-wipe.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clip-wipe.d.ts","sourceRoot":"","sources":["../../src/effects/clip-wipe.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"clip-wipe.d.ts","sourceRoot":"","sources":["../../src/effects/clip-wipe.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,OAAO,CAAC;AAEZ,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAcD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CA6DnF"}
|
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Clip wipe — a `clip-path: inset()` reveal.
|
|
3
3
|
*
|
|
4
|
-
* The element is collapsed behind one edge (or inside a frame margin)
|
|
5
|
-
* the inset animates to zero, wiping it into view:
|
|
4
|
+
* The element is collapsed behind one edge, corner (or inside a frame margin)
|
|
5
|
+
* and the inset animates to zero, wiping it into view:
|
|
6
6
|
*
|
|
7
|
-
* from: "left"
|
|
8
|
-
* from: "right"
|
|
9
|
-
* from: "top"
|
|
10
|
-
* from: "bottom"
|
|
11
|
-
* from: "
|
|
7
|
+
* from: "left" inset(0 100% 0 0) → grows rightward from the left edge
|
|
8
|
+
* from: "right" inset(0 0 0 100%) → grows leftward from the right edge
|
|
9
|
+
* from: "top" inset(0 0 100% 0) → grows downward from the top edge
|
|
10
|
+
* from: "bottom" inset(100% 0 0 0) → grows upward from the bottom edge
|
|
11
|
+
* from: "top-left" inset(0 100% 100% 0) → opens toward the bottom-right corner
|
|
12
|
+
* from: "top-right" inset(0 0 100% 100%) → opens toward the bottom-left corner
|
|
13
|
+
* from: "bottom-left" inset(100% 100% 0 0) → opens toward the top-right corner
|
|
14
|
+
* from: "bottom-right" inset(100% 0 0 100%) → opens toward the top-left corner
|
|
15
|
+
* from: "frame" inset(15% 15% 15% 15%) → opens out of a centered frame
|
|
16
|
+
*
|
|
17
|
+
* The wipe can also be bound to scroll progress (`scrub`), so the inset
|
|
18
|
+
* opens as the element travels through the viewport — the reveal then
|
|
19
|
+
* reverses with the scroll instead of playing once.
|
|
12
20
|
*
|
|
13
21
|
* Works on images, videos, blocks and text. destroy() kills the tween and
|
|
14
22
|
* removes the inline clip-path.
|
|
@@ -21,11 +29,15 @@ const FROM = {
|
|
|
21
29
|
right: "inset(0% 0% 0% 100%)",
|
|
22
30
|
top: "inset(0% 0% 100% 0%)",
|
|
23
31
|
bottom: "inset(100% 0% 0% 0%)",
|
|
32
|
+
"top-left": "inset(0% 100% 100% 0%)",
|
|
33
|
+
"top-right": "inset(0% 0% 100% 100%)",
|
|
34
|
+
"bottom-left": "inset(100% 100% 0% 0%)",
|
|
35
|
+
"bottom-right": "inset(100% 0% 0% 100%)",
|
|
24
36
|
};
|
|
25
37
|
const TO = "inset(0% 0% 0% 0%)";
|
|
26
38
|
export function clipWipe(target, options = {}) {
|
|
27
39
|
initGSAP();
|
|
28
|
-
const { from = "left", inset = 15, duration = 1, ease = "power3.out", stagger = 0.08, delay = 0, mode = "scroll", start = "top 85%", replay = false, } = options;
|
|
40
|
+
const { from = "left", inset = 15, duration = 1, ease = "power3.out", stagger = 0.08, delay = 0, mode = "scroll", start = "top 85%", end = "top 20%", replay = false, scrub, } = options;
|
|
29
41
|
const els = toArray(target);
|
|
30
42
|
if (!els.length)
|
|
31
43
|
return () => { };
|
|
@@ -41,7 +53,16 @@ export function clipWipe(target, options = {}) {
|
|
|
41
53
|
delay,
|
|
42
54
|
overwrite: "auto",
|
|
43
55
|
};
|
|
44
|
-
if (
|
|
56
|
+
if (scrub !== undefined) {
|
|
57
|
+
vars.ease = "none";
|
|
58
|
+
vars.scrollTrigger = {
|
|
59
|
+
trigger: els[0],
|
|
60
|
+
start,
|
|
61
|
+
end,
|
|
62
|
+
scrub: scrub === true ? true : scrub,
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
else if (mode === "scroll") {
|
|
45
66
|
vars.scrollTrigger = {
|
|
46
67
|
trigger: els[0],
|
|
47
68
|
start,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clip-wipe.js","sourceRoot":"","sources":["../../src/effects/clip-wipe.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"clip-wipe.js","sourceRoot":"","sources":["../../src/effects/clip-wipe.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cursor-follower.d.ts","sourceRoot":"","sources":["../../src/effects/cursor-follower.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"cursor-follower.d.ts","sourceRoot":"","sources":["../../src/effects/cursor-follower.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D,mFAAmF;IACnF,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjE,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,UAAU,EAChB,OAAO,GAAE,qBAA0B,GAClC,OAAO,CAsFT"}
|
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
* whole thing fades/blurs in when the pointer enters the hot zone. The label
|
|
6
6
|
* uses `mix-blend-mode: exclusion` so it inverts over any background.
|
|
7
7
|
*
|
|
8
|
+
* The tag is pinned `position: fixed` and driven in VIEWPORT space
|
|
9
|
+
* (clientX/clientY + offset), so it can live anywhere in the DOM — it only
|
|
10
|
+
* reacts while the pointer is over the zone.
|
|
11
|
+
*
|
|
8
12
|
* cursorFollower(zone, { follower: ".ak-cursor" })
|
|
9
13
|
*/
|
|
10
14
|
import { gsap, initGSAP, killTweens } from "../core/gsap.js";
|
|
@@ -27,17 +31,31 @@ export function cursorFollower(zone, options = {}) {
|
|
|
27
31
|
pointerEvents: el.style.pointerEvents,
|
|
28
32
|
};
|
|
29
33
|
el.style.mixBlendMode = blendMode;
|
|
30
|
-
|
|
34
|
+
// Viewport space: position:fixed + clientX/clientY keeps the tag at the
|
|
35
|
+
// pointer wherever it sits in the DOM. (The old position:absolute +
|
|
36
|
+
// zone-relative math only lined up when the tag was a child of the zone —
|
|
37
|
+
// a body-level tag landed near the document origin instead, off-screen.)
|
|
38
|
+
el.style.position = "fixed";
|
|
31
39
|
el.style.left = "0";
|
|
32
40
|
el.style.top = "0";
|
|
33
41
|
el.style.pointerEvents = "none";
|
|
34
42
|
gsap.set(el, { opacity: fade ? 0 : 1, x: 0, y: 0 });
|
|
35
43
|
const xTo = gsap.quickTo(el, "x", { ...spring, duration: 0.4, ease: "power3" });
|
|
36
44
|
const yTo = gsap.quickTo(el, "y", { ...spring, duration: 0.4, ease: "power3" });
|
|
45
|
+
// First move lands on the pointer; later moves spring after it — starting
|
|
46
|
+
// from (0,0), the spring would otherwise carry the tag in from the corner.
|
|
47
|
+
let snapped = false;
|
|
37
48
|
const onMove = (e) => {
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
49
|
+
const x = e.clientX + offset;
|
|
50
|
+
const y = e.clientY + offset;
|
|
51
|
+
if (snapped) {
|
|
52
|
+
xTo(x);
|
|
53
|
+
yTo(y);
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
gsap.set(el, { x, y });
|
|
57
|
+
snapped = true;
|
|
58
|
+
}
|
|
41
59
|
if (fade)
|
|
42
60
|
gsap.to(el, { opacity: 1, duration: 0.25, overwrite: "auto" });
|
|
43
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cursor-follower.js","sourceRoot":"","sources":["../../src/effects/cursor-follower.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"cursor-follower.js","sourceRoot":"","sources":["../../src/effects/cursor-follower.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface FlipWordsOptions extends CommonOptions {
|
|
3
|
+
/** Destination block — every word is moved into it. */
|
|
4
|
+
to: TargetLike;
|
|
5
|
+
/**
|
|
6
|
+
* The words inside the source.
|
|
7
|
+
* @default `[data-flip-word]` matches, else the source's element children
|
|
8
|
+
*/
|
|
9
|
+
words?: TargetLike;
|
|
10
|
+
/** Seconds for one word's travel. @default 1.4 */
|
|
11
|
+
duration?: number;
|
|
12
|
+
/** GSAP ease. @default "power4.inOut" */
|
|
13
|
+
ease?: string;
|
|
14
|
+
/** Seconds between word starts. @default 0.2 */
|
|
15
|
+
stagger?: number;
|
|
16
|
+
/** Mid-flight scale a word squashes to (0 disables the squash). @default 0.2 */
|
|
17
|
+
scale?: number;
|
|
18
|
+
/** "scroll" plays on enter (reverses on leave-back), "immediate" plays now. @default "scroll" */
|
|
19
|
+
mode?: "scroll" | "immediate";
|
|
20
|
+
/**
|
|
21
|
+
* Bind the transfer to scroll progress instead of playing it on enter —
|
|
22
|
+
* number = scrub smoothing seconds, `true` = immediate. unset = one-shot.
|
|
23
|
+
*/
|
|
24
|
+
scrub?: number | boolean;
|
|
25
|
+
/** ScrollTrigger start. @default "top 75%" */
|
|
26
|
+
start?: string;
|
|
27
|
+
/** ScrollTrigger end (scrub mode). @default "bottom 45%" */
|
|
28
|
+
end?: string;
|
|
29
|
+
}
|
|
30
|
+
export declare function flipWords(from: TargetLike, options: FlipWordsOptions): Destroy;
|
|
31
|
+
//# sourceMappingURL=flip-words.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flip-words.d.ts","sourceRoot":"","sources":["../../src/effects/flip-words.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,uDAAuD;IACvD,EAAE,EAAE,UAAU,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iGAAiG;IACjG,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,GAAG,OAAO,CA2F9E"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Flip word transfer — words glide from one layout into another (FLIP).
|
|
3
|
+
*
|
|
4
|
+
* The source block holds the words; `to` is the block they land in. Both
|
|
5
|
+
* blocks should share one grid cell so the page never reflows when the
|
|
6
|
+
* words move:
|
|
7
|
+
*
|
|
8
|
+
* .flip-stage { display: grid; }
|
|
9
|
+
* .flip-stage > div { grid-area: 1 / 1; } // source + destination overlap
|
|
10
|
+
*
|
|
11
|
+
* On trigger every word is measured where it stands, moved into the
|
|
12
|
+
* destination, and animated from its old position (the classic FLIP
|
|
13
|
+
* technique), with a mid-flight squash so the words pop as they travel.
|
|
14
|
+
* Because the measurement happens up front, the words *look* like they are
|
|
15
|
+
* still in the source at scroll progress 0 even though they already live in
|
|
16
|
+
* the destination — so a scrubbed transfer reverses perfectly.
|
|
17
|
+
*
|
|
18
|
+
* flipWords("[data-flip-from]", { to: "[data-flip-to]", scrub: 1 });
|
|
19
|
+
*
|
|
20
|
+
* destroy() kills the timeline, puts every word back in its original
|
|
21
|
+
* parent (in the original order) and restores its inline transform.
|
|
22
|
+
*/
|
|
23
|
+
import { gsap, Flip, ScrollTrigger, initGSAP, killTweens } from "../core/gsap.js";
|
|
24
|
+
import { guard } from "../core/guard.js";
|
|
25
|
+
import { one, toArray } from "../core/util.js";
|
|
26
|
+
export function flipWords(from, options) {
|
|
27
|
+
initGSAP();
|
|
28
|
+
const src = one(from);
|
|
29
|
+
const dest = one(options?.to);
|
|
30
|
+
if (!src || !dest)
|
|
31
|
+
return () => { };
|
|
32
|
+
const { words, duration = 1.4, ease = "power4.inOut", stagger = 0.2, scale = 0.2, mode = "scroll", scrub, start = "top 75%", end = "bottom 45%", } = options;
|
|
33
|
+
const marked = toArray(src.querySelectorAll("[data-flip-word]"));
|
|
34
|
+
const wordEls = words
|
|
35
|
+
? toArray(words, src)
|
|
36
|
+
: marked.length
|
|
37
|
+
? marked
|
|
38
|
+
: [...src.children];
|
|
39
|
+
if (!wordEls.length)
|
|
40
|
+
return () => { };
|
|
41
|
+
return guard(options, () => {
|
|
42
|
+
// Remember each word's home so destroy() can put everything back in order.
|
|
43
|
+
const home = wordEls.map((w) => ({ parent: w.parentNode, next: w.nextSibling }));
|
|
44
|
+
const prevTransform = wordEls.map((w) => w.style.transform);
|
|
45
|
+
// Measure in the source, move into the destination, then animate from
|
|
46
|
+
// the measurement — the FLIP. The wrapper timeline owns the flight so
|
|
47
|
+
// ScrollTrigger can scrub it and the scale accents can share its clock.
|
|
48
|
+
const state = Flip.getState(wordEls);
|
|
49
|
+
wordEls.forEach((w) => dest.appendChild(w));
|
|
50
|
+
const tl = gsap.timeline({ paused: true });
|
|
51
|
+
// The wrapper is paused, and `add` is synchronous, so the Flip child
|
|
52
|
+
// never renders on the global timeline before the wrapper owns it.
|
|
53
|
+
tl.add(Flip.from(state, { duration, ease, stagger: { each: stagger } }), 0);
|
|
54
|
+
if (scale > 0) {
|
|
55
|
+
wordEls.forEach((w, i) => {
|
|
56
|
+
const at = i * stagger;
|
|
57
|
+
tl.to(w, { scale, duration: duration * 0.5, ease }, at);
|
|
58
|
+
tl.to(w, { scale: 1, duration: duration * 0.5, ease }, at + duration * 0.5);
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
let st;
|
|
62
|
+
if (mode === "immediate") {
|
|
63
|
+
tl.play(0);
|
|
64
|
+
}
|
|
65
|
+
else if (scrub !== undefined) {
|
|
66
|
+
st = ScrollTrigger.create({
|
|
67
|
+
trigger: src,
|
|
68
|
+
start,
|
|
69
|
+
end,
|
|
70
|
+
scrub: scrub === true ? true : scrub,
|
|
71
|
+
animation: tl,
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
st = ScrollTrigger.create({
|
|
76
|
+
trigger: src,
|
|
77
|
+
start,
|
|
78
|
+
animation: tl,
|
|
79
|
+
toggleActions: "play none none reverse",
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
ScrollTrigger.refresh();
|
|
83
|
+
return () => {
|
|
84
|
+
st?.kill();
|
|
85
|
+
tl.kill();
|
|
86
|
+
killTweens(wordEls);
|
|
87
|
+
// Reparent home. A stored `next` sibling that has moved with the words
|
|
88
|
+
// is not in the parent anymore — fall back to appending in order.
|
|
89
|
+
wordEls.forEach((w, i) => {
|
|
90
|
+
const h = home[i];
|
|
91
|
+
if (!h.parent)
|
|
92
|
+
return;
|
|
93
|
+
const ref = h.next && h.next.parentNode === h.parent ? h.next : null;
|
|
94
|
+
h.parent.insertBefore(w, ref);
|
|
95
|
+
});
|
|
96
|
+
gsap.set(wordEls, { clearProps: "transform" });
|
|
97
|
+
wordEls.forEach((w, i) => {
|
|
98
|
+
w.style.transform = prevTransform[i];
|
|
99
|
+
});
|
|
100
|
+
ScrollTrigger.refresh();
|
|
101
|
+
};
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
//# sourceMappingURL=flip-words.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flip-words.js","sourceRoot":"","sources":["../../src/effects/flip-words.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAgC/C,MAAM,UAAU,SAAS,CAAC,IAAgB,EAAE,OAAyB;IACnE,QAAQ,EAAE,CAAC;IAEX,MAAM,GAAG,GAAG,GAAG,CAAc,IAAI,CAAC,CAAC;IACnC,MAAM,IAAI,GAAG,GAAG,CAAc,OAAO,EAAE,EAAE,CAAC,CAAC;IAC3C,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI;QAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAEnC,MAAM,EACJ,KAAK,EACL,QAAQ,GAAG,GAAG,EACd,IAAI,GAAG,cAAc,EACrB,OAAO,GAAG,GAAG,EACb,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,GAAG,SAAS,EACjB,GAAG,GAAG,YAAY,GACnB,GAAG,OAAO,CAAC;IAEZ,MAAM,MAAM,GAAG,OAAO,CAAc,GAAG,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC9E,MAAM,OAAO,GAAG,KAAK;QACnB,CAAC,CAAC,OAAO,CAAc,KAAK,EAAE,GAAG,CAAC;QAClC,CAAC,CAAC,MAAM,CAAC,MAAM;YACb,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAkB,CAAC;IACzC,IAAI,CAAC,OAAO,CAAC,MAAM;QAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAErC,OAAO,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE;QACzB,2EAA2E;QAC3E,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QACjF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAE5D,sEAAsE;QACtE,sEAAsE;QACtE,wEAAwE;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACrC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QAE5C,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3C,qEAAqE;QACrE,mEAAmE;QACnE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAE5E,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACvB,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC;gBACvB,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;gBACxD,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAC;YAC9E,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,EAA6B,CAAC;QAClC,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;YACzB,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;aAAM,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC;gBACxB,OAAO,EAAE,GAAG;gBACZ,KAAK;gBACL,GAAG;gBACH,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;gBACpC,SAAS,EAAE,EAAE;aACd,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC;gBACxB,OAAO,EAAE,GAAG;gBACZ,KAAK;gBACL,SAAS,EAAE,EAAE;gBACb,aAAa,EAAE,wBAAwB;aACxC,CAAC,CAAC;QACL,CAAC;QACD,aAAa,CAAC,OAAO,EAAE,CAAC;QAExB,OAAO,GAAG,EAAE;YACV,EAAE,EAAE,IAAI,EAAE,CAAC;YACX,EAAE,CAAC,IAAI,EAAE,CAAC;YACV,UAAU,CAAC,OAAO,CAAC,CAAC;YACpB,uEAAuE;YACvE,kEAAkE;YAClE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACvB,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;gBAClB,IAAI,CAAC,CAAC,CAAC,MAAM;oBAAE,OAAO;gBACtB,MAAM,GAAG,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;gBACrE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAChC,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;YAC/C,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACvB,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;YACH,aAAa,CAAC,OAAO,EAAE,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface MagneticOptions extends CommonOptions {
|
|
3
|
+
/** How far the element follows the pointer — fraction of its own box. @default 0.4 */
|
|
4
|
+
strength?: number;
|
|
5
|
+
/** Max tilt in degrees at full pull (0 disables rotation). @default 8 */
|
|
6
|
+
rotation?: number;
|
|
7
|
+
/** Scale held while the pointer is over the element (1 = none). @default 1 */
|
|
8
|
+
scale?: number;
|
|
9
|
+
/** Spring-back duration, seconds. @default 1.2 */
|
|
10
|
+
duration?: number;
|
|
11
|
+
/** Spring-back ease. @default "elastic.out(1, 0.35)" */
|
|
12
|
+
ease?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare function magnetic(target: TargetLike, options?: MagneticOptions): Destroy;
|
|
15
|
+
//# sourceMappingURL=magnetic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"magnetic.d.ts","sourceRoot":"","sources":["../../src/effects/magnetic.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CAuDnF"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Magnetic hover — buttons and links that pull toward the pointer.
|
|
3
|
+
*
|
|
4
|
+
* While the pointer is over the element it follows the cursor (a fraction
|
|
5
|
+
* of its own box), tilts toward the pull, and optionally grows a touch.
|
|
6
|
+
* On leave it springs back to rest with an elastic snap:
|
|
7
|
+
*
|
|
8
|
+
* magnetic("[data-magnet]", { strength: 0.5, rotation: 10 });
|
|
9
|
+
*
|
|
10
|
+
* Attach it to individual buttons/links (or a container's children — pass
|
|
11
|
+
* the list). destroy() removes the listeners, kills in-flight tweens and
|
|
12
|
+
* restores the inline transform.
|
|
13
|
+
*/
|
|
14
|
+
import { gsap, initGSAP, killTweens } from "../core/gsap.js";
|
|
15
|
+
import { guard } from "../core/guard.js";
|
|
16
|
+
import { toArray } from "../core/util.js";
|
|
17
|
+
export function magnetic(target, options = {}) {
|
|
18
|
+
initGSAP();
|
|
19
|
+
const els = toArray(target);
|
|
20
|
+
if (!els.length)
|
|
21
|
+
return () => { };
|
|
22
|
+
const { strength = 0.4, rotation = 8, scale = 1, duration = 1.2, ease = "elastic.out(1, 0.35)", } = options;
|
|
23
|
+
return guard(options, () => {
|
|
24
|
+
const prevTransform = els.map((el) => el.style.transform);
|
|
25
|
+
const listeners = [];
|
|
26
|
+
els.forEach((el) => {
|
|
27
|
+
const onMove = (e) => {
|
|
28
|
+
const ptr = e;
|
|
29
|
+
const r = el.getBoundingClientRect();
|
|
30
|
+
const dx = ptr.clientX - (r.left + r.width / 2);
|
|
31
|
+
const dy = ptr.clientY - (r.top + r.height / 2);
|
|
32
|
+
const nx = r.width ? dx / (r.width / 2) : 0; // -1 … 1 across the box
|
|
33
|
+
gsap.to(el, {
|
|
34
|
+
x: dx * strength,
|
|
35
|
+
y: dy * strength,
|
|
36
|
+
rotation: rotation ? nx * rotation : 0,
|
|
37
|
+
scale,
|
|
38
|
+
duration: 0.4,
|
|
39
|
+
ease: "power3.out",
|
|
40
|
+
overwrite: "auto",
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
const onLeave = () => {
|
|
44
|
+
gsap.to(el, { x: 0, y: 0, rotation: 0, scale: 1, duration, ease, overwrite: "auto" });
|
|
45
|
+
};
|
|
46
|
+
el.addEventListener("pointermove", onMove);
|
|
47
|
+
el.addEventListener("pointerleave", onLeave);
|
|
48
|
+
listeners.push({ el, type: "pointermove", fn: onMove }, { el, type: "pointerleave", fn: onLeave });
|
|
49
|
+
});
|
|
50
|
+
return () => {
|
|
51
|
+
listeners.forEach(({ el, type, fn }) => el.removeEventListener(type, fn));
|
|
52
|
+
killTweens(els);
|
|
53
|
+
els.forEach((el, i) => {
|
|
54
|
+
el.style.transform = prevTransform[i];
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
//# sourceMappingURL=magnetic.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"magnetic.js","sourceRoot":"","sources":["../../src/effects/magnetic.ts"],"names":[],"mappings":"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"}
|
|
@@ -18,6 +18,8 @@ export interface MediaSettleOptions extends CommonOptions {
|
|
|
18
18
|
start?: string;
|
|
19
19
|
/** ScrollTrigger end position (scrub mode). @default "bottom top" */
|
|
20
20
|
end?: string;
|
|
21
|
+
/** Re-settle when leaving / re-entering the viewport (enter mode). @default false */
|
|
22
|
+
replay?: boolean;
|
|
21
23
|
/**
|
|
22
24
|
* Bind the settle to scroll progress instead of playing it on enter —
|
|
23
25
|
* number = scrub smoothing seconds, `true` = immediate. unset = one-shot.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-settle.d.ts","sourceRoot":"","sources":["../../src/effects/media-settle.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"media-settle.d.ts","sourceRoot":"","sources":["../../src/effects/media-settle.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,kBAAuB,GAAG,OAAO,CA2DzF"}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* mediaSettle("[data-settle]", { from: 1.3 }); // on enter
|
|
9
9
|
* mediaSettle("[data-settle]", { scrub: 0.5 }); // scroll-bound
|
|
10
|
+
* mediaSettle("[data-settle]", { replay: true }); // reverse on leave-back, replay on re-enter
|
|
10
11
|
*
|
|
11
12
|
* destroy() kills the tween and restores the original scale.
|
|
12
13
|
*/
|
|
@@ -15,7 +16,7 @@ import { guard } from "../core/guard.js";
|
|
|
15
16
|
import { toArray } from "../core/util.js";
|
|
16
17
|
export function mediaSettle(target, options = {}) {
|
|
17
18
|
initGSAP();
|
|
18
|
-
const { from = 1.15, duration = 1.5, ease = "power2.out", origin = "center", stagger = 0.06, delay = 0, mode = "scroll", start = "top 75%", end = "bottom top", scrub, } = options;
|
|
19
|
+
const { from = 1.15, duration = 1.5, ease = "power2.out", origin = "center", stagger = 0.06, delay = 0, mode = "scroll", start = "top 75%", end = "bottom top", replay = false, scrub, } = options;
|
|
19
20
|
const els = toArray(target);
|
|
20
21
|
if (!els.length)
|
|
21
22
|
return () => { };
|
|
@@ -36,7 +37,9 @@ export function mediaSettle(target, options = {}) {
|
|
|
36
37
|
vars.duration = duration;
|
|
37
38
|
vars.ease = ease;
|
|
38
39
|
if (mode === "scroll") {
|
|
39
|
-
vars.scrollTrigger =
|
|
40
|
+
vars.scrollTrigger = replay
|
|
41
|
+
? { trigger: els[0], start, toggleActions: "play reverse play reverse" }
|
|
42
|
+
: { trigger: els[0], start, once: true };
|
|
40
43
|
}
|
|
41
44
|
}
|
|
42
45
|
const tween = gsap.fromTo(els, { scale: from, transformOrigin: origin }, { ...vars, immediateRender: true });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-settle.js","sourceRoot":"","sources":["../../src/effects/media-settle.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"media-settle.js","sourceRoot":"","sources":["../../src/effects/media-settle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AA+B1C,MAAM,UAAU,WAAW,CAAC,MAAkB,EAAE,UAA8B,EAAE;IAC9E,QAAQ,EAAE,CAAC;IAEX,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,GAAG,EACd,IAAI,GAAG,YAAY,EACnB,MAAM,GAAG,QAAQ,EACjB,OAAO,GAAG,IAAI,EACd,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,SAAS,EACjB,GAAG,GAAG,YAAY,EAClB,MAAM,GAAG,KAAK,EACd,KAAK,GACN,GAAG,OAAO,CAAC;IAEZ,MAAM,GAAG,GAAG,OAAO,CAAc,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,GAAG,CAAC,MAAM;QAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAEjC,OAAO,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAE3B,SAAS,GAAG;QACV,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;QAExD,MAAM,IAAI,GAAmB,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;QAE7E,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YACnB,IAAI,CAAC,aAAa,GAAG;gBACnB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;gBACf,KAAK;gBACL,GAAG;gBACH,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;aACrC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACtB,IAAI,CAAC,aAAa,GAAG,MAAM;oBACzB,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,2BAA2B,EAAE;oBACxE,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YAC7C,CAAC;QACH,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CACvB,GAAG,EACH,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,EACxC,EAAE,GAAG,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CACnC,CAAC;QACF,aAAa,CAAC,OAAO,EAAE,CAAC;QAExB,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,CAAC;YAC5B,KAAK,CAAC,IAAI,EAAE,CAAC;YACb,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,2BAA2B,EAAE,CAAC,CAAC;YAC3D,aAAa,CAAC,OAAO,EAAE,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC;AACH,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -28,11 +28,13 @@
|
|
|
28
28
|
*
|
|
29
29
|
* Text extras:
|
|
30
30
|
* scrambleText() decode / cipher reveal per character
|
|
31
|
+
* flipWords() words that glide between two layouts (FLIP)
|
|
31
32
|
*
|
|
32
33
|
* Micro-interactions:
|
|
33
34
|
* liquidButton() SVG wave flood on hover
|
|
34
35
|
* underlineLink() underline wipe on hover
|
|
35
36
|
* cursorFollower() spring-follow cursor tag
|
|
37
|
+
* magnetic() elements that pull toward the pointer and spring back
|
|
36
38
|
* counter() tabular number ticker (timed or scroll-progress)
|
|
37
39
|
* audioBars() equaliser visualiser
|
|
38
40
|
* themeReveal() View Transitions circular wipe
|
|
@@ -54,7 +56,7 @@ export type { MaskRevealOptions } from "./effects/mask-reveal.js";
|
|
|
54
56
|
export { unfoldReveal } from "./effects/unfold-reveal.js";
|
|
55
57
|
export type { UnfoldRevealOptions } from "./effects/unfold-reveal.js";
|
|
56
58
|
export { clipWipe } from "./effects/clip-wipe.js";
|
|
57
|
-
export type { ClipWipeOptions } from "./effects/clip-wipe.js";
|
|
59
|
+
export type { ClipWipeOptions, ClipWipeFrom } from "./effects/clip-wipe.js";
|
|
58
60
|
export { parallax } from "./effects/parallax.js";
|
|
59
61
|
export type { ParallaxOptions } from "./effects/parallax.js";
|
|
60
62
|
export { horizontalScroll } from "./effects/horizontal-scroll.js";
|
|
@@ -79,10 +81,14 @@ export { dragStrip } from "./effects/drag-strip.js";
|
|
|
79
81
|
export type { DragStripOptions } from "./effects/drag-strip.js";
|
|
80
82
|
export { scrambleText } from "./effects/scramble-text.js";
|
|
81
83
|
export type { ScrambleTextOptions } from "./effects/scramble-text.js";
|
|
84
|
+
export { flipWords } from "./effects/flip-words.js";
|
|
85
|
+
export type { FlipWordsOptions } from "./effects/flip-words.js";
|
|
82
86
|
export { liquidButton, underlineLink } from "./effects/liquid-button.js";
|
|
83
87
|
export type { LiquidButtonOptions } from "./effects/liquid-button.js";
|
|
84
88
|
export { cursorFollower } from "./effects/cursor-follower.js";
|
|
85
89
|
export type { CursorFollowerOptions } from "./effects/cursor-follower.js";
|
|
90
|
+
export { magnetic } from "./effects/magnetic.js";
|
|
91
|
+
export type { MagneticOptions } from "./effects/magnetic.js";
|
|
86
92
|
export { counter, audioBars } from "./effects/counter.js";
|
|
87
93
|
export type { CounterOptions, AudioBarsOptions, AudioBarsHandle } from "./effects/counter.js";
|
|
88
94
|
export { themeReveal } from "./effects/theme-reveal.js";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAGH,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACxH,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3F,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAG1E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,YAAY,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC9E,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACzE,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE9F,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAElG,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEvF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -28,11 +28,13 @@
|
|
|
28
28
|
*
|
|
29
29
|
* Text extras:
|
|
30
30
|
* scrambleText() decode / cipher reveal per character
|
|
31
|
+
* flipWords() words that glide between two layouts (FLIP)
|
|
31
32
|
*
|
|
32
33
|
* Micro-interactions:
|
|
33
34
|
* liquidButton() SVG wave flood on hover
|
|
34
35
|
* underlineLink() underline wipe on hover
|
|
35
36
|
* cursorFollower() spring-follow cursor tag
|
|
37
|
+
* magnetic() elements that pull toward the pointer and spring back
|
|
36
38
|
* counter() tabular number ticker (timed or scroll-progress)
|
|
37
39
|
* audioBars() equaliser visualiser
|
|
38
40
|
* themeReveal() View Transitions circular wipe
|
|
@@ -64,9 +66,11 @@ export { rollText } from "./effects/roll-text.js";
|
|
|
64
66
|
export { dragStrip } from "./effects/drag-strip.js";
|
|
65
67
|
/* ---- text extras ---- */
|
|
66
68
|
export { scrambleText } from "./effects/scramble-text.js";
|
|
69
|
+
export { flipWords } from "./effects/flip-words.js";
|
|
67
70
|
/* ---- micro-interactions ---- */
|
|
68
71
|
export { liquidButton, underlineLink } from "./effects/liquid-button.js";
|
|
69
72
|
export { cursorFollower } from "./effects/cursor-follower.js";
|
|
73
|
+
export { magnetic } from "./effects/magnetic.js";
|
|
70
74
|
export { counter, audioBars } from "./effects/counter.js";
|
|
71
75
|
export { themeReveal } from "./effects/theme-reveal.js";
|
|
72
76
|
export { menuOverlay } from "./effects/menu-overlay.js";
|