@cosmictraveler002/anim-kit 1.0.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 +275 -50
- 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/core/split.d.ts.map +1 -1
- package/dist/core/split.js +15 -2
- package/dist/core/split.js.map +1 -1
- package/dist/effects/clip-wipe.d.ts +31 -0
- package/dist/effects/clip-wipe.d.ts.map +1 -0
- package/dist/effects/clip-wipe.js +82 -0
- package/dist/effects/clip-wipe.js.map +1 -0
- package/dist/effects/counter.d.ts +9 -0
- package/dist/effects/counter.d.ts.map +1 -1
- package/dist/effects/counter.js +17 -7
- package/dist/effects/counter.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/line-reveal.d.ts +6 -2
- package/dist/effects/line-reveal.d.ts.map +1 -1
- package/dist/effects/line-reveal.js +8 -4
- package/dist/effects/line-reveal.js.map +1 -1
- 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 +30 -0
- package/dist/effects/media-settle.d.ts.map +1 -0
- package/dist/effects/media-settle.js +55 -0
- package/dist/effects/media-settle.js.map +1 -0
- package/dist/effects/roll-text.d.ts +13 -0
- package/dist/effects/roll-text.d.ts.map +1 -0
- package/dist/effects/roll-text.js +91 -0
- package/dist/effects/roll-text.js.map +1 -0
- package/dist/effects/scramble-text.d.ts +17 -0
- package/dist/effects/scramble-text.d.ts.map +1 -0
- package/dist/effects/scramble-text.js +93 -0
- package/dist/effects/scramble-text.js.map +1 -0
- package/dist/effects/unfold-reveal.d.ts +23 -0
- package/dist/effects/unfold-reveal.d.ts.map +1 -0
- package/dist/effects/unfold-reveal.js +53 -0
- package/dist/effects/unfold-reveal.js.map +1 -0
- package/dist/index.d.ts +25 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +19 -2
- package/dist/index.js.map +1 -1
- package/dist/styles/anim-kit.css +22 -0
- package/package.json +6 -3
- package/src/core/gsap.ts +3 -2
- package/src/core/split.ts +16 -2
- package/src/effects/clip-wipe.ts +141 -0
- package/src/effects/counter.ts +26 -6
- package/src/effects/cursor-follower.ts +21 -4
- package/src/effects/flip-words.ts +148 -0
- package/src/effects/line-reveal.ts +12 -5
- package/src/effects/magnetic.ts +87 -0
- package/src/effects/media-settle.ts +106 -0
- package/src/effects/roll-text.ts +118 -0
- package/src/effects/scramble-text.ts +122 -0
- package/src/effects/unfold-reveal.ts +92 -0
- package/src/index.ts +33 -2
- package/src/styles/anim-kit.css +22 -0
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"}
|
package/dist/core/split.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../../src/core/split.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,+DAA+D;IAC/D,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,sDAAsD;IACtD,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IACnC,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,WAAW,
|
|
1
|
+
{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../../src/core/split.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,+DAA+D;IAC/D,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,sDAAsD;IACtD,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IACnC,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,WAAW,CA2ClF"}
|
package/dist/core/split.js
CHANGED
|
@@ -17,12 +17,15 @@ export function split(target, options) {
|
|
|
17
17
|
: target;
|
|
18
18
|
if (!el)
|
|
19
19
|
return { elements: [], revert: () => { } };
|
|
20
|
+
const primary = Array.isArray(options.type) ? options.type[0] : options.type;
|
|
20
21
|
// Prefer SplitText: it handles nested markup, <br> and font metrics properly.
|
|
21
22
|
if (typeof SplitText !== "undefined" && SplitText?.create) {
|
|
22
23
|
try {
|
|
23
24
|
const st = SplitText.create(el, {
|
|
24
25
|
type: options.type,
|
|
25
|
-
|
|
26
|
+
// Mask the primary split type — "lines" for text reveals, "chars" for
|
|
27
|
+
// per-character masked reveals (each fragment gets a -mask wrapper).
|
|
28
|
+
mask: options.mask ? primary : undefined,
|
|
26
29
|
linesClass: options.linesClass ?? "ak-line++",
|
|
27
30
|
wordsClass: options.wordsClass ?? "ak-word++",
|
|
28
31
|
charsClass: options.charsClass ?? "ak-char++",
|
|
@@ -71,6 +74,16 @@ function manualSplit(el, options) {
|
|
|
71
74
|
span.className = cls.replace("++", String(i));
|
|
72
75
|
span.textContent = text;
|
|
73
76
|
generated.push(span);
|
|
77
|
+
if (options.mask && type === "chars") {
|
|
78
|
+
// Mirror SplitText: each char inside an overflow-hidden mask wrapper.
|
|
79
|
+
// Return the wrapper so the caller inserts mask > span intact.
|
|
80
|
+
const mask = document.createElement("span");
|
|
81
|
+
mask.className = `${span.className}-mask`;
|
|
82
|
+
mask.style.overflow = "hidden";
|
|
83
|
+
mask.style.display = "inline-block";
|
|
84
|
+
mask.appendChild(span);
|
|
85
|
+
return mask;
|
|
86
|
+
}
|
|
74
87
|
return span;
|
|
75
88
|
};
|
|
76
89
|
const frag = document.createDocumentFragment();
|
|
@@ -103,7 +116,7 @@ function manualSplit(el, options) {
|
|
|
103
116
|
}
|
|
104
117
|
el.innerHTML = "";
|
|
105
118
|
el.appendChild(frag);
|
|
106
|
-
if (options.mask) {
|
|
119
|
+
if (options.mask && type !== "chars") {
|
|
107
120
|
gsap.set(generated, { display: "inline-block" });
|
|
108
121
|
}
|
|
109
122
|
return {
|
package/dist/core/split.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split.js","sourceRoot":"","sources":["../../src/core/split.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"split.js","sourceRoot":"","sources":["../../src/core/split.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
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";
|
|
3
|
+
export interface ClipWipeOptions extends CommonOptions {
|
|
4
|
+
/** Which edge or corner the wipe starts from. @default "left" */
|
|
5
|
+
from?: ClipWipeFrom;
|
|
6
|
+
/** Frame margin in % (only used when `from: "frame"`). @default 15 */
|
|
7
|
+
inset?: number;
|
|
8
|
+
/** Animation duration, seconds. @default 1 */
|
|
9
|
+
duration?: number;
|
|
10
|
+
/** GSAP ease. @default "power3.out" */
|
|
11
|
+
ease?: string;
|
|
12
|
+
/** Stagger between targets, seconds. @default 0.08 */
|
|
13
|
+
stagger?: number;
|
|
14
|
+
/** Delay before playing, seconds. @default 0 */
|
|
15
|
+
delay?: number;
|
|
16
|
+
/** "scroll" plays on enter, "immediate" plays at once. @default "scroll" */
|
|
17
|
+
mode?: "scroll" | "immediate";
|
|
18
|
+
/** ScrollTrigger start position. @default "top 85%" */
|
|
19
|
+
start?: string;
|
|
20
|
+
/** ScrollTrigger end position (scrub mode). @default "top 20%" */
|
|
21
|
+
end?: string;
|
|
22
|
+
/** Re-wipe when leaving / re-entering the viewport. @default false */
|
|
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;
|
|
29
|
+
}
|
|
30
|
+
export declare function clipWipe(target: TargetLike, options?: ClipWipeOptions): Destroy;
|
|
31
|
+
//# sourceMappingURL=clip-wipe.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Clip wipe — a `clip-path: inset()` reveal.
|
|
3
|
+
*
|
|
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
|
+
*
|
|
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.
|
|
20
|
+
*
|
|
21
|
+
* Works on images, videos, blocks and text. destroy() kills the tween and
|
|
22
|
+
* removes the inline clip-path.
|
|
23
|
+
*/
|
|
24
|
+
import { gsap, ScrollTrigger, initGSAP } from "../core/gsap.js";
|
|
25
|
+
import { guard } from "../core/guard.js";
|
|
26
|
+
import { toArray } from "../core/util.js";
|
|
27
|
+
const FROM = {
|
|
28
|
+
left: "inset(0% 100% 0% 0%)",
|
|
29
|
+
right: "inset(0% 0% 0% 100%)",
|
|
30
|
+
top: "inset(0% 0% 100% 0%)",
|
|
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%)",
|
|
36
|
+
};
|
|
37
|
+
const TO = "inset(0% 0% 0% 0%)";
|
|
38
|
+
export function clipWipe(target, options = {}) {
|
|
39
|
+
initGSAP();
|
|
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;
|
|
41
|
+
const els = toArray(target);
|
|
42
|
+
if (!els.length)
|
|
43
|
+
return () => { };
|
|
44
|
+
return guard(options, run);
|
|
45
|
+
function run() {
|
|
46
|
+
const startClip = from === "frame" ? `inset(${inset}% ${inset}% ${inset}% ${inset}%)` : FROM[from];
|
|
47
|
+
gsap.set(els, { clipPath: startClip });
|
|
48
|
+
const vars = {
|
|
49
|
+
clipPath: TO,
|
|
50
|
+
duration,
|
|
51
|
+
ease,
|
|
52
|
+
stagger,
|
|
53
|
+
delay,
|
|
54
|
+
overwrite: "auto",
|
|
55
|
+
};
|
|
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") {
|
|
66
|
+
vars.scrollTrigger = {
|
|
67
|
+
trigger: els[0],
|
|
68
|
+
start,
|
|
69
|
+
toggleActions: replay ? "play reverse play reverse" : "play none none none",
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
const tween = gsap.to(els, vars);
|
|
73
|
+
ScrollTrigger.refresh();
|
|
74
|
+
return () => {
|
|
75
|
+
tween.scrollTrigger?.kill();
|
|
76
|
+
tween.kill();
|
|
77
|
+
gsap.set(els, { clearProps: "clipPath" });
|
|
78
|
+
ScrollTrigger.refresh();
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
//# sourceMappingURL=clip-wipe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clip-wipe.js","sourceRoot":"","sources":["../../src/effects/clip-wipe.ts"],"names":[],"mappings":"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"}
|
|
@@ -14,7 +14,16 @@ export interface CounterOptions extends CommonOptions {
|
|
|
14
14
|
suffix?: string;
|
|
15
15
|
/** Animate when scrolled into view instead of immediately. @default false */
|
|
16
16
|
onScroll?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Drive the number from scroll progress instead of a timed tween: the value
|
|
19
|
+
* scrubs from `from` to `to` across `start` → `end`. Ignores `onScroll`.
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
progress?: boolean;
|
|
23
|
+
/** ScrollTrigger start position (`onScroll` or `progress`). @default "top 90%" */
|
|
17
24
|
start?: string;
|
|
25
|
+
/** ScrollTrigger end position (only with `progress`). @default "bottom top" */
|
|
26
|
+
end?: string;
|
|
18
27
|
onComplete?: (value: number) => void;
|
|
19
28
|
}
|
|
20
29
|
export declare function counter(target: TargetLike, options?: CounterOptions): Destroy;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../src/effects/counter.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../src/effects/counter.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAkEjF;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,UAAU,EAClB,OAAO,GAAE,gBAAqB,GAC7B,eAAe,CA+DjB"}
|
package/dist/effects/counter.js
CHANGED
|
@@ -4,8 +4,11 @@
|
|
|
4
4
|
* Drives an element's `textContent` from `from` to `to` with an easing curve,
|
|
5
5
|
* optionally triggered by ScrollTrigger. Uses integer stepping so there is no
|
|
6
6
|
* fractional flicker, and pairs with `tabular-nums` for stable layout.
|
|
7
|
+
* `progress: true` swaps the timed tween for a scrubbed one — the number
|
|
8
|
+
* follows scroll progress (a hero percentage readout).
|
|
7
9
|
*
|
|
8
10
|
* counter("[data-count]", { to: 100, duration: 4, ease: "power1.inOut" })
|
|
11
|
+
* counter("[data-progress]", { progress: true, pad: 2, suffix: "%" })
|
|
9
12
|
*/
|
|
10
13
|
import { gsap, ScrollTrigger, initGSAP, killTweens } from "../core/gsap.js";
|
|
11
14
|
import { guard } from "../core/guard.js";
|
|
@@ -15,7 +18,7 @@ export function counter(target, options = {}) {
|
|
|
15
18
|
const els = toArray(target);
|
|
16
19
|
if (!els.length)
|
|
17
20
|
return () => { };
|
|
18
|
-
const { from = 0, to = 100, duration = 4, ease = "power1.inOut", pad = 0, suffix = "", onScroll = false, start = "top 90%", onComplete, } = options;
|
|
21
|
+
const { from = 0, to = 100, duration = 4, ease = "power1.inOut", pad = 0, suffix = "", onScroll = false, progress = false, start = "top 90%", end = "bottom top", onComplete, } = options;
|
|
19
22
|
return guard(options, run);
|
|
20
23
|
function run() {
|
|
21
24
|
const tweens = [];
|
|
@@ -31,17 +34,24 @@ export function counter(target, options = {}) {
|
|
|
31
34
|
duration,
|
|
32
35
|
ease,
|
|
33
36
|
onUpdate: render,
|
|
34
|
-
onComplete:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
37
|
+
onComplete: progress
|
|
38
|
+
? undefined
|
|
39
|
+
: () => {
|
|
40
|
+
render();
|
|
41
|
+
onComplete?.(Math.round(state.v));
|
|
42
|
+
},
|
|
38
43
|
};
|
|
39
|
-
if (
|
|
44
|
+
if (progress) {
|
|
45
|
+
// Scroll-bound: value follows viewport progress, no timed completion.
|
|
46
|
+
vars.ease = "none";
|
|
47
|
+
vars.scrollTrigger = { trigger: el, start, end, scrub: true };
|
|
48
|
+
}
|
|
49
|
+
else if (onScroll) {
|
|
40
50
|
vars.scrollTrigger = { trigger: el, start, once: true };
|
|
41
51
|
}
|
|
42
52
|
tweens.push(gsap.to(state, vars));
|
|
43
53
|
});
|
|
44
|
-
if (onScroll)
|
|
54
|
+
if (onScroll || progress)
|
|
45
55
|
ScrollTrigger.refresh();
|
|
46
56
|
return () => {
|
|
47
57
|
tweens.forEach((t) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../src/effects/counter.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../src/effects/counter.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":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAgBtC,MAAM,UAAU,cAAc,CAC5B,IAAgB,EAChB,UAAiC,EAAE;IAEnC,QAAQ,EAAE,CAAC;IAEX,MAAM,EAAE,GACN,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAc,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9D,QAAQ,CAAC,aAAa,CAAc,eAAe,CAAC,CAAC;IACvD,MAAM,IAAI,GAAG,GAAG,CAAc,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI;QAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAElC,MAAM,EAAE,MAAM,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,SAAS,GAAG,WAAW,EAAE,IAAI,GAAG,IAAI,EAAE,GACjG,OAAO,CAAC;IAEV,OAAO,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE;QACzB,MAAM,SAAS,GAAG;YAChB,YAAY,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY;YACnC,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ;YAC3B,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;YACnB,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG;YACjB,aAAa,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa;SACtC,CAAC;QAEF,EAAE,CAAC,KAAK,CAAC,YAAY,GAAG,SAAkB,CAAC;QAC3C,wEAAwE;QACxE,oEAAoE;QACpE,0EAA0E;QAC1E,yEAAyE;QACzE,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;QAC5B,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;QACpB,EAAE,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;QACnB,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;QAEhC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAEpD,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChF,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QAEhF,0EAA0E;QAC1E,2EAA2E;QAC3E,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,MAAM,MAAM,GAAG,CAAC,CAAe,EAAE,EAAE;YACjC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC;YAC7B,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC;YAC7B,IAAI,OAAO,EAAE,CAAC;gBACZ,GAAG,CAAC,CAAC,CAAC,CAAC;gBACP,GAAG,CAAC,CAAC,CAAC,CAAC;YACT,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;gBACvB,OAAO,GAAG,IAAI,CAAC;YACjB,CAAC;YACD,IAAI,IAAI;gBAAE,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,IAAI,IAAI;gBAAE,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC;QAEF,MAAM,KAAK,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,+DAA+D;YACjE,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAC7C,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QAC/C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAExC,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YAChD,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;YAClD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAC3C,uEAAuE;YACvE,+DAA+D;YAC/D,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACjB,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACjB,UAAU,CAAC,EAAE,CAAC,CAAC;YACf,mEAAmE;YACnE,mEAAmE;YACnE,EAAE,CAAC,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC;YAC/C,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;YACvC,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;YAC/B,EAAE,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC;YAC7B,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC,aAAa,CAAC;YACjD,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,CAAC,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -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":"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"}
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
* Line reveal — the masked, staggered text reveal used all over DZ!NR.
|
|
3
3
|
*
|
|
4
4
|
* Text is split into lines, each line gets an `overflow:hidden` mask, and the
|
|
5
|
-
* inner line slides up from `y:100%` to `y:0%`.
|
|
5
|
+
* inner line slides up from `y:100%` to `y:0%`. `split: "chars"` runs the
|
|
6
|
+
* same masked rise per character (`.ak-char-mask > .ak-char`) with a tighter
|
|
7
|
+
* default stagger — the per-letter headline reveal.
|
|
6
8
|
*
|
|
7
9
|
* Two modes:
|
|
8
10
|
* mode: "scroll" → plays when the element enters the viewport and reverses
|
|
@@ -16,7 +18,9 @@ import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
|
16
18
|
export interface LineRevealOptions extends CommonOptions {
|
|
17
19
|
/** "scroll" plays on enter/reverse on leave; "immediate" plays at once. */
|
|
18
20
|
mode?: "scroll" | "immediate";
|
|
19
|
-
/**
|
|
21
|
+
/** Split granularity — masked lines, or masked per-character stagger. @default "lines" */
|
|
22
|
+
split?: "lines" | "chars";
|
|
23
|
+
/** Stagger between lines/chars, seconds. @default 0.1 (0.03 for chars) */
|
|
20
24
|
stagger?: number;
|
|
21
25
|
/** Animation duration, seconds. @default 1 */
|
|
22
26
|
duration?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-reveal.d.ts","sourceRoot":"","sources":["../../src/effects/line-reveal.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"line-reveal.d.ts","sourceRoot":"","sources":["../../src/effects/line-reveal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAiC,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,2EAA2E;IAC3E,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAyEvF;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
|