@cosmictraveler002/anim-kit 1.3.0 → 1.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.
- package/README.md +94 -13
- package/dist/anim-kit.standalone.js +5 -5
- package/dist/anim-kit.standalone.js.map +1 -1
- package/dist/core/smooth-scroll.d.ts +29 -1
- package/dist/core/smooth-scroll.d.ts.map +1 -1
- package/dist/core/smooth-scroll.js +23 -3
- package/dist/core/smooth-scroll.js.map +1 -1
- package/dist/effects/drag-rail.d.ts +9 -1
- package/dist/effects/drag-rail.d.ts.map +1 -1
- package/dist/effects/drag-rail.js +57 -18
- package/dist/effects/drag-rail.js.map +1 -1
- package/dist/three/gl-rail.d.ts +29 -0
- package/dist/three/gl-rail.d.ts.map +1 -0
- package/dist/three/gl-rail.js +350 -0
- package/dist/three/gl-rail.js.map +1 -0
- package/dist/three/index.d.ts +3 -1
- package/dist/three/index.d.ts.map +1 -1
- package/dist/three/index.js +2 -1
- package/dist/three/index.js.map +1 -1
- package/package.json +1 -1
- package/src/core/smooth-scroll.ts +44 -2
- package/src/effects/drag-rail.ts +67 -18
- package/src/three/gl-rail.ts +437 -0
- package/src/three/index.ts +3 -1
|
@@ -4,10 +4,14 @@
|
|
|
4
4
|
* Uses the canonical Lenis + GSAP recipe:
|
|
5
5
|
* lenis.on("scroll", ScrollTrigger.update)
|
|
6
6
|
* gsap.ticker.add(t => lenis.raf(t * 1000))
|
|
7
|
-
* gsap.ticker.lagSmoothing(0)
|
|
8
7
|
*
|
|
9
8
|
* Driving Lenis from GSAP's ticker (rather than its own rAF) keeps both
|
|
10
9
|
* clocks on the same frame, which is what stops ScrollTrigger from stuttering.
|
|
10
|
+
* Those ticker callbacks receive the *same* adjusted clock the tweens run on,
|
|
11
|
+
* so GSAP's lag smoothing is deliberately left on: a stalled frame (GC pause,
|
|
12
|
+
* buffer tick) advances one short step everywhere instead of snapping the
|
|
13
|
+
* scroll and every scroll-linked tween to a new time at once. See
|
|
14
|
+
* SmoothScrollOptions.lagSmoothing to retune it or restore the old opt-out.
|
|
11
15
|
*
|
|
12
16
|
* `useScrollerProxy: true` additionally proxies `document.documentElement`,
|
|
13
17
|
* matching kalakritico.in's setup — only needed if you scroll a nested
|
|
@@ -28,6 +32,30 @@ export interface SmoothScrollOptions extends CommonOptions {
|
|
|
28
32
|
initialScroll?: number;
|
|
29
33
|
/** Proxy documentElement through ScrollTrigger (nested scrollers). @default false */
|
|
30
34
|
useScrollerProxy?: boolean;
|
|
35
|
+
/** Touch-drag sensitivity — forwarded to Lenis `touchMultiplier`. @default 1 */
|
|
36
|
+
touchMultiplier?: number;
|
|
37
|
+
/** Mouse-wheel sensitivity — forwarded to Lenis `wheelMultiplier`. @default 1 */
|
|
38
|
+
wheelMultiplier?: number;
|
|
39
|
+
/**
|
|
40
|
+
* GSAP lag smoothing on the shared ticker: a frame longer than `threshold`
|
|
41
|
+
* advances only `adjustedLag` ms, so a hitch can't teleport the scroll and
|
|
42
|
+
* every scroll-linked tween in one jump.
|
|
43
|
+
*
|
|
44
|
+
* - `undefined` — leave GSAP's setup alone; its built-in compensation
|
|
45
|
+
* (500ms → 33ms) stays active.
|
|
46
|
+
* - `false` — disable lag smoothing (anim-kit ≤1.4 behaviour, what the
|
|
47
|
+
* Lenis README recipe asks for): timing stays exactly wall-clock, but
|
|
48
|
+
* every frame longer than the threshold snaps.
|
|
49
|
+
* - `{ threshold, adjustedLag }` — retune it. Lower the threshold (e.g.
|
|
50
|
+
* `150`) to smooth short mobile hitches; raise it if slow devices should
|
|
51
|
+
* keep real-time speed instead of briefly running slow-motion.
|
|
52
|
+
*
|
|
53
|
+
* `destroy()` restores GSAP's default (500/33) whenever this was set.
|
|
54
|
+
*/
|
|
55
|
+
lagSmoothing?: false | {
|
|
56
|
+
threshold?: number;
|
|
57
|
+
adjustedLag?: number;
|
|
58
|
+
};
|
|
31
59
|
}
|
|
32
60
|
export interface SmoothScrollHandle {
|
|
33
61
|
/** The Lenis instance, or null when smooth scrolling was skipped. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smooth-scroll.d.ts","sourceRoot":"","sources":["../../src/core/smooth-scroll.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"smooth-scroll.d.ts","sourceRoot":"","sources":["../../src/core/smooth-scroll.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gFAAgF;IAChF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrE;AAED,MAAM,WAAW,kBAAkB;IACjC,qEAAqE;IACrE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,EAAE,IAAI,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7G,oDAAoD;IACpD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AASD,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CA2GlF"}
|
|
@@ -4,10 +4,14 @@
|
|
|
4
4
|
* Uses the canonical Lenis + GSAP recipe:
|
|
5
5
|
* lenis.on("scroll", ScrollTrigger.update)
|
|
6
6
|
* gsap.ticker.add(t => lenis.raf(t * 1000))
|
|
7
|
-
* gsap.ticker.lagSmoothing(0)
|
|
8
7
|
*
|
|
9
8
|
* Driving Lenis from GSAP's ticker (rather than its own rAF) keeps both
|
|
10
9
|
* clocks on the same frame, which is what stops ScrollTrigger from stuttering.
|
|
10
|
+
* Those ticker callbacks receive the *same* adjusted clock the tweens run on,
|
|
11
|
+
* so GSAP's lag smoothing is deliberately left on: a stalled frame (GC pause,
|
|
12
|
+
* buffer tick) advances one short step everywhere instead of snapping the
|
|
13
|
+
* scroll and every scroll-linked tween to a new time at once. See
|
|
14
|
+
* SmoothScrollOptions.lagSmoothing to retune it or restore the old opt-out.
|
|
11
15
|
*
|
|
12
16
|
* `useScrollerProxy: true` additionally proxies `document.documentElement`,
|
|
13
17
|
* matching kalakritico.in's setup — only needed if you scroll a nested
|
|
@@ -24,7 +28,7 @@ const INERT = {
|
|
|
24
28
|
};
|
|
25
29
|
export function smoothScroll(options = {}) {
|
|
26
30
|
initGSAP();
|
|
27
|
-
const { force = false, lerp = 0.08, smoothWheel = true, smoothTouch = false, orientation = "vertical", initialScroll = 0, useScrollerProxy = false, } = options;
|
|
31
|
+
const { force = false, lerp = 0.08, smoothWheel = true, smoothTouch = false, orientation = "vertical", initialScroll = 0, useScrollerProxy = false, touchMultiplier, wheelMultiplier, lagSmoothing, } = options;
|
|
28
32
|
if (typeof window === "undefined")
|
|
29
33
|
return INERT;
|
|
30
34
|
// Honour the OS-level preference: fall back to native scrolling.
|
|
@@ -36,6 +40,9 @@ export function smoothScroll(options = {}) {
|
|
|
36
40
|
syncTouch: smoothTouch,
|
|
37
41
|
orientation,
|
|
38
42
|
autoRaf: false,
|
|
43
|
+
// undefined falls through to Lenis's own defaults (1 / 1).
|
|
44
|
+
touchMultiplier,
|
|
45
|
+
wheelMultiplier,
|
|
39
46
|
});
|
|
40
47
|
if (initialScroll)
|
|
41
48
|
lenis.scrollTo(initialScroll, { immediate: true });
|
|
@@ -45,7 +52,18 @@ export function smoothScroll(options = {}) {
|
|
|
45
52
|
// 2. Run Lenis off GSAP's ticker so both share one frame clock.
|
|
46
53
|
const tick = (time) => lenis.raf(time * 1000);
|
|
47
54
|
gsap.ticker.add(tick);
|
|
48
|
-
|
|
55
|
+
// Lag smoothing drives *one* clock — the tweens' and this ticker's alike —
|
|
56
|
+
// so leaving GSAP's compensation on turns a stalled frame into one short
|
|
57
|
+
// step everywhere instead of a snap. Only touch the ticker when asked, so a
|
|
58
|
+
// host page's own setup is never clobbered.
|
|
59
|
+
let lagTouched = false;
|
|
60
|
+
if (lagSmoothing !== undefined) {
|
|
61
|
+
lagTouched = true;
|
|
62
|
+
if (lagSmoothing === false)
|
|
63
|
+
gsap.ticker.lagSmoothing(0);
|
|
64
|
+
else
|
|
65
|
+
gsap.ticker.lagSmoothing(lagSmoothing.threshold ?? 500, lagSmoothing.adjustedLag ?? 33);
|
|
66
|
+
}
|
|
49
67
|
// 3. Optional: proxy the scroller (for nested/element scrollers).
|
|
50
68
|
if (useScrollerProxy) {
|
|
51
69
|
ScrollTrigger.scrollerProxy(document.documentElement, {
|
|
@@ -81,6 +99,8 @@ export function smoothScroll(options = {}) {
|
|
|
81
99
|
window.removeEventListener("resize", onResize);
|
|
82
100
|
window.removeEventListener("load", refresh);
|
|
83
101
|
gsap.ticker.remove(tick);
|
|
102
|
+
if (lagTouched)
|
|
103
|
+
gsap.ticker.lagSmoothing(500, 33); // undo our change — GSAP's default
|
|
84
104
|
lenis.off("scroll", onScroll);
|
|
85
105
|
if (useScrollerProxy) {
|
|
86
106
|
ScrollTrigger.scrollerProxy(document.documentElement, {});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smooth-scroll.js","sourceRoot":"","sources":["../../src/core/smooth-scroll.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"smooth-scroll.js","sourceRoot":"","sources":["../../src/core/smooth-scroll.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,8 @@ import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
|
2
2
|
export interface DragRailOptions extends CommonOptions {
|
|
3
3
|
/** Scroll viewport around the track — defaults to `track.parentElement`. */
|
|
4
4
|
viewport?: TargetLike;
|
|
5
|
+
/** Motion axis — `"auto"` flips vertical when only the column overflows. @default `"x"` */
|
|
6
|
+
axis?: "x" | "y" | "auto";
|
|
5
7
|
/** Children that tilt with velocity. @default `":scope > *"` */
|
|
6
8
|
item?: string;
|
|
7
9
|
/** Follow speed toward the intent, per 60fps frame (0..1). @default 0.1 */
|
|
@@ -16,8 +18,14 @@ export interface DragRailOptions extends CommonOptions {
|
|
|
16
18
|
tilt?: number;
|
|
17
19
|
/** Tilt clamp, degrees. @default 8 */
|
|
18
20
|
tiltMax?: number;
|
|
19
|
-
/** `(pos, velocity) => {}` called every rendered frame while mounted. */
|
|
21
|
+
/** `(pos, velocity) => {}` called every rendered frame while mounted (pos along the active axis). */
|
|
20
22
|
onTick?: (pos: number, velocity: number) => void;
|
|
21
23
|
}
|
|
24
|
+
/**
|
|
25
|
+
* The axis rule shared by `dragRail` and `glRail`: fixed when asked, otherwise
|
|
26
|
+
* the layout decides — a rail only runs vertical when the *column* overflows
|
|
27
|
+
* and the row doesn't (a mobile stack), everything else is horizontal.
|
|
28
|
+
*/
|
|
29
|
+
export declare function resolveRailAxis(track: HTMLElement, viewport: HTMLElement, pref: "x" | "y" | "auto"): "x" | "y";
|
|
22
30
|
export declare function dragRail(target: TargetLike, options?: DragRailOptions): Destroy;
|
|
23
31
|
//# sourceMappingURL=drag-rail.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-rail.d.ts","sourceRoot":"","sources":["../../src/effects/drag-rail.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"drag-rail.d.ts","sourceRoot":"","sources":["../../src/effects/drag-rail.ts"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;IAC1B,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qGAAqG;IACrG,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,WAAW,EACrB,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,GACvB,GAAG,GAAG,GAAG,CAKX;AAED,wBAAgB,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CAiMnF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Drag rail — the bounded, inertia-driven horizontal
|
|
2
|
+
* Drag rail — the bounded, inertia-driven rail (horizontal or vertical).
|
|
3
3
|
*
|
|
4
4
|
* A grab-and-throw rail with real physics, extracted from the drag-driven
|
|
5
5
|
* portfolio rail pattern: pointer drag, wheel and trackpad all feed one
|
|
@@ -29,11 +29,18 @@
|
|
|
29
29
|
* - **Velocity-reactive items.** `tilt` rotates children proportionally to the
|
|
30
30
|
* rendered per-frame velocity (the cards lean into motion and spring flat at
|
|
31
31
|
* rest); `onTick` exposes pos/velocity for WebGL or custom consumers.
|
|
32
|
+
* - **Two axes.** `axis: "x"` (default), `"y"`, or `"auto"` — under `auto`
|
|
33
|
+
* the *layout* decides via `resolveRailAxis()` (only the column overflows →
|
|
34
|
+
* vertical, otherwise horizontal; the same rule glRail uses to pick its
|
|
35
|
+
* bend axis). touch-action claims the rail's own gesture axis (`pan-y` for
|
|
36
|
+
* a horizontal rail, `pan-x` for a vertical one) so the page never fights
|
|
37
|
+
* the rail for a swipe, and a mid-life flip re-keys the transform instead
|
|
38
|
+
* of leaving the stale axis behind.
|
|
32
39
|
* - **Fidelity.** `destroy()` removes every listener + the ticker, kills the
|
|
33
40
|
* tilt state and restores the inline cursor/user-select/touch-action the
|
|
34
41
|
* effect had overwritten.
|
|
35
42
|
*
|
|
36
|
-
* dragRail(".ak-rail-track", { tilt: 0.05 })
|
|
43
|
+
* dragRail(".ak-rail-track", { tilt: 0.05, axis: "auto" })
|
|
37
44
|
*
|
|
38
45
|
* CSS: viewport `overflow: hidden`; track `display: flex; width: max-content;
|
|
39
46
|
* gap: 1rem; cursor: grab; user-select: none; touch-action: pan-y`.
|
|
@@ -41,12 +48,24 @@
|
|
|
41
48
|
import { gsap, initGSAP } from "../core/gsap.js";
|
|
42
49
|
import { guard } from "../core/guard.js";
|
|
43
50
|
import { one, toArray } from "../core/util.js";
|
|
51
|
+
/**
|
|
52
|
+
* The axis rule shared by `dragRail` and `glRail`: fixed when asked, otherwise
|
|
53
|
+
* the layout decides — a rail only runs vertical when the *column* overflows
|
|
54
|
+
* and the row doesn't (a mobile stack), everything else is horizontal.
|
|
55
|
+
*/
|
|
56
|
+
export function resolveRailAxis(track, viewport, pref) {
|
|
57
|
+
if (pref !== "auto")
|
|
58
|
+
return pref;
|
|
59
|
+
const overflowY = track.scrollHeight - viewport.clientHeight;
|
|
60
|
+
const overflowX = track.scrollWidth - viewport.clientWidth;
|
|
61
|
+
return overflowY > 0 && overflowX <= 0 ? "y" : "x";
|
|
62
|
+
}
|
|
44
63
|
export function dragRail(target, options = {}) {
|
|
45
64
|
initGSAP();
|
|
46
65
|
const track = one(target);
|
|
47
66
|
if (!track)
|
|
48
67
|
return () => { };
|
|
49
|
-
const { viewport, item = ":scope > *", lerp = 0.1, edge = 140, throwScale = 14, wheel = true, tilt = 0, tiltMax = 8, onTick, } = options;
|
|
68
|
+
const { viewport, axis: axisOpt = "x", item = ":scope > *", lerp = 0.1, edge = 140, throwScale = 14, wheel = true, tilt = 0, tiltMax = 8, onTick, } = options;
|
|
50
69
|
return guard(options, () => {
|
|
51
70
|
const vp = one(viewport) ?? track.parentElement ?? track;
|
|
52
71
|
const prevStyle = {
|
|
@@ -55,13 +74,24 @@ export function dragRail(target, options = {}) {
|
|
|
55
74
|
touchAction: track.style.touchAction,
|
|
56
75
|
};
|
|
57
76
|
/* ---------------- bounds ---------------- */
|
|
58
|
-
let
|
|
77
|
+
let axis = resolveRailAxis(track, vp, axisOpt);
|
|
78
|
+
let flipped = false; // axis changed mid-life → force a transform re-key
|
|
79
|
+
let min = 0; // most-negative resting position (content overflows)
|
|
59
80
|
let max = 0; // start of the rail
|
|
60
|
-
let pos = 0; // rendered
|
|
61
|
-
let intent = 0; // wanted
|
|
81
|
+
let pos = 0; // rendered position
|
|
82
|
+
let intent = 0; // wanted position (drag/wheel/throw feed this)
|
|
62
83
|
const measure = () => {
|
|
63
|
-
const
|
|
64
|
-
|
|
84
|
+
const next = resolveRailAxis(track, vp, axisOpt);
|
|
85
|
+
if (next !== axis) {
|
|
86
|
+
axis = next;
|
|
87
|
+
flipped = true;
|
|
88
|
+
// Claim the rail's own gesture axis; the other one belongs to the page.
|
|
89
|
+
track.style.touchAction = axis === "x" ? "pan-y" : "pan-x";
|
|
90
|
+
}
|
|
91
|
+
const overflow = axis === "x"
|
|
92
|
+
? track.scrollWidth - vp.clientWidth
|
|
93
|
+
: track.scrollHeight - vp.clientHeight;
|
|
94
|
+
min = -Math.max(0, overflow);
|
|
65
95
|
max = 0;
|
|
66
96
|
// Fold an out-of-range position back through the soft edge (no jump).
|
|
67
97
|
intent = soft(intent);
|
|
@@ -77,14 +107,15 @@ export function dragRail(target, options = {}) {
|
|
|
77
107
|
}
|
|
78
108
|
/* ---------------- pointer drag ---------------- */
|
|
79
109
|
let dragging = false;
|
|
80
|
-
let
|
|
110
|
+
let last = 0; // last pointer coordinate along the active axis
|
|
81
111
|
let velocity = 0; // smoothed pointer delta (px/frame-ish)
|
|
82
112
|
let renderedVel = 0; // rendered per-frame velocity (drives tilt/onTick)
|
|
113
|
+
const along = (e) => axis === "x" ? e.clientX : e.clientY;
|
|
83
114
|
const onPointerDown = (e) => {
|
|
84
115
|
if (e.pointerType === "mouse" && e.button !== 0)
|
|
85
116
|
return;
|
|
86
117
|
dragging = true;
|
|
87
|
-
|
|
118
|
+
last = along(e);
|
|
88
119
|
velocity = 0;
|
|
89
120
|
try {
|
|
90
121
|
vp.setPointerCapture(e.pointerId);
|
|
@@ -97,10 +128,10 @@ export function dragRail(target, options = {}) {
|
|
|
97
128
|
const onPointerMove = (e) => {
|
|
98
129
|
if (!dragging)
|
|
99
130
|
return;
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
velocity = velocity * 0.7 +
|
|
103
|
-
intent = soft(intent +
|
|
131
|
+
const delta = along(e) - last;
|
|
132
|
+
last = along(e);
|
|
133
|
+
velocity = velocity * 0.7 + delta * 0.3; // smooth out event-rate jitter
|
|
134
|
+
intent = soft(intent + delta);
|
|
104
135
|
};
|
|
105
136
|
const endDrag = (e) => {
|
|
106
137
|
if (!dragging)
|
|
@@ -125,7 +156,13 @@ export function dragRail(target, options = {}) {
|
|
|
125
156
|
const onWheel = (e) => {
|
|
126
157
|
if (!wheel)
|
|
127
158
|
return;
|
|
128
|
-
const delta =
|
|
159
|
+
const delta = axis === "x"
|
|
160
|
+
? Math.abs(e.deltaX) > Math.abs(e.deltaY)
|
|
161
|
+
? e.deltaX
|
|
162
|
+
: e.deltaY
|
|
163
|
+
: e.deltaY;
|
|
164
|
+
if (!delta)
|
|
165
|
+
return;
|
|
129
166
|
const bound = delta > 0 ? max : min;
|
|
130
167
|
const outward = (intent - bound) * (delta > 0 ? 1 : -1);
|
|
131
168
|
if (outward > edge)
|
|
@@ -149,9 +186,11 @@ export function dragRail(target, options = {}) {
|
|
|
149
186
|
const prev = pos;
|
|
150
187
|
pos += (intent - pos) * Math.min(1, lerp * ratio);
|
|
151
188
|
renderedVel = pos - prev;
|
|
152
|
-
if (renderedVel === 0 && pos === intent)
|
|
189
|
+
if (renderedVel === 0 && pos === intent && !flipped)
|
|
153
190
|
return; // idle: skip the write
|
|
154
|
-
|
|
191
|
+
flipped = false;
|
|
192
|
+
// Re-key both axes: a flip must clear the stale one, never leave it behind.
|
|
193
|
+
gsap.set(track, axis === "x" ? { x: pos, y: 0 } : { x: 0, y: pos });
|
|
155
194
|
if (items.length) {
|
|
156
195
|
gsap.set(items, {
|
|
157
196
|
rotation: gsap.utils.clamp(-tiltMax, tiltMax, renderedVel * tilt),
|
|
@@ -164,7 +203,7 @@ export function dragRail(target, options = {}) {
|
|
|
164
203
|
track.dataset.akRail = "true";
|
|
165
204
|
track.style.cursor = "grab";
|
|
166
205
|
track.style.userSelect = "none";
|
|
167
|
-
track.style.touchAction = "pan-y";
|
|
206
|
+
track.style.touchAction = axis === "x" ? "pan-y" : "pan-x";
|
|
168
207
|
vp.addEventListener("pointerdown", onPointerDown);
|
|
169
208
|
vp.addEventListener("pointermove", onPointerMove);
|
|
170
209
|
vp.addEventListener("pointerup", onPointerUp);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-rail.js","sourceRoot":"","sources":["../../src/effects/drag-rail.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"drag-rail.js","sourceRoot":"","sources":["../../src/effects/drag-rail.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { CommonOptions, Destroy, TargetLike } from "../core/types.js";
|
|
2
|
+
export interface GlRailOptions extends CommonOptions {
|
|
3
|
+
/** Stage around the track — the canvas covers it. Defaults to `track.parentElement`. */
|
|
4
|
+
viewport?: TargetLike;
|
|
5
|
+
/** Cards re-rendered on the canvas — each needs an `<img>`. @default `":scope > *"` */
|
|
6
|
+
card?: string;
|
|
7
|
+
/** Motion + bend axis: `"x"`, `"y"`, or the layout's choice. @default `"auto"` */
|
|
8
|
+
axis?: "x" | "y" | "auto";
|
|
9
|
+
/** Cylinder radius the cards bend around, px — smaller = stronger bend. @default 1200 */
|
|
10
|
+
radius?: number;
|
|
11
|
+
/** Corner radius, px (rounded-box SDF in the fragment shader). @default 16 */
|
|
12
|
+
corner?: number;
|
|
13
|
+
/** Perspective grid floor under the cards. @default true */
|
|
14
|
+
grid?: boolean;
|
|
15
|
+
/** Device-pixel-ratio cap. @default 2 */
|
|
16
|
+
dpr?: number;
|
|
17
|
+
/** Follow speed toward the intent, per 60fps frame (0..1). @default 0.1 */
|
|
18
|
+
lerp?: number;
|
|
19
|
+
/** Rubber-band resistance distance past the ends, px. @default 140 */
|
|
20
|
+
edge?: number;
|
|
21
|
+
/** Momentum multiplier on release. @default 14 */
|
|
22
|
+
throwScale?: number;
|
|
23
|
+
/** Wheel / trackpad drives the rail (consumed while it can still move). @default true */
|
|
24
|
+
wheel?: boolean;
|
|
25
|
+
/** `(pos, velocity) => {}` called every rendered frame while mounted. */
|
|
26
|
+
onTick?: (pos: number, velocity: number) => void;
|
|
27
|
+
}
|
|
28
|
+
export declare function glRail(target: TargetLike, options?: GlRailOptions): Destroy;
|
|
29
|
+
//# sourceMappingURL=gl-rail.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gl-rail.d.ts","sourceRoot":"","sources":["../../src/three/gl-rail.ts"],"names":[],"mappings":"AAuDA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,wFAAwF;IACxF,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;IAC1B,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAsFD,wBAAgB,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,GAAE,aAAkB,GAAG,OAAO,CA4Q/E"}
|