use-scroll-animate 4.2.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 +9 -0
- package/dist/components/angular.cjs +2 -2
- package/dist/components/angular.d.cts +80 -76
- package/dist/components/angular.d.ts +80 -76
- package/dist/components/angular.js +2 -2
- package/dist/components/solid.cjs +2 -2
- package/dist/components/solid.d.cts +80 -76
- package/dist/components/solid.d.ts +80 -76
- package/dist/components/solid.js +2 -2
- package/dist/components/svelte.cjs +2 -2
- package/dist/components/svelte.d.cts +80 -76
- package/dist/components/svelte.d.ts +80 -76
- package/dist/components/svelte.js +2 -2
- 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/vue.cjs +2 -2
- package/dist/components/vue.d.cts +80 -76
- package/dist/components/vue.d.ts +80 -76
- package/dist/components/vue.js +2 -2
- package/dist/components.cjs +6 -0
- package/dist/components.cjs.map +1 -1
- package/dist/components.d.cts +186 -108
- package/dist/components.d.ts +186 -108
- package/dist/components.js +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/docs/ROADMAP.md +1 -1
- package/package.json +1 -1
|
@@ -117,7 +117,11 @@ interface UsaTypewriterElement extends UsaElement {
|
|
|
117
117
|
* them in a cascade (pure CSS animation per unit, transform / opacity /
|
|
118
118
|
* filter only). Words never break across lines.
|
|
119
119
|
*
|
|
120
|
-
*
|
|
120
|
+
* 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
|
|
121
|
+
* never split below the word, `by="lines"` reveals line by line, and `from`
|
|
122
|
+
* (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
|
|
123
|
+
*
|
|
124
|
+
* Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
|
|
121
125
|
* (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
|
|
122
126
|
* (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
|
|
123
127
|
* `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
|
|
@@ -230,6 +234,81 @@ interface UsaScrollHighlightElement extends UsaElement {
|
|
|
230
234
|
readonly progress: number;
|
|
231
235
|
}
|
|
232
236
|
|
|
237
|
+
/**
|
|
238
|
+
* Where a step starts on a timeline:
|
|
239
|
+
* - a number: absolute time in ms
|
|
240
|
+
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
241
|
+
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
242
|
+
* - `'<+=100'`: 100ms after the previous step's start
|
|
243
|
+
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
244
|
+
*/
|
|
245
|
+
type TimelinePosition = number | string;
|
|
246
|
+
interface TimelineStepOptions {
|
|
247
|
+
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
248
|
+
duration?: number | string;
|
|
249
|
+
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
250
|
+
easing?: string;
|
|
251
|
+
/** Start position, see `TimelinePosition`. */
|
|
252
|
+
at?: TimelinePosition;
|
|
253
|
+
/** ms between targets when the selector matches several elements. */
|
|
254
|
+
stagger?: number;
|
|
255
|
+
}
|
|
256
|
+
interface ScrubOptions {
|
|
257
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
258
|
+
offset?: number;
|
|
259
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
260
|
+
smooth?: number;
|
|
261
|
+
/**
|
|
262
|
+
* 4.1: which progress source drives the timeline.
|
|
263
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
264
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
265
|
+
*/
|
|
266
|
+
source?: 'view' | 'scroll';
|
|
267
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
268
|
+
engine?: 'auto' | 'native' | 'js';
|
|
269
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
270
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
271
|
+
}
|
|
272
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
273
|
+
interface ScrubHandle {
|
|
274
|
+
(): void;
|
|
275
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
276
|
+
readonly native: boolean;
|
|
277
|
+
}
|
|
278
|
+
interface Timeline {
|
|
279
|
+
/** Total length in ms. */
|
|
280
|
+
readonly duration: number;
|
|
281
|
+
/** Label positions in ms. */
|
|
282
|
+
readonly labels: Readonly<Record<string, number>>;
|
|
283
|
+
/** Current playhead in ms. */
|
|
284
|
+
readonly time: number;
|
|
285
|
+
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
286
|
+
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
287
|
+
/** Name a position (default: the current end). */
|
|
288
|
+
label(name: string, at?: TimelinePosition): Timeline;
|
|
289
|
+
/** Run `fn` when the playhead passes `at`. */
|
|
290
|
+
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
291
|
+
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
292
|
+
play(from?: TimelinePosition): Promise<void>;
|
|
293
|
+
/** Play backwards to 0. */
|
|
294
|
+
reverse(): Promise<void>;
|
|
295
|
+
pause(): Timeline;
|
|
296
|
+
/** Jump to a time (ms) or label. */
|
|
297
|
+
seek(to: TimelinePosition): Timeline;
|
|
298
|
+
/** Get or set progress 0–1. */
|
|
299
|
+
progress(p?: number): number;
|
|
300
|
+
/**
|
|
301
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
302
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
303
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
304
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
305
|
+
* Returns a stop function with a `native` flag.
|
|
306
|
+
*/
|
|
307
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
308
|
+
/** Stop and drop every animation (elements keep their last frame). */
|
|
309
|
+
cancel(): void;
|
|
310
|
+
}
|
|
311
|
+
|
|
233
312
|
/**
|
|
234
313
|
* use-scroll-animate/components/text — text effects.
|
|
235
314
|
* `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
|
|
@@ -1275,81 +1354,6 @@ declare global {
|
|
|
1275
1354
|
}
|
|
1276
1355
|
}
|
|
1277
1356
|
|
|
1278
|
-
/**
|
|
1279
|
-
* Where a step starts on a timeline:
|
|
1280
|
-
* - a number: absolute time in ms
|
|
1281
|
-
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
1282
|
-
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
1283
|
-
* - `'<+=100'`: 100ms after the previous step's start
|
|
1284
|
-
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
1285
|
-
*/
|
|
1286
|
-
type TimelinePosition = number | string;
|
|
1287
|
-
interface TimelineStepOptions {
|
|
1288
|
-
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
1289
|
-
duration?: number | string;
|
|
1290
|
-
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
1291
|
-
easing?: string;
|
|
1292
|
-
/** Start position, see `TimelinePosition`. */
|
|
1293
|
-
at?: TimelinePosition;
|
|
1294
|
-
/** ms between targets when the selector matches several elements. */
|
|
1295
|
-
stagger?: number;
|
|
1296
|
-
}
|
|
1297
|
-
interface ScrubOptions {
|
|
1298
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1299
|
-
offset?: number;
|
|
1300
|
-
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1301
|
-
smooth?: number;
|
|
1302
|
-
/**
|
|
1303
|
-
* 4.1: which progress source drives the timeline.
|
|
1304
|
-
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1305
|
-
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1306
|
-
*/
|
|
1307
|
-
source?: 'view' | 'scroll';
|
|
1308
|
-
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1309
|
-
engine?: 'auto' | 'native' | 'js';
|
|
1310
|
-
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1311
|
-
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1312
|
-
}
|
|
1313
|
-
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1314
|
-
interface ScrubHandle {
|
|
1315
|
-
(): void;
|
|
1316
|
-
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1317
|
-
readonly native: boolean;
|
|
1318
|
-
}
|
|
1319
|
-
interface Timeline {
|
|
1320
|
-
/** Total length in ms. */
|
|
1321
|
-
readonly duration: number;
|
|
1322
|
-
/** Label positions in ms. */
|
|
1323
|
-
readonly labels: Readonly<Record<string, number>>;
|
|
1324
|
-
/** Current playhead in ms. */
|
|
1325
|
-
readonly time: number;
|
|
1326
|
-
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
1327
|
-
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
1328
|
-
/** Name a position (default: the current end). */
|
|
1329
|
-
label(name: string, at?: TimelinePosition): Timeline;
|
|
1330
|
-
/** Run `fn` when the playhead passes `at`. */
|
|
1331
|
-
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
1332
|
-
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
1333
|
-
play(from?: TimelinePosition): Promise<void>;
|
|
1334
|
-
/** Play backwards to 0. */
|
|
1335
|
-
reverse(): Promise<void>;
|
|
1336
|
-
pause(): Timeline;
|
|
1337
|
-
/** Jump to a time (ms) or label. */
|
|
1338
|
-
seek(to: TimelinePosition): Timeline;
|
|
1339
|
-
/** Get or set progress 0–1. */
|
|
1340
|
-
progress(p?: number): number;
|
|
1341
|
-
/**
|
|
1342
|
-
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1343
|
-
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1344
|
-
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1345
|
-
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1346
|
-
* Returns a stop function with a `native` flag.
|
|
1347
|
-
*/
|
|
1348
|
-
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1349
|
-
/** Stop and drop every animation (elements keep their last frame). */
|
|
1350
|
-
cancel(): void;
|
|
1351
|
-
}
|
|
1352
|
-
|
|
1353
1357
|
/**
|
|
1354
1358
|
* `<usa-timeline>` — declarative choreography. Every descendant with
|
|
1355
1359
|
* `data-tl="<preset>"` becomes a step, in document order; `data-at`
|
package/dist/components/solid.js
CHANGED
|
@@ -5,6 +5,8 @@ export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
|
|
|
5
5
|
import './reveal.js';
|
|
6
6
|
import '../chunks/base-BPG5zvex.js';
|
|
7
7
|
import './text.js';
|
|
8
|
+
import '../chunks/core-LkGRmgES.js';
|
|
9
|
+
import './tokens.js';
|
|
8
10
|
import './interaction.js';
|
|
9
11
|
import './feedback.js';
|
|
10
12
|
import './background.js';
|
|
@@ -17,8 +19,6 @@ import './click.js';
|
|
|
17
19
|
import './ui.js';
|
|
18
20
|
import './page.js';
|
|
19
21
|
import './timeline.js';
|
|
20
|
-
import '../chunks/core-LkGRmgES.js';
|
|
21
|
-
import './tokens.js';
|
|
22
22
|
import './gesture.js';
|
|
23
23
|
import '../chunks/core-eXX8rB_b.js';
|
|
24
24
|
import './svg.js';
|
|
@@ -5,6 +5,8 @@ var bind = require('../chunks/bind-Ui43-n2d.cjs');
|
|
|
5
5
|
require('./reveal.cjs');
|
|
6
6
|
require('../chunks/base-CXx7jZ-o.cjs');
|
|
7
7
|
require('./text.cjs');
|
|
8
|
+
require('../chunks/core-BRIIoKeS.cjs');
|
|
9
|
+
require('./tokens.cjs');
|
|
8
10
|
require('./interaction.cjs');
|
|
9
11
|
require('./feedback.cjs');
|
|
10
12
|
require('./background.cjs');
|
|
@@ -17,8 +19,6 @@ require('./click.cjs');
|
|
|
17
19
|
require('./ui.cjs');
|
|
18
20
|
require('./page.cjs');
|
|
19
21
|
require('./timeline.cjs');
|
|
20
|
-
require('../chunks/core-BRIIoKeS.cjs');
|
|
21
|
-
require('./tokens.cjs');
|
|
22
22
|
require('./gesture.cjs');
|
|
23
23
|
require('../chunks/core-IaorbTdu.cjs');
|
|
24
24
|
require('./svg.cjs');
|
|
@@ -117,7 +117,11 @@ interface UsaTypewriterElement extends UsaElement {
|
|
|
117
117
|
* them in a cascade (pure CSS animation per unit, transform / opacity /
|
|
118
118
|
* filter only). Words never break across lines.
|
|
119
119
|
*
|
|
120
|
-
*
|
|
120
|
+
* 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
|
|
121
|
+
* never split below the word, `by="lines"` reveals line by line, and `from`
|
|
122
|
+
* (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
|
|
123
|
+
*
|
|
124
|
+
* Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
|
|
121
125
|
* (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
|
|
122
126
|
* (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
|
|
123
127
|
* `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
|
|
@@ -230,6 +234,81 @@ interface UsaScrollHighlightElement extends UsaElement {
|
|
|
230
234
|
readonly progress: number;
|
|
231
235
|
}
|
|
232
236
|
|
|
237
|
+
/**
|
|
238
|
+
* Where a step starts on a timeline:
|
|
239
|
+
* - a number: absolute time in ms
|
|
240
|
+
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
241
|
+
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
242
|
+
* - `'<+=100'`: 100ms after the previous step's start
|
|
243
|
+
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
244
|
+
*/
|
|
245
|
+
type TimelinePosition = number | string;
|
|
246
|
+
interface TimelineStepOptions {
|
|
247
|
+
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
248
|
+
duration?: number | string;
|
|
249
|
+
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
250
|
+
easing?: string;
|
|
251
|
+
/** Start position, see `TimelinePosition`. */
|
|
252
|
+
at?: TimelinePosition;
|
|
253
|
+
/** ms between targets when the selector matches several elements. */
|
|
254
|
+
stagger?: number;
|
|
255
|
+
}
|
|
256
|
+
interface ScrubOptions {
|
|
257
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
258
|
+
offset?: number;
|
|
259
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
260
|
+
smooth?: number;
|
|
261
|
+
/**
|
|
262
|
+
* 4.1: which progress source drives the timeline.
|
|
263
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
264
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
265
|
+
*/
|
|
266
|
+
source?: 'view' | 'scroll';
|
|
267
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
268
|
+
engine?: 'auto' | 'native' | 'js';
|
|
269
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
270
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
271
|
+
}
|
|
272
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
273
|
+
interface ScrubHandle {
|
|
274
|
+
(): void;
|
|
275
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
276
|
+
readonly native: boolean;
|
|
277
|
+
}
|
|
278
|
+
interface Timeline {
|
|
279
|
+
/** Total length in ms. */
|
|
280
|
+
readonly duration: number;
|
|
281
|
+
/** Label positions in ms. */
|
|
282
|
+
readonly labels: Readonly<Record<string, number>>;
|
|
283
|
+
/** Current playhead in ms. */
|
|
284
|
+
readonly time: number;
|
|
285
|
+
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
286
|
+
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
287
|
+
/** Name a position (default: the current end). */
|
|
288
|
+
label(name: string, at?: TimelinePosition): Timeline;
|
|
289
|
+
/** Run `fn` when the playhead passes `at`. */
|
|
290
|
+
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
291
|
+
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
292
|
+
play(from?: TimelinePosition): Promise<void>;
|
|
293
|
+
/** Play backwards to 0. */
|
|
294
|
+
reverse(): Promise<void>;
|
|
295
|
+
pause(): Timeline;
|
|
296
|
+
/** Jump to a time (ms) or label. */
|
|
297
|
+
seek(to: TimelinePosition): Timeline;
|
|
298
|
+
/** Get or set progress 0–1. */
|
|
299
|
+
progress(p?: number): number;
|
|
300
|
+
/**
|
|
301
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
302
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
303
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
304
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
305
|
+
* Returns a stop function with a `native` flag.
|
|
306
|
+
*/
|
|
307
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
308
|
+
/** Stop and drop every animation (elements keep their last frame). */
|
|
309
|
+
cancel(): void;
|
|
310
|
+
}
|
|
311
|
+
|
|
233
312
|
/**
|
|
234
313
|
* use-scroll-animate/components/text — text effects.
|
|
235
314
|
* `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
|
|
@@ -1275,81 +1354,6 @@ declare global {
|
|
|
1275
1354
|
}
|
|
1276
1355
|
}
|
|
1277
1356
|
|
|
1278
|
-
/**
|
|
1279
|
-
* Where a step starts on a timeline:
|
|
1280
|
-
* - a number: absolute time in ms
|
|
1281
|
-
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
1282
|
-
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
1283
|
-
* - `'<+=100'`: 100ms after the previous step's start
|
|
1284
|
-
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
1285
|
-
*/
|
|
1286
|
-
type TimelinePosition = number | string;
|
|
1287
|
-
interface TimelineStepOptions {
|
|
1288
|
-
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
1289
|
-
duration?: number | string;
|
|
1290
|
-
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
1291
|
-
easing?: string;
|
|
1292
|
-
/** Start position, see `TimelinePosition`. */
|
|
1293
|
-
at?: TimelinePosition;
|
|
1294
|
-
/** ms between targets when the selector matches several elements. */
|
|
1295
|
-
stagger?: number;
|
|
1296
|
-
}
|
|
1297
|
-
interface ScrubOptions {
|
|
1298
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1299
|
-
offset?: number;
|
|
1300
|
-
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1301
|
-
smooth?: number;
|
|
1302
|
-
/**
|
|
1303
|
-
* 4.1: which progress source drives the timeline.
|
|
1304
|
-
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1305
|
-
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1306
|
-
*/
|
|
1307
|
-
source?: 'view' | 'scroll';
|
|
1308
|
-
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1309
|
-
engine?: 'auto' | 'native' | 'js';
|
|
1310
|
-
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1311
|
-
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1312
|
-
}
|
|
1313
|
-
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1314
|
-
interface ScrubHandle {
|
|
1315
|
-
(): void;
|
|
1316
|
-
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1317
|
-
readonly native: boolean;
|
|
1318
|
-
}
|
|
1319
|
-
interface Timeline {
|
|
1320
|
-
/** Total length in ms. */
|
|
1321
|
-
readonly duration: number;
|
|
1322
|
-
/** Label positions in ms. */
|
|
1323
|
-
readonly labels: Readonly<Record<string, number>>;
|
|
1324
|
-
/** Current playhead in ms. */
|
|
1325
|
-
readonly time: number;
|
|
1326
|
-
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
1327
|
-
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
1328
|
-
/** Name a position (default: the current end). */
|
|
1329
|
-
label(name: string, at?: TimelinePosition): Timeline;
|
|
1330
|
-
/** Run `fn` when the playhead passes `at`. */
|
|
1331
|
-
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
1332
|
-
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
1333
|
-
play(from?: TimelinePosition): Promise<void>;
|
|
1334
|
-
/** Play backwards to 0. */
|
|
1335
|
-
reverse(): Promise<void>;
|
|
1336
|
-
pause(): Timeline;
|
|
1337
|
-
/** Jump to a time (ms) or label. */
|
|
1338
|
-
seek(to: TimelinePosition): Timeline;
|
|
1339
|
-
/** Get or set progress 0–1. */
|
|
1340
|
-
progress(p?: number): number;
|
|
1341
|
-
/**
|
|
1342
|
-
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1343
|
-
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1344
|
-
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1345
|
-
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1346
|
-
* Returns a stop function with a `native` flag.
|
|
1347
|
-
*/
|
|
1348
|
-
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1349
|
-
/** Stop and drop every animation (elements keep their last frame). */
|
|
1350
|
-
cancel(): void;
|
|
1351
|
-
}
|
|
1352
|
-
|
|
1353
1357
|
/**
|
|
1354
1358
|
* `<usa-timeline>` — declarative choreography. Every descendant with
|
|
1355
1359
|
* `data-tl="<preset>"` becomes a step, in document order; `data-at`
|
|
@@ -117,7 +117,11 @@ interface UsaTypewriterElement extends UsaElement {
|
|
|
117
117
|
* them in a cascade (pure CSS animation per unit, transform / opacity /
|
|
118
118
|
* filter only). Words never break across lines.
|
|
119
119
|
*
|
|
120
|
-
*
|
|
120
|
+
* 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
|
|
121
|
+
* never split below the word, `by="lines"` reveals line by line, and `from`
|
|
122
|
+
* (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
|
|
123
|
+
*
|
|
124
|
+
* Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
|
|
121
125
|
* (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
|
|
122
126
|
* (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
|
|
123
127
|
* `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
|
|
@@ -230,6 +234,81 @@ interface UsaScrollHighlightElement extends UsaElement {
|
|
|
230
234
|
readonly progress: number;
|
|
231
235
|
}
|
|
232
236
|
|
|
237
|
+
/**
|
|
238
|
+
* Where a step starts on a timeline:
|
|
239
|
+
* - a number: absolute time in ms
|
|
240
|
+
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
241
|
+
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
242
|
+
* - `'<+=100'`: 100ms after the previous step's start
|
|
243
|
+
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
244
|
+
*/
|
|
245
|
+
type TimelinePosition = number | string;
|
|
246
|
+
interface TimelineStepOptions {
|
|
247
|
+
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
248
|
+
duration?: number | string;
|
|
249
|
+
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
250
|
+
easing?: string;
|
|
251
|
+
/** Start position, see `TimelinePosition`. */
|
|
252
|
+
at?: TimelinePosition;
|
|
253
|
+
/** ms between targets when the selector matches several elements. */
|
|
254
|
+
stagger?: number;
|
|
255
|
+
}
|
|
256
|
+
interface ScrubOptions {
|
|
257
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
258
|
+
offset?: number;
|
|
259
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
260
|
+
smooth?: number;
|
|
261
|
+
/**
|
|
262
|
+
* 4.1: which progress source drives the timeline.
|
|
263
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
264
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
265
|
+
*/
|
|
266
|
+
source?: 'view' | 'scroll';
|
|
267
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
268
|
+
engine?: 'auto' | 'native' | 'js';
|
|
269
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
270
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
271
|
+
}
|
|
272
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
273
|
+
interface ScrubHandle {
|
|
274
|
+
(): void;
|
|
275
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
276
|
+
readonly native: boolean;
|
|
277
|
+
}
|
|
278
|
+
interface Timeline {
|
|
279
|
+
/** Total length in ms. */
|
|
280
|
+
readonly duration: number;
|
|
281
|
+
/** Label positions in ms. */
|
|
282
|
+
readonly labels: Readonly<Record<string, number>>;
|
|
283
|
+
/** Current playhead in ms. */
|
|
284
|
+
readonly time: number;
|
|
285
|
+
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
286
|
+
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
287
|
+
/** Name a position (default: the current end). */
|
|
288
|
+
label(name: string, at?: TimelinePosition): Timeline;
|
|
289
|
+
/** Run `fn` when the playhead passes `at`. */
|
|
290
|
+
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
291
|
+
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
292
|
+
play(from?: TimelinePosition): Promise<void>;
|
|
293
|
+
/** Play backwards to 0. */
|
|
294
|
+
reverse(): Promise<void>;
|
|
295
|
+
pause(): Timeline;
|
|
296
|
+
/** Jump to a time (ms) or label. */
|
|
297
|
+
seek(to: TimelinePosition): Timeline;
|
|
298
|
+
/** Get or set progress 0–1. */
|
|
299
|
+
progress(p?: number): number;
|
|
300
|
+
/**
|
|
301
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
302
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
303
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
304
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
305
|
+
* Returns a stop function with a `native` flag.
|
|
306
|
+
*/
|
|
307
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
308
|
+
/** Stop and drop every animation (elements keep their last frame). */
|
|
309
|
+
cancel(): void;
|
|
310
|
+
}
|
|
311
|
+
|
|
233
312
|
/**
|
|
234
313
|
* use-scroll-animate/components/text — text effects.
|
|
235
314
|
* `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
|
|
@@ -1275,81 +1354,6 @@ declare global {
|
|
|
1275
1354
|
}
|
|
1276
1355
|
}
|
|
1277
1356
|
|
|
1278
|
-
/**
|
|
1279
|
-
* Where a step starts on a timeline:
|
|
1280
|
-
* - a number: absolute time in ms
|
|
1281
|
-
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
1282
|
-
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
1283
|
-
* - `'<+=100'`: 100ms after the previous step's start
|
|
1284
|
-
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
1285
|
-
*/
|
|
1286
|
-
type TimelinePosition = number | string;
|
|
1287
|
-
interface TimelineStepOptions {
|
|
1288
|
-
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
1289
|
-
duration?: number | string;
|
|
1290
|
-
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
1291
|
-
easing?: string;
|
|
1292
|
-
/** Start position, see `TimelinePosition`. */
|
|
1293
|
-
at?: TimelinePosition;
|
|
1294
|
-
/** ms between targets when the selector matches several elements. */
|
|
1295
|
-
stagger?: number;
|
|
1296
|
-
}
|
|
1297
|
-
interface ScrubOptions {
|
|
1298
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1299
|
-
offset?: number;
|
|
1300
|
-
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1301
|
-
smooth?: number;
|
|
1302
|
-
/**
|
|
1303
|
-
* 4.1: which progress source drives the timeline.
|
|
1304
|
-
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1305
|
-
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1306
|
-
*/
|
|
1307
|
-
source?: 'view' | 'scroll';
|
|
1308
|
-
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1309
|
-
engine?: 'auto' | 'native' | 'js';
|
|
1310
|
-
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1311
|
-
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1312
|
-
}
|
|
1313
|
-
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1314
|
-
interface ScrubHandle {
|
|
1315
|
-
(): void;
|
|
1316
|
-
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1317
|
-
readonly native: boolean;
|
|
1318
|
-
}
|
|
1319
|
-
interface Timeline {
|
|
1320
|
-
/** Total length in ms. */
|
|
1321
|
-
readonly duration: number;
|
|
1322
|
-
/** Label positions in ms. */
|
|
1323
|
-
readonly labels: Readonly<Record<string, number>>;
|
|
1324
|
-
/** Current playhead in ms. */
|
|
1325
|
-
readonly time: number;
|
|
1326
|
-
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
1327
|
-
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
1328
|
-
/** Name a position (default: the current end). */
|
|
1329
|
-
label(name: string, at?: TimelinePosition): Timeline;
|
|
1330
|
-
/** Run `fn` when the playhead passes `at`. */
|
|
1331
|
-
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
1332
|
-
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
1333
|
-
play(from?: TimelinePosition): Promise<void>;
|
|
1334
|
-
/** Play backwards to 0. */
|
|
1335
|
-
reverse(): Promise<void>;
|
|
1336
|
-
pause(): Timeline;
|
|
1337
|
-
/** Jump to a time (ms) or label. */
|
|
1338
|
-
seek(to: TimelinePosition): Timeline;
|
|
1339
|
-
/** Get or set progress 0–1. */
|
|
1340
|
-
progress(p?: number): number;
|
|
1341
|
-
/**
|
|
1342
|
-
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1343
|
-
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1344
|
-
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1345
|
-
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1346
|
-
* Returns a stop function with a `native` flag.
|
|
1347
|
-
*/
|
|
1348
|
-
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1349
|
-
/** Stop and drop every animation (elements keep their last frame). */
|
|
1350
|
-
cancel(): void;
|
|
1351
|
-
}
|
|
1352
|
-
|
|
1353
1357
|
/**
|
|
1354
1358
|
* `<usa-timeline>` — declarative choreography. Every descendant with
|
|
1355
1359
|
* `data-tl="<preset>"` becomes a step, in document order; `data-at`
|
|
@@ -4,6 +4,8 @@ export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
|
|
|
4
4
|
import './reveal.js';
|
|
5
5
|
import '../chunks/base-BPG5zvex.js';
|
|
6
6
|
import './text.js';
|
|
7
|
+
import '../chunks/core-LkGRmgES.js';
|
|
8
|
+
import './tokens.js';
|
|
7
9
|
import './interaction.js';
|
|
8
10
|
import './feedback.js';
|
|
9
11
|
import './background.js';
|
|
@@ -16,8 +18,6 @@ import './click.js';
|
|
|
16
18
|
import './ui.js';
|
|
17
19
|
import './page.js';
|
|
18
20
|
import './timeline.js';
|
|
19
|
-
import '../chunks/core-LkGRmgES.js';
|
|
20
|
-
import './tokens.js';
|
|
21
21
|
import './gesture.js';
|
|
22
22
|
import '../chunks/core-eXX8rB_b.js';
|
|
23
23
|
import './svg.js';
|