use-scroll-animate 4.1.0 → 4.3.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/CHANGELOG.md +20 -0
- package/dist/chunks/{core-CLu8ZrC-.cjs → core-BRIIoKeS.cjs} +4 -3
- package/dist/chunks/core-BRIIoKeS.cjs.map +1 -0
- package/dist/chunks/{core-QTFk4kgO.js → core-LkGRmgES.js} +4 -3
- package/dist/chunks/core-LkGRmgES.js.map +1 -0
- package/dist/components/angular.cjs +2 -1
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +80 -76
- package/dist/components/angular.d.ts +80 -76
- package/dist/components/angular.js +2 -1
- package/dist/components/angular.js.map +1 -1
- package/dist/components/solid.cjs +2 -1
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +80 -76
- package/dist/components/solid.d.ts +80 -76
- package/dist/components/solid.js +2 -1
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +2 -1
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +80 -76
- package/dist/components/svelte.d.ts +80 -76
- package/dist/components/svelte.js +2 -1
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/text.cjs +283 -10
- package/dist/components/text.cjs.map +1 -1
- package/dist/components/text.d.cts +156 -3
- package/dist/components/text.d.ts +156 -3
- package/dist/components/text.js +278 -11
- package/dist/components/text.js.map +1 -1
- package/dist/components/timeline.cjs +2 -1
- package/dist/components/timeline.cjs.map +1 -1
- package/dist/components/timeline.d.cts +3 -3
- package/dist/components/timeline.d.ts +3 -3
- package/dist/components/timeline.js +3 -2
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/tokens.cjs +226 -0
- package/dist/components/tokens.cjs.map +1 -0
- package/dist/components/tokens.d.cts +74 -0
- package/dist/components/tokens.d.ts +74 -0
- package/dist/components/tokens.js +211 -0
- package/dist/components/tokens.js.map +1 -0
- package/dist/components/vue.cjs +2 -1
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +80 -76
- package/dist/components/vue.d.ts +80 -76
- package/dist/components/vue.js +2 -1
- package/dist/components/vue.js.map +1 -1
- package/dist/components.cjs +22 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.d.cts +258 -108
- package/dist/components.d.ts +258 -108
- package/dist/components.js +3 -2
- package/dist/components.js.map +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +2 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/motion-tokens.css +31 -0
- package/docs/motion-tokens.md +46 -0
- package/docs/motion.tokens.json +132 -0
- package/package.json +11 -1
- package/dist/chunks/core-CLu8ZrC-.cjs.map +0 -1
- package/dist/chunks/core-QTFk4kgO.js.map +0 -1
package/dist/components.d.cts
CHANGED
|
@@ -165,7 +165,11 @@ declare function defineTypewriter(tag?: string): CustomElementConstructor | unde
|
|
|
165
165
|
* them in a cascade (pure CSS animation per unit, transform / opacity /
|
|
166
166
|
* filter only). Words never break across lines.
|
|
167
167
|
*
|
|
168
|
-
*
|
|
168
|
+
* 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
|
|
169
|
+
* never split below the word, `by="lines"` reveals line by line, and `from`
|
|
170
|
+
* (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
|
|
171
|
+
*
|
|
172
|
+
* Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
|
|
169
173
|
* (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
|
|
170
174
|
* (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
|
|
171
175
|
* `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
|
|
@@ -292,6 +296,185 @@ interface UsaScrollHighlightElement extends UsaElement {
|
|
|
292
296
|
}
|
|
293
297
|
declare function defineScrollHighlight(tag?: string): CustomElementConstructor | undefined;
|
|
294
298
|
|
|
299
|
+
/**
|
|
300
|
+
* Where a step starts on a timeline:
|
|
301
|
+
* - a number: absolute time in ms
|
|
302
|
+
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
303
|
+
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
304
|
+
* - `'<+=100'`: 100ms after the previous step's start
|
|
305
|
+
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
306
|
+
*/
|
|
307
|
+
type TimelinePosition = number | string;
|
|
308
|
+
interface TimelineStepOptions {
|
|
309
|
+
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
310
|
+
duration?: number | string;
|
|
311
|
+
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
312
|
+
easing?: string;
|
|
313
|
+
/** Start position, see `TimelinePosition`. */
|
|
314
|
+
at?: TimelinePosition;
|
|
315
|
+
/** ms between targets when the selector matches several elements. */
|
|
316
|
+
stagger?: number;
|
|
317
|
+
}
|
|
318
|
+
interface TimelineOptions {
|
|
319
|
+
/** Defaults for every step. */
|
|
320
|
+
defaults?: Pick<TimelineStepOptions, 'duration' | 'easing' | 'stagger'>;
|
|
321
|
+
/** Playback rate (1 = normal). */
|
|
322
|
+
speed?: number;
|
|
323
|
+
/** Called after `play()` reaches the end (or the start when reversed). */
|
|
324
|
+
onComplete?: () => void;
|
|
325
|
+
/** Called on every frame with progress 0–1. */
|
|
326
|
+
onUpdate?: (progress: number) => void;
|
|
327
|
+
}
|
|
328
|
+
interface ScrubOptions {
|
|
329
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
330
|
+
offset?: number;
|
|
331
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
332
|
+
smooth?: number;
|
|
333
|
+
/**
|
|
334
|
+
* 4.1: which progress source drives the timeline.
|
|
335
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
336
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
337
|
+
*/
|
|
338
|
+
source?: 'view' | 'scroll';
|
|
339
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
340
|
+
engine?: 'auto' | 'native' | 'js';
|
|
341
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
342
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
343
|
+
}
|
|
344
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
345
|
+
interface ScrubHandle {
|
|
346
|
+
(): void;
|
|
347
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
348
|
+
readonly native: boolean;
|
|
349
|
+
}
|
|
350
|
+
/** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
|
|
351
|
+
declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
|
|
352
|
+
interface Timeline {
|
|
353
|
+
/** Total length in ms. */
|
|
354
|
+
readonly duration: number;
|
|
355
|
+
/** Label positions in ms. */
|
|
356
|
+
readonly labels: Readonly<Record<string, number>>;
|
|
357
|
+
/** Current playhead in ms. */
|
|
358
|
+
readonly time: number;
|
|
359
|
+
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
360
|
+
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
361
|
+
/** Name a position (default: the current end). */
|
|
362
|
+
label(name: string, at?: TimelinePosition): Timeline;
|
|
363
|
+
/** Run `fn` when the playhead passes `at`. */
|
|
364
|
+
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
365
|
+
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
366
|
+
play(from?: TimelinePosition): Promise<void>;
|
|
367
|
+
/** Play backwards to 0. */
|
|
368
|
+
reverse(): Promise<void>;
|
|
369
|
+
pause(): Timeline;
|
|
370
|
+
/** Jump to a time (ms) or label. */
|
|
371
|
+
seek(to: TimelinePosition): Timeline;
|
|
372
|
+
/** Get or set progress 0–1. */
|
|
373
|
+
progress(p?: number): number;
|
|
374
|
+
/**
|
|
375
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
376
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
377
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
378
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
379
|
+
* Returns a stop function with a `native` flag.
|
|
380
|
+
*/
|
|
381
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
382
|
+
/** Stop and drop every animation (elements keep their last frame). */
|
|
383
|
+
cancel(): void;
|
|
384
|
+
}
|
|
385
|
+
/** Keyframe presets usable by name in `to()` and `data-tl`. */
|
|
386
|
+
declare const TIMELINE_PRESETS: Record<string, Keyframe[]>;
|
|
387
|
+
/** Resolve a position against the previous step and labels (pure). */
|
|
388
|
+
declare function resolvePosition(pos: TimelinePosition | undefined, end: number, prevStart: number, labels?: Record<string, number>): number;
|
|
389
|
+
/**
|
|
390
|
+
* Choreograph animations on one clock: chain, overlap, label, seek, reverse and
|
|
391
|
+
* scrub them with scroll. Built on WAAPI (paused animations driven by one
|
|
392
|
+
* playhead); without WAAPI or under reduced motion it jumps to the end state.
|
|
393
|
+
*
|
|
394
|
+
* @example
|
|
395
|
+
* const tl = timeline({ defaults: { duration: 500 } })
|
|
396
|
+
* .to('.title', 'fade-up')
|
|
397
|
+
* .label('cards')
|
|
398
|
+
* .to('.card', 'scale', { stagger: 80, at: '-=200' })
|
|
399
|
+
* .to('.cta', [{ opacity: 0 }, { opacity: 1 }], { at: 'cards+=400' });
|
|
400
|
+
* tl.play(); // or tl.scrub(document.querySelector('.hero'))
|
|
401
|
+
*/
|
|
402
|
+
declare function timeline(options?: TimelineOptions): Timeline;
|
|
403
|
+
|
|
404
|
+
/**
|
|
405
|
+
* `splitText()` (4.3) — split an element's text into characters, words and / or
|
|
406
|
+
* lines, ready for per-unit choreography with `timeline()`.
|
|
407
|
+
*
|
|
408
|
+
* - Grapheme- and word-aware via `Intl.Segmenter` when available: emoji and
|
|
409
|
+
* combining marks stay whole; Chinese / Japanese / Korean text is split into
|
|
410
|
+
* real words (or one unit per character without `Segmenter`).
|
|
411
|
+
* - RTL aware: Arabic-script text (cursive, letters join) is never split
|
|
412
|
+
* below the word, so shaping is preserved; Hebrew and other RTL scripts
|
|
413
|
+
* split per character. Units stay in logical (reading) order.
|
|
414
|
+
* - Nested inline markup (`<em>`, `<a>`, `<br>`) is preserved.
|
|
415
|
+
* - Accessible: the original text stays available to assistive tech via a
|
|
416
|
+
* visually hidden copy; the split spans are `aria-hidden`.
|
|
417
|
+
*/
|
|
418
|
+
type SplitBy = 'char' | 'word' | 'line';
|
|
419
|
+
interface SplitTextOptions {
|
|
420
|
+
/** What to split into: `'char'`, `'word'`, `'line'` or several, e.g. `['word', 'line']`. Default `'char'` (words are always wrapped too). */
|
|
421
|
+
by?: SplitBy | SplitBy[] | string;
|
|
422
|
+
/** Locale for `Intl.Segmenter` (default: the element's `lang`, else the document's). */
|
|
423
|
+
locale?: string;
|
|
424
|
+
/** Class prefix (default `usa-split`): units get `usa-split-char` / `-word` / `-line`. */
|
|
425
|
+
className?: string;
|
|
426
|
+
}
|
|
427
|
+
interface SplitResult {
|
|
428
|
+
chars: HTMLElement[];
|
|
429
|
+
words: HTMLElement[];
|
|
430
|
+
lines: HTMLElement[];
|
|
431
|
+
/** `'rtl'` or `'ltr'` — the direction the split ran in. */
|
|
432
|
+
direction: 'ltr' | 'rtl';
|
|
433
|
+
/** Re-measure lines (call after a resize or font load). */
|
|
434
|
+
relayout(): HTMLElement[];
|
|
435
|
+
/** Restore the original markup. */
|
|
436
|
+
revert(): void;
|
|
437
|
+
}
|
|
438
|
+
/** Scripts whose letters join (splitting them would break shaping). */
|
|
439
|
+
declare const JOINING_SCRIPT: RegExp;
|
|
440
|
+
/** Grapheme clusters of `s` (emoji / combining marks stay whole). */
|
|
441
|
+
declare function graphemes(s: string, locale?: string): string[];
|
|
442
|
+
/**
|
|
443
|
+
* Word-ish tokens of `s`, whitespace kept as separate tokens. CJK text is
|
|
444
|
+
* segmented into words with `Intl.Segmenter`, or per character without it.
|
|
445
|
+
*/
|
|
446
|
+
declare function words(s: string, locale?: string): string[];
|
|
447
|
+
declare function splitText(el: HTMLElement, options?: SplitTextOptions): SplitResult;
|
|
448
|
+
type SplitFrom = 'start' | 'end' | 'center' | 'edges' | 'random';
|
|
449
|
+
/** Order indices `0…n-1` by choreography: from the start, end, center outwards, edges inwards, or random (seeded). */
|
|
450
|
+
declare function splitOrder(n: number, from?: SplitFrom, seed?: number): number[];
|
|
451
|
+
interface SplitTimelineOptions extends SplitTextOptions {
|
|
452
|
+
/** Which units to animate (default: the finest in `by`). */
|
|
453
|
+
unit?: 'char' | 'word' | 'line';
|
|
454
|
+
/** Timeline preset name or keyframes (default `'fade-up'`). */
|
|
455
|
+
preset?: string | Keyframe[];
|
|
456
|
+
/** ms between units (default 30 for chars, 80 for words, 140 for lines). */
|
|
457
|
+
stagger?: number;
|
|
458
|
+
/** Duration per unit in ms or a motion token name (default 500). */
|
|
459
|
+
duration?: number | string;
|
|
460
|
+
easing?: string;
|
|
461
|
+
/** Choreography order (default `'start'` — reading order, also for RTL). */
|
|
462
|
+
from?: SplitFrom;
|
|
463
|
+
}
|
|
464
|
+
/**
|
|
465
|
+
* Split `el` and build a `timeline()` with one step per unit — play it,
|
|
466
|
+
* `scrub()` it with scroll, `reverse()` or `seek()` it.
|
|
467
|
+
*
|
|
468
|
+
* ```ts
|
|
469
|
+
* const { timeline: tl } = splitTimeline(h1, { by: 'char', preset: 'blur', from: 'center' });
|
|
470
|
+
* tl.play();
|
|
471
|
+
* ```
|
|
472
|
+
*/
|
|
473
|
+
declare function splitTimeline(el: HTMLElement, options?: SplitTimelineOptions): {
|
|
474
|
+
split: SplitResult;
|
|
475
|
+
timeline: Timeline;
|
|
476
|
+
};
|
|
477
|
+
|
|
295
478
|
/**
|
|
296
479
|
* use-scroll-animate/components/text — text effects.
|
|
297
480
|
* `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
|
|
@@ -1747,111 +1930,6 @@ declare global {
|
|
|
1747
1930
|
}
|
|
1748
1931
|
}
|
|
1749
1932
|
|
|
1750
|
-
/**
|
|
1751
|
-
* Where a step starts on a timeline:
|
|
1752
|
-
* - a number: absolute time in ms
|
|
1753
|
-
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
1754
|
-
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
1755
|
-
* - `'<+=100'`: 100ms after the previous step's start
|
|
1756
|
-
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
1757
|
-
*/
|
|
1758
|
-
type TimelinePosition = number | string;
|
|
1759
|
-
interface TimelineStepOptions {
|
|
1760
|
-
/** Duration in ms (default: timeline default, 600). */
|
|
1761
|
-
duration?: number;
|
|
1762
|
-
/** CSS easing (default `cubic-bezier(0.22, 1, 0.36, 1)`). */
|
|
1763
|
-
easing?: string;
|
|
1764
|
-
/** Start position, see `TimelinePosition`. */
|
|
1765
|
-
at?: TimelinePosition;
|
|
1766
|
-
/** ms between targets when the selector matches several elements. */
|
|
1767
|
-
stagger?: number;
|
|
1768
|
-
}
|
|
1769
|
-
interface TimelineOptions {
|
|
1770
|
-
/** Defaults for every step. */
|
|
1771
|
-
defaults?: Pick<TimelineStepOptions, 'duration' | 'easing' | 'stagger'>;
|
|
1772
|
-
/** Playback rate (1 = normal). */
|
|
1773
|
-
speed?: number;
|
|
1774
|
-
/** Called after `play()` reaches the end (or the start when reversed). */
|
|
1775
|
-
onComplete?: () => void;
|
|
1776
|
-
/** Called on every frame with progress 0–1. */
|
|
1777
|
-
onUpdate?: (progress: number) => void;
|
|
1778
|
-
}
|
|
1779
|
-
interface ScrubOptions {
|
|
1780
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1781
|
-
offset?: number;
|
|
1782
|
-
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1783
|
-
smooth?: number;
|
|
1784
|
-
/**
|
|
1785
|
-
* 4.1: which progress source drives the timeline.
|
|
1786
|
-
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1787
|
-
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1788
|
-
*/
|
|
1789
|
-
source?: 'view' | 'scroll';
|
|
1790
|
-
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1791
|
-
engine?: 'auto' | 'native' | 'js';
|
|
1792
|
-
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1793
|
-
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1794
|
-
}
|
|
1795
|
-
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1796
|
-
interface ScrubHandle {
|
|
1797
|
-
(): void;
|
|
1798
|
-
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1799
|
-
readonly native: boolean;
|
|
1800
|
-
}
|
|
1801
|
-
/** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
|
|
1802
|
-
declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
|
|
1803
|
-
interface Timeline {
|
|
1804
|
-
/** Total length in ms. */
|
|
1805
|
-
readonly duration: number;
|
|
1806
|
-
/** Label positions in ms. */
|
|
1807
|
-
readonly labels: Readonly<Record<string, number>>;
|
|
1808
|
-
/** Current playhead in ms. */
|
|
1809
|
-
readonly time: number;
|
|
1810
|
-
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
1811
|
-
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
1812
|
-
/** Name a position (default: the current end). */
|
|
1813
|
-
label(name: string, at?: TimelinePosition): Timeline;
|
|
1814
|
-
/** Run `fn` when the playhead passes `at`. */
|
|
1815
|
-
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
1816
|
-
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
1817
|
-
play(from?: TimelinePosition): Promise<void>;
|
|
1818
|
-
/** Play backwards to 0. */
|
|
1819
|
-
reverse(): Promise<void>;
|
|
1820
|
-
pause(): Timeline;
|
|
1821
|
-
/** Jump to a time (ms) or label. */
|
|
1822
|
-
seek(to: TimelinePosition): Timeline;
|
|
1823
|
-
/** Get or set progress 0–1. */
|
|
1824
|
-
progress(p?: number): number;
|
|
1825
|
-
/**
|
|
1826
|
-
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1827
|
-
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1828
|
-
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1829
|
-
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1830
|
-
* Returns a stop function with a `native` flag.
|
|
1831
|
-
*/
|
|
1832
|
-
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1833
|
-
/** Stop and drop every animation (elements keep their last frame). */
|
|
1834
|
-
cancel(): void;
|
|
1835
|
-
}
|
|
1836
|
-
/** Keyframe presets usable by name in `to()` and `data-tl`. */
|
|
1837
|
-
declare const TIMELINE_PRESETS: Record<string, Keyframe[]>;
|
|
1838
|
-
/** Resolve a position against the previous step and labels (pure). */
|
|
1839
|
-
declare function resolvePosition(pos: TimelinePosition | undefined, end: number, prevStart: number, labels?: Record<string, number>): number;
|
|
1840
|
-
/**
|
|
1841
|
-
* Choreograph animations on one clock: chain, overlap, label, seek, reverse and
|
|
1842
|
-
* scrub them with scroll. Built on WAAPI (paused animations driven by one
|
|
1843
|
-
* playhead); without WAAPI or under reduced motion it jumps to the end state.
|
|
1844
|
-
*
|
|
1845
|
-
* @example
|
|
1846
|
-
* const tl = timeline({ defaults: { duration: 500 } })
|
|
1847
|
-
* .to('.title', 'fade-up')
|
|
1848
|
-
* .label('cards')
|
|
1849
|
-
* .to('.card', 'scale', { stagger: 80, at: '-=200' })
|
|
1850
|
-
* .to('.cta', [{ opacity: 0 }, { opacity: 1 }], { at: 'cards+=400' });
|
|
1851
|
-
* tl.play(); // or tl.scrub(document.querySelector('.hero'))
|
|
1852
|
-
*/
|
|
1853
|
-
declare function timeline(options?: TimelineOptions): Timeline;
|
|
1854
|
-
|
|
1855
1933
|
/**
|
|
1856
1934
|
* `<usa-timeline>` — declarative choreography. Every descendant with
|
|
1857
1935
|
* `data-tl="<preset>"` becomes a step, in document order; `data-at`
|
|
@@ -2401,6 +2479,78 @@ declare global {
|
|
|
2401
2479
|
}
|
|
2402
2480
|
}
|
|
2403
2481
|
|
|
2482
|
+
/**
|
|
2483
|
+
* use-scroll-animate/components/tokens — motion design tokens (4.2).
|
|
2484
|
+
*
|
|
2485
|
+
* One source of truth for durations, easings and springs: as CSS custom
|
|
2486
|
+
* properties (`--usa-duration-fast`, `--usa-easing-emphasized`,
|
|
2487
|
+
* `--usa-spring-bouncy-stiffness`…), as W3C Design Tokens JSON, and importable
|
|
2488
|
+
* from Figma Tokens (Tokens Studio) or Style Dictionary exports.
|
|
2489
|
+
*
|
|
2490
|
+
* ```ts
|
|
2491
|
+
* import { applyMotionTokens, importMotionTokens, motionToken } from 'use-scroll-animate/components/tokens';
|
|
2492
|
+
* applyMotionTokens(importMotionTokens(await (await fetch('/tokens.json')).json()));
|
|
2493
|
+
* el.animate(frames, { duration: motionToken('duration', 'slow'), easing: motionToken('easing', 'emphasized') });
|
|
2494
|
+
* ```
|
|
2495
|
+
*/
|
|
2496
|
+
interface SpringToken {
|
|
2497
|
+
stiffness: number;
|
|
2498
|
+
damping: number;
|
|
2499
|
+
mass: number;
|
|
2500
|
+
}
|
|
2501
|
+
interface MotionTokens {
|
|
2502
|
+
/** Durations in ms. */
|
|
2503
|
+
duration: Record<string, number>;
|
|
2504
|
+
/** CSS easing strings. */
|
|
2505
|
+
easing: Record<string, string>;
|
|
2506
|
+
/** Spring physics parameters. */
|
|
2507
|
+
spring: Record<string, SpringToken>;
|
|
2508
|
+
}
|
|
2509
|
+
/** The default motion scale (Material / Fluent-inspired). */
|
|
2510
|
+
declare const MOTION_TOKENS: MotionTokens;
|
|
2511
|
+
type MotionTokenGroup = keyof MotionTokens;
|
|
2512
|
+
type DeepPartialTokens = {
|
|
2513
|
+
[K in keyof MotionTokens]?: Partial<MotionTokens[K]>;
|
|
2514
|
+
};
|
|
2515
|
+
/** Merge partial tokens over a base (defaults: the built-in scale). */
|
|
2516
|
+
declare function mergeMotionTokens(partial: DeepPartialTokens, base?: MotionTokens): MotionTokens;
|
|
2517
|
+
/** The custom-property map: `{ '--usa-duration-fast': '150ms', … }`. */
|
|
2518
|
+
declare function motionTokensToVars(tokens?: MotionTokens, prefix?: string): Record<string, string>;
|
|
2519
|
+
/** A stylesheet string: `:root { --usa-duration-fast: 150ms; … }`. */
|
|
2520
|
+
declare function motionTokensToCss(tokens?: MotionTokens, selector?: string, prefix?: string): string;
|
|
2521
|
+
/** W3C Design Tokens (DTCG) JSON: `{ motion: { duration: { fast: { $type: 'duration', $value: '150ms' } } } }`. */
|
|
2522
|
+
declare function motionTokensToJSON(tokens?: MotionTokens): Record<string, unknown>;
|
|
2523
|
+
/** Parse `150ms`, `0.15s`, `150` → ms. */
|
|
2524
|
+
declare function parseDuration(v: unknown): number | undefined;
|
|
2525
|
+
/** Parse `[x1,y1,x2,y2]`, `'cubic-bezier(…)'`, `'0.2, 0, 0, 1'` or a keyword → CSS easing. */
|
|
2526
|
+
declare function parseEasing(v: unknown): string | undefined;
|
|
2527
|
+
/**
|
|
2528
|
+
* Import tokens from W3C DTCG JSON, Figma Tokens / Tokens Studio
|
|
2529
|
+
* (`{ value, type }`) or Style Dictionary (`{ value }`, nested) — anything
|
|
2530
|
+
* under a `duration` / `easing` / `spring` group (any depth, e.g.
|
|
2531
|
+
* `motion.duration.fast` or `global.animation.easing.out`), or typed leaves
|
|
2532
|
+
* (`duration`, `cubicBezier`, `transition`, `spring`). Unknown values are
|
|
2533
|
+
* skipped; the result is merged over the defaults.
|
|
2534
|
+
*/
|
|
2535
|
+
declare function importMotionTokens(json: unknown, base?: MotionTokens): MotionTokens;
|
|
2536
|
+
/** The tokens currently applied (via `applyMotionTokens`), or the defaults. */
|
|
2537
|
+
declare function getMotionTokens(): MotionTokens;
|
|
2538
|
+
/**
|
|
2539
|
+
* Write tokens as CSS custom properties on `root` (default `<html>`) and make
|
|
2540
|
+
* them the active set for `motionToken()`. Returns an undo function.
|
|
2541
|
+
*/
|
|
2542
|
+
declare function applyMotionTokens(tokens?: DeepPartialTokens | MotionTokens, root?: HTMLElement, prefix?: string): () => void;
|
|
2543
|
+
/** Look up a token: `motionToken('duration', 'fast')` → `150`; `motionToken('easing', 'emphasized')` → CSS easing. */
|
|
2544
|
+
declare function motionToken(group: 'duration', name: string): number;
|
|
2545
|
+
declare function motionToken(group: 'easing', name: string): string;
|
|
2546
|
+
declare function motionToken(group: 'spring', name: string): SpringToken;
|
|
2547
|
+
/** `var(--usa-duration-fast, 150ms)` — a CSS reference with the current value as fallback. */
|
|
2548
|
+
declare function motionVar(group: MotionTokenGroup, name: string, prop?: 'stiffness' | 'damping' | 'mass', prefix?: string): string;
|
|
2549
|
+
/** Resolve a duration that may be a token name (`'fast'`) or ms. */
|
|
2550
|
+
declare function resolveDurationToken(v: number | string | undefined, fallback: number): number;
|
|
2551
|
+
/** Resolve an easing that may be a token name (`'emphasized'`) or CSS. */
|
|
2552
|
+
declare function resolveEasingToken(v: string | undefined, fallback: string): string;
|
|
2553
|
+
|
|
2404
2554
|
/** The component categories and their default tags. */
|
|
2405
2555
|
declare const COMPONENT_CATEGORIES: {
|
|
2406
2556
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
@@ -2430,5 +2580,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
2430
2580
|
*/
|
|
2431
2581
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2432
2582
|
|
|
2433
|
-
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2434
|
-
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
|
2583
|
+
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, JOINING_SCRIPT, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyMotionTokens, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, getMotionTokens, glQuad, graphemes, haptic, importMotionTokens, interpolatePath, linearEasing, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, orientationToTilt, pageTransition, parseDuration, parseEasing, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2584
|
+
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionTokenGroup, MotionTokens, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|