@cosmictraveler002/anim-kit 1.4.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 +20 -11
- package/dist/anim-kit.standalone.js +1 -1
- 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/package.json +1 -1
- package/src/core/smooth-scroll.ts +44 -2
package/README.md
CHANGED
|
@@ -98,7 +98,7 @@ resolves declarations through the same map — no `typesVersions` shim needed.
|
|
|
98
98
|
|
|
99
99
|
No build step on the consumer's end: `dist/` is served as-is from the npm
|
|
100
100
|
tarball by any npm CDN. Every URL is **version-pinned** — npm versions are
|
|
101
|
-
immutable, so `@cosmictraveler002/anim-kit@1.
|
|
101
|
+
immutable, so `@cosmictraveler002/anim-kit@1.5.0` always resolves to exactly that build, forever
|
|
102
102
|
(only a new version creates a new URL; nothing floats unless you ask for a
|
|
103
103
|
range).
|
|
104
104
|
|
|
@@ -109,12 +109,12 @@ plugins anim-kit uses) and `lenis` **inlined** — no import map, one URL, works
|
|
|
109
109
|
identically on jsDelivr and unpkg:
|
|
110
110
|
|
|
111
111
|
```html
|
|
112
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.
|
|
112
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.5.0/dist/styles/anim-kit.css" />
|
|
113
113
|
|
|
114
114
|
<script type="module">
|
|
115
115
|
import {
|
|
116
116
|
smoothScroll, lineReveal, marquee,
|
|
117
|
-
} from "https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.
|
|
117
|
+
} from "https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.5.0/dist/anim-kit.standalone.js";
|
|
118
118
|
|
|
119
119
|
smoothScroll();
|
|
120
120
|
lineReveal("[data-lines]", { mode: "scroll" });
|
|
@@ -122,7 +122,7 @@ identically on jsDelivr and unpkg:
|
|
|
122
122
|
</script>
|
|
123
123
|
```
|
|
124
124
|
|
|
125
|
-
unpkg serves the same file: `https://unpkg.com/@cosmictraveler002/anim-kit@1.
|
|
125
|
+
unpkg serves the same file: `https://unpkg.com/@cosmictraveler002/anim-kit@1.5.0/dist/anim-kit.standalone.js`
|
|
126
126
|
|
|
127
127
|
### Option 2 — jsDelivr `+esm`
|
|
128
128
|
|
|
@@ -131,7 +131,7 @@ per version):
|
|
|
131
131
|
|
|
132
132
|
```html
|
|
133
133
|
<script type="module">
|
|
134
|
-
import { lineReveal } from "https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.
|
|
134
|
+
import { lineReveal } from "https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.5.0/+esm";
|
|
135
135
|
</script>
|
|
136
136
|
```
|
|
137
137
|
|
|
@@ -143,13 +143,13 @@ locally, with CDN URLs — and the way to share one GSAP between anim-kit and
|
|
|
143
143
|
the rest of your page:
|
|
144
144
|
|
|
145
145
|
```html
|
|
146
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.
|
|
146
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.5.0/dist/styles/anim-kit.css" />
|
|
147
147
|
|
|
148
148
|
<script type="importmap">
|
|
149
149
|
{
|
|
150
150
|
"imports": {
|
|
151
|
-
"@cosmictraveler002/anim-kit": "https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.
|
|
152
|
-
"@cosmictraveler002/anim-kit/three": "https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.
|
|
151
|
+
"@cosmictraveler002/anim-kit": "https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.5.0/dist/index.js",
|
|
152
|
+
"@cosmictraveler002/anim-kit/three": "https://cdn.jsdelivr.net/npm/@cosmictraveler002/anim-kit@1.5.0/dist/three/index.js",
|
|
153
153
|
"three": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.module.js",
|
|
154
154
|
"gsap": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/index.js",
|
|
155
155
|
"gsap/ScrollTrigger": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/ScrollTrigger.js",
|
|
@@ -170,7 +170,7 @@ the rest of your page:
|
|
|
170
170
|
</script>
|
|
171
171
|
```
|
|
172
172
|
|
|
173
|
-
Swap the host for unpkg (`https://unpkg.com/@cosmictraveler002/anim-kit@1.
|
|
173
|
+
Swap the host for unpkg (`https://unpkg.com/@cosmictraveler002/anim-kit@1.5.0/dist/index.js`, …) —
|
|
174
174
|
the file layout is identical. GSAP subpaths are listed one by one because
|
|
175
175
|
import maps match specifiers literally: a trailing-slash prefix map would
|
|
176
176
|
produce extension-less URLs, which CDNs don't serve. The `gsap`/`lenis` pins
|
|
@@ -276,8 +276,12 @@ configured before first paint.
|
|
|
276
276
|
## Smooth scroll
|
|
277
277
|
|
|
278
278
|
Lenis is wired to ScrollTrigger the canonical way: Lenis drives the scroll,
|
|
279
|
-
`lenis.on("scroll", ScrollTrigger.update)` keeps triggers in sync,
|
|
280
|
-
is ticked from `gsap.ticker
|
|
279
|
+
`lenis.on("scroll", ScrollTrigger.update)` keeps triggers in sync, and
|
|
280
|
+
`lenis.raf` is ticked from `gsap.ticker` so scroll and tweens run off one
|
|
281
|
+
clock. GSAP's lag smoothing stays **on**: ticker listeners receive the same
|
|
282
|
+
adjusted clock the tweens use, so a stalled frame (GC pause, buffer tick)
|
|
283
|
+
advances one short step everywhere instead of snapping the scroll and every
|
|
284
|
+
scroll-linked tween to a new time in a single jump.
|
|
281
285
|
|
|
282
286
|
```ts
|
|
283
287
|
const scroller = smoothScroll({
|
|
@@ -287,6 +291,11 @@ const scroller = smoothScroll({
|
|
|
287
291
|
orientation: "vertical",
|
|
288
292
|
initialScroll: 0,
|
|
289
293
|
useScrollerProxy: false, // opt-in scrollerProxy for nested scrollers
|
|
294
|
+
touchMultiplier: 1, // touch-drag sensitivity (Lenis default 1)
|
|
295
|
+
wheelMultiplier: 1, // mouse-wheel sensitivity (Lenis default 1)
|
|
296
|
+
// Lag smoothing: leave unset for GSAP's built-in 500ms → 33ms compensation,
|
|
297
|
+
// false to disable it (the old behaviour), or retune for short hitches:
|
|
298
|
+
lagSmoothing: { threshold: 150 },
|
|
290
299
|
});
|
|
291
300
|
|
|
292
301
|
scroller.scrollTo("#work", { duration: 1.2 }); // programmatic, smoothed
|