use-scroll-animate 3.8.0 → 4.0.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 +47 -0
- package/README.md +17 -14
- package/README_ja.md +11 -11
- package/README_zh.md +12 -12
- package/dist/chunks/{base-BpROOcey.js → base-ZARFccur.js} +2 -2
- package/dist/chunks/{base-BpROOcey.js.map → base-ZARFccur.js.map} +1 -1
- package/dist/chunks/core-Co-6AL0h.js +218 -0
- package/dist/chunks/core-Co-6AL0h.js.map +1 -0
- package/dist/chunks/{core-uxs3ETou.js → core-DKY-fVzR.js} +2 -2
- package/dist/chunks/{core-uxs3ETou.js.map → core-DKY-fVzR.js.map} +1 -1
- package/dist/chunks/core-DXqZm5Il.cjs +222 -0
- package/dist/chunks/core-DXqZm5Il.cjs.map +1 -0
- package/dist/chunks/{index-tags-BANJ-e4H.js → index-tags-43Xtd01A.js} +3 -2
- package/dist/chunks/index-tags-43Xtd01A.js.map +1 -0
- package/dist/chunks/{index-tags-wbuPiMR6.cjs → index-tags-BQh_uGqH.cjs} +3 -2
- package/dist/chunks/index-tags-BQh_uGqH.cjs.map +1 -0
- package/dist/chunks/{spring-C-fw7_9f.js → spring-E2ickYNI.js} +2 -2
- package/dist/chunks/{spring-C-fw7_9f.js.map → spring-E2ickYNI.js.map} +1 -1
- package/dist/chunks/{variants-CHe1VbSn.js → variants-DvnxvRCM.js} +2 -2
- package/dist/chunks/{variants-CHe1VbSn.js.map → variants-DvnxvRCM.js.map} +1 -1
- package/dist/components/angular.cjs +3 -1
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +29 -17
- package/dist/components/angular.d.ts +29 -17
- package/dist/components/angular.js +7 -5
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.js +3 -3
- package/dist/components/cards.js +3 -3
- package/dist/components/click.js +3 -3
- package/dist/components/depth.js +4 -4
- package/dist/components/feedback.js +2 -2
- package/dist/components/gesture.js +5 -5
- package/dist/components/interaction.js +2 -2
- package/dist/components/jsx.d.cts +2 -1
- package/dist/components/jsx.d.ts +2 -1
- package/dist/components/layout.js +2 -2
- package/dist/components/lazy.cjs +2 -1
- package/dist/components/lazy.cjs.map +1 -1
- package/dist/components/lazy.d.cts +2 -1
- package/dist/components/lazy.d.ts +2 -1
- package/dist/components/lazy.js +2 -1
- package/dist/components/lazy.js.map +1 -1
- package/dist/components/packs.cjs +194 -0
- package/dist/components/packs.cjs.map +1 -0
- package/dist/components/packs.css +3 -0
- package/dist/components/packs.d.cts +107 -0
- package/dist/components/packs.d.ts +107 -0
- package/dist/components/packs.js +185 -0
- package/dist/components/packs.js.map +1 -0
- package/dist/components/page.js +3 -3
- package/dist/components/physics.js +4 -4
- package/dist/components/react.cjs +2 -2
- package/dist/components/react.cjs.map +1 -1
- package/dist/components/react.d.cts +1 -1
- package/dist/components/react.d.ts +1 -1
- package/dist/components/react.js +2 -2
- package/dist/components/react.js.map +1 -1
- package/dist/components/reveal.js +2 -2
- package/dist/components/solid.cjs +3 -1
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +29 -17
- package/dist/components/solid.d.ts +29 -17
- package/dist/components/solid.js +7 -5
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +3 -1
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +29 -17
- package/dist/components/svelte.d.ts +29 -17
- package/dist/components/svelte.js +7 -5
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.js +2 -2
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.cjs +6 -219
- package/dist/components/timeline.cjs.map +1 -1
- package/dist/components/timeline.js +5 -217
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/transitions.cjs +7 -120
- package/dist/components/transitions.cjs.map +1 -1
- package/dist/components/transitions.css +0 -1
- package/dist/components/transitions.d.cts +5 -32
- package/dist/components/transitions.d.ts +5 -32
- package/dist/components/transitions.js +10 -121
- package/dist/components/transitions.js.map +1 -1
- package/dist/components/ui.js +5 -5
- package/dist/components/vue.cjs +3 -1
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +29 -17
- package/dist/components/vue.d.ts +29 -17
- package/dist/components/vue.js +7 -5
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.js +2 -2
- package/dist/components.cjs +18 -10
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.d.cts +67 -33
- package/dist/components.d.ts +67 -33
- package/dist/components.js +14 -10
- 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 +5 -102
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +72 -30
- package/dist/index.d.ts +72 -30
- package/dist/index.js +4 -103
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/docs/API.md +6 -6
- package/docs/ROADMAP.md +14 -0
- package/docs/components.md +16 -4
- package/docs/migration-from-aos.md +1 -1
- package/docs/migration-from-gsap-scrolltrigger.md +6 -6
- package/docs/upgrading-4.md +65 -0
- package/package.json +13 -2
- package/dist/chunks/index-tags-BANJ-e4H.js.map +0 -1
- package/dist/chunks/index-tags-wbuPiMR6.cjs.map +0 -1
|
@@ -622,19 +622,6 @@ interface UsaAccordionElement extends UsaElement {
|
|
|
622
622
|
toggleItem(details: HTMLDetailsElement, open?: boolean): Promise<void>;
|
|
623
623
|
}
|
|
624
624
|
|
|
625
|
-
/**
|
|
626
|
-
* `<usa-flip-list>` — animates its children to their new places whenever
|
|
627
|
-
* they are added, removed or reordered (FLIP: transforms only). Works with
|
|
628
|
-
* any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
|
|
629
|
-
*
|
|
630
|
-
* Attributes: `duration` (ms, 420), `easing`, `disabled`.
|
|
631
|
-
* Method: `flip(mutate)` for explicit changes (also measures resizes).
|
|
632
|
-
* Reduced motion: no animation.
|
|
633
|
-
*/
|
|
634
|
-
interface UsaFlipListElement extends UsaElement {
|
|
635
|
-
flip(mutate: () => void | Promise<void>): Promise<void>;
|
|
636
|
-
}
|
|
637
|
-
|
|
638
625
|
/**
|
|
639
626
|
* `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
|
|
640
627
|
* steps, app pages) and animates between them. Children are views; name
|
|
@@ -654,15 +641,15 @@ interface UsaViewSwitchElement extends UsaElement {
|
|
|
654
641
|
|
|
655
642
|
/**
|
|
656
643
|
* use-scroll-animate/components/transitions — view & layout transitions.
|
|
657
|
-
* `<usa-dialog>`, `<usa-accordion>`, `<usa-
|
|
658
|
-
* and the `viewTransition()
|
|
644
|
+
* `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
|
|
645
|
+
* and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
|
|
646
|
+
* `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
|
|
659
647
|
*/
|
|
660
648
|
|
|
661
649
|
declare global {
|
|
662
650
|
interface HTMLElementTagNameMap {
|
|
663
651
|
'usa-dialog': UsaDialogElement;
|
|
664
652
|
'usa-accordion': UsaAccordionElement;
|
|
665
|
-
'usa-flip-list': UsaFlipListElement;
|
|
666
653
|
'usa-view-switch': UsaViewSwitchElement;
|
|
667
654
|
}
|
|
668
655
|
}
|
|
@@ -1590,6 +1577,30 @@ declare global {
|
|
|
1590
1577
|
}
|
|
1591
1578
|
}
|
|
1592
1579
|
|
|
1580
|
+
/**
|
|
1581
|
+
* `<usa-pack name="ecommerce">` — applies an effect pack (`ecommerce` ·
|
|
1582
|
+
* `portfolio` · `dashboard` · `game` · `landing`) to its subtree:
|
|
1583
|
+
* descendants opt in with `data-role` (see `PACKS`). Re-applies when
|
|
1584
|
+
* `name` changes; undone on disconnect.
|
|
1585
|
+
*/
|
|
1586
|
+
interface UsaPackElement extends UsaElement {
|
|
1587
|
+
readonly roles: string[];
|
|
1588
|
+
}
|
|
1589
|
+
|
|
1590
|
+
/**
|
|
1591
|
+
* use-scroll-animate/components/packs — effect packs (v3.9).
|
|
1592
|
+
* Ready-made motion for e-commerce, portfolio, dashboard, game UI and
|
|
1593
|
+
* landing pages: mark elements with `data-role` and apply a pack with
|
|
1594
|
+
* `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
|
|
1595
|
+
* and `countUp()`.
|
|
1596
|
+
*/
|
|
1597
|
+
|
|
1598
|
+
declare global {
|
|
1599
|
+
interface HTMLElementTagNameMap {
|
|
1600
|
+
'usa-pack': UsaPackElement;
|
|
1601
|
+
}
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1593
1604
|
/** The component categories and their default tags. */
|
|
1594
1605
|
declare const COMPONENT_CATEGORIES: {
|
|
1595
1606
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
@@ -1597,7 +1608,7 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
1597
1608
|
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
|
|
1598
1609
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
1599
1610
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
1600
|
-
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-
|
|
1611
|
+
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
1601
1612
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
1602
1613
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
1603
1614
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
@@ -1609,6 +1620,7 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
1609
1620
|
readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
|
|
1610
1621
|
readonly depth: readonly ["usa-cube", "usa-depth"];
|
|
1611
1622
|
readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
|
|
1623
|
+
readonly packs: readonly ["usa-pack"];
|
|
1612
1624
|
};
|
|
1613
1625
|
type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
1614
1626
|
|
|
@@ -2,27 +2,29 @@ import { defineComponents } from '../components.js';
|
|
|
2
2
|
import { b as bindUsa } from '../chunks/bind-B_CTL6Qn.js';
|
|
3
3
|
export { u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
|
|
4
4
|
import './reveal.js';
|
|
5
|
-
import '../chunks/base-
|
|
5
|
+
import '../chunks/base-ZARFccur.js';
|
|
6
6
|
import './text.js';
|
|
7
7
|
import './interaction.js';
|
|
8
8
|
import './feedback.js';
|
|
9
9
|
import './background.js';
|
|
10
|
-
import '../chunks/variants-
|
|
10
|
+
import '../chunks/variants-DvnxvRCM.js';
|
|
11
11
|
import './transitions.js';
|
|
12
12
|
import './physics.js';
|
|
13
|
-
import '../chunks/spring-
|
|
13
|
+
import '../chunks/spring-E2ickYNI.js';
|
|
14
14
|
import './cards.js';
|
|
15
15
|
import './click.js';
|
|
16
16
|
import './ui.js';
|
|
17
17
|
import './page.js';
|
|
18
18
|
import './timeline.js';
|
|
19
|
+
import '../chunks/core-Co-6AL0h.js';
|
|
19
20
|
import './gesture.js';
|
|
20
|
-
import '../chunks/core-
|
|
21
|
+
import '../chunks/core-DKY-fVzR.js';
|
|
21
22
|
import './svg.js';
|
|
22
23
|
import './webgl.js';
|
|
23
24
|
import './depth.js';
|
|
24
25
|
import './layout.js';
|
|
25
|
-
import '
|
|
26
|
+
import './packs.js';
|
|
27
|
+
import '../chunks/index-tags-43Xtd01A.js';
|
|
26
28
|
|
|
27
29
|
/**
|
|
28
30
|
* use-scroll-animate/components/svelte — Svelte integration (v3.8).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svelte.js","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n * import { usa, defineUsa } from 'use-scroll-animate/components/svelte';\n * import { onMount } from 'svelte';\n * onMount(() => defineUsa(['click', 'ui']));\n * let on = false;\n * </script>\n * <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"svelte.js","sources":["../../src/components/frameworks/svelte.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/svelte — Svelte integration (v3.8).\n * Svelte (3, 4, 5) renders `<usa-*>` tags natively; `use:usa` sets\n * **properties** and `usa:*` listeners in one place, and `defineUsa()`\n * registers the elements on the client only (safe in SvelteKit SSR).\n *\n * ```svelte\n * <script>\n * import { usa, defineUsa } from 'use-scroll-animate/components/svelte';\n * import { onMount } from 'svelte';\n * onMount(() => defineUsa(['click', 'ui']));\n * let on = false;\n * </script>\n * <usa-toggle use:usa={{ props: { checked: on }, on: { change: (e) => (on = e.detail.checked) } }}></usa-toggle>\n * ```\n * Plain `on:usa:change` does not compile in Svelte 3/4 (colon); use the action or `onusa:change` in Svelte 5.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\nimport { bindUsa, type UsaBinding } from './bind';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** Svelte action: `use:usa={{ props, on }}`. */\nexport function usa(node: HTMLElement, binding: UsaBinding = {}): { update(b: UsaBinding): void; destroy(): void } {\n return bindUsa(node, binding);\n}\n\n/** Register the elements (all, or some categories) — call from `onMount` for SSR apps. */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;AAgBG;AAOH;SACgB,GAAG,CAAC,IAAiB,EAAE,UAAsB,EAAE,EAAA;AAC7D,IAAA,OAAO,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;AAC/B;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;;;;"}
|
package/dist/components/svg.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { a as configureComponents } from '../chunks/base-
|
|
1
|
+
import { d as clamp, m as motionScale, b as caf, p as prefersReducedMotion, n as now, r as raf, h as defineElement, i as EASE_OUT } from '../chunks/base-ZARFccur.js';
|
|
2
|
+
export { a as configureComponents } from '../chunks/base-ZARFccur.js';
|
|
3
3
|
|
|
4
4
|
const NUM = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
|
|
5
5
|
/** `true` when two path strings share the same commands (so their numbers can be interpolated). */
|
package/dist/components/text.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { h as defineElement, j as srText,
|
|
2
|
-
export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-
|
|
1
|
+
import { h as defineElement, j as srText, b as caf, n as now, r as raf, i as EASE_OUT, E as EASE_SPRING, d as clamp } from '../chunks/base-ZARFccur.js';
|
|
2
|
+
export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-ZARFccur.js';
|
|
3
3
|
|
|
4
4
|
var css$5 = "usa-typewriter{white-space:pre-wrap}usa-typewriter .usa-tw-caret{display:inline-block;width:var(--usa-caret-width,0.08em);height:1.05em;margin-left:0.06em;vertical-align:-0.12em;background:var(--usa-caret-color,currentColor);animation:usa-caret 1.06s steps(1) infinite}usa-typewriter[data-typing] .usa-tw-caret{animation:none}usa-typewriter[data-no-cursor] .usa-tw-caret{display:none}@keyframes usa-caret{50%{opacity:0}}@media (prefers-reduced-motion:reduce){usa-typewriter .usa-tw-caret,usa-shimmer-text{animation:none}}";
|
|
5
5
|
|
|
@@ -1,220 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var base = require('../chunks/base-CXx7jZ-o.cjs');
|
|
4
|
-
|
|
5
|
-
/** Keyframe presets usable by name in `to()` and `data-tl`. */
|
|
6
|
-
const TIMELINE_PRESETS = {
|
|
7
|
-
fade: [{ opacity: 0 }, { opacity: 1 }],
|
|
8
|
-
'fade-up': [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'none' }],
|
|
9
|
-
'fade-down': [{ opacity: 0, transform: 'translateY(-24px)' }, { opacity: 1, transform: 'none' }],
|
|
10
|
-
'fade-left': [{ opacity: 0, transform: 'translateX(24px)' }, { opacity: 1, transform: 'none' }],
|
|
11
|
-
'fade-right': [{ opacity: 0, transform: 'translateX(-24px)' }, { opacity: 1, transform: 'none' }],
|
|
12
|
-
scale: [{ opacity: 0, transform: 'scale(0.85)' }, { opacity: 1, transform: 'none' }],
|
|
13
|
-
blur: [{ opacity: 0, filter: 'blur(12px)' }, { opacity: 1, filter: 'blur(0)' }],
|
|
14
|
-
rotate: [{ opacity: 0, transform: 'rotate(-12deg) scale(0.9)' }, { opacity: 1, transform: 'none' }],
|
|
15
|
-
'clip-up': [{ clipPath: 'inset(100% 0 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
|
|
16
|
-
'clip-right': [{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],
|
|
17
|
-
};
|
|
18
|
-
/** Resolve a position against the previous step and labels (pure). */
|
|
19
|
-
function resolvePosition(pos, end, prevStart, labels = {}) {
|
|
20
|
-
if (pos === undefined || pos === '' || pos === '>')
|
|
21
|
-
return end;
|
|
22
|
-
if (typeof pos === 'number')
|
|
23
|
-
return Math.max(0, pos);
|
|
24
|
-
const s = String(pos).trim();
|
|
25
|
-
if (/^-?\d+(\.\d+)?$/.test(s))
|
|
26
|
-
return Math.max(0, Number(s));
|
|
27
|
-
const m = /^(<|>|[A-Za-z_][\w-]*)?\s*(?:([+-])=\s*(\d+(?:\.\d+)?))?$/.exec(s);
|
|
28
|
-
if (!m)
|
|
29
|
-
return end;
|
|
30
|
-
const base = m[1] === '<' ? prevStart : m[1] === '>' || !m[1] ? end : labels[m[1]] ?? end;
|
|
31
|
-
const delta = m[2] ? (m[2] === '-' ? -1 : 1) * Number(m[3]) : 0;
|
|
32
|
-
return Math.max(0, base + delta);
|
|
33
|
-
}
|
|
34
|
-
const toEls = (t) => typeof t === 'string' ? (typeof document === 'undefined' ? [] : Array.from(document.querySelectorAll(t))) : t instanceof Element ? [t] : Array.from(t);
|
|
35
|
-
/**
|
|
36
|
-
* Choreograph animations on one clock: chain, overlap, label, seek, reverse and
|
|
37
|
-
* scrub them with scroll. Built on WAAPI (paused animations driven by one
|
|
38
|
-
* playhead); without WAAPI or under reduced motion it jumps to the end state.
|
|
39
|
-
*
|
|
40
|
-
* @example
|
|
41
|
-
* const tl = timeline({ defaults: { duration: 500 } })
|
|
42
|
-
* .to('.title', 'fade-up')
|
|
43
|
-
* .label('cards')
|
|
44
|
-
* .to('.card', 'scale', { stagger: 80, at: '-=200' })
|
|
45
|
-
* .to('.cta', [{ opacity: 0 }, { opacity: 1 }], { at: 'cards+=400' });
|
|
46
|
-
* tl.play(); // or tl.scrub(document.querySelector('.hero'))
|
|
47
|
-
*/
|
|
48
|
-
function timeline(options = {}) {
|
|
49
|
-
const d = { duration: 600, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', stagger: 0, ...options.defaults };
|
|
50
|
-
const steps = [];
|
|
51
|
-
const cues = [];
|
|
52
|
-
const labels = {};
|
|
53
|
-
let end = 0;
|
|
54
|
-
let prevStart = 0;
|
|
55
|
-
let t = 0;
|
|
56
|
-
let frame = 0;
|
|
57
|
-
let dir = 1;
|
|
58
|
-
let settle;
|
|
59
|
-
let built = false;
|
|
60
|
-
const total = () => Math.max(end, ...cues.map((c) => c.at), 0);
|
|
61
|
-
const build = () => {
|
|
62
|
-
if (built)
|
|
63
|
-
return;
|
|
64
|
-
built = true;
|
|
65
|
-
for (const s of steps) {
|
|
66
|
-
if (typeof s.el.animate !== 'function') {
|
|
67
|
-
s.anim = null;
|
|
68
|
-
continue;
|
|
69
|
-
}
|
|
70
|
-
s.anim = s.el.animate(s.frames, { duration: s.duration, delay: s.start, easing: s.easing, fill: 'both' });
|
|
71
|
-
s.anim.pause();
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
const render = (to, from) => {
|
|
75
|
-
build();
|
|
76
|
-
t = base.clamp(to, 0, total());
|
|
77
|
-
for (const s of steps) {
|
|
78
|
-
if (s.anim)
|
|
79
|
-
s.anim.currentTime = t;
|
|
80
|
-
else
|
|
81
|
-
base.applyFrame(s.el, s.frames[t >= s.start ? s.frames.length - 1 : 0]);
|
|
82
|
-
}
|
|
83
|
-
for (const c of cues)
|
|
84
|
-
if ((from < c.at && t >= c.at) || (from > c.at && t <= c.at))
|
|
85
|
-
c.fn();
|
|
86
|
-
options.onUpdate?.(total() ? t / total() : 1);
|
|
87
|
-
};
|
|
88
|
-
const stop = () => {
|
|
89
|
-
if (frame)
|
|
90
|
-
base.caf(frame);
|
|
91
|
-
frame = 0;
|
|
92
|
-
};
|
|
93
|
-
const run = (direction) => {
|
|
94
|
-
stop();
|
|
95
|
-
settle?.();
|
|
96
|
-
dir = direction;
|
|
97
|
-
const target = dir > 0 ? total() : 0;
|
|
98
|
-
const k = base.motionScale();
|
|
99
|
-
if (base.prefersReducedMotion() || k === 0 || !total()) {
|
|
100
|
-
render(target, t);
|
|
101
|
-
options.onComplete?.();
|
|
102
|
-
return Promise.resolve();
|
|
103
|
-
}
|
|
104
|
-
const rate = (options.speed ?? 1) / k;
|
|
105
|
-
return new Promise((resolve) => {
|
|
106
|
-
settle = () => { settle = undefined; resolve(); };
|
|
107
|
-
let last = base.now();
|
|
108
|
-
const loop = () => {
|
|
109
|
-
const n = base.now();
|
|
110
|
-
const next = t + (n - last) * rate * dir;
|
|
111
|
-
last = n;
|
|
112
|
-
render(next, t);
|
|
113
|
-
if ((dir > 0 && t >= target) || (dir < 0 && t <= 0)) {
|
|
114
|
-
frame = 0;
|
|
115
|
-
options.onComplete?.();
|
|
116
|
-
settle?.();
|
|
117
|
-
return;
|
|
118
|
-
}
|
|
119
|
-
frame = base.raf(loop);
|
|
120
|
-
};
|
|
121
|
-
frame = base.raf(loop);
|
|
122
|
-
});
|
|
123
|
-
};
|
|
124
|
-
const api = {
|
|
125
|
-
get duration() { return total(); },
|
|
126
|
-
get labels() { return { ...labels }; },
|
|
127
|
-
get time() { return t; },
|
|
128
|
-
to(target, frames, o = {}) {
|
|
129
|
-
const kf = typeof frames === 'string' ? TIMELINE_PRESETS[frames] || TIMELINE_PRESETS.fade : frames;
|
|
130
|
-
const start = resolvePosition(o.at, end, prevStart, labels);
|
|
131
|
-
const duration = o.duration ?? d.duration;
|
|
132
|
-
const stagger = o.stagger ?? d.stagger;
|
|
133
|
-
let last = start;
|
|
134
|
-
toEls(target).forEach((el, i) => {
|
|
135
|
-
const s = start + i * stagger;
|
|
136
|
-
steps.push({ el, frames: kf, start: s, duration, easing: o.easing ?? d.easing });
|
|
137
|
-
last = Math.max(last, s + duration);
|
|
138
|
-
});
|
|
139
|
-
prevStart = start;
|
|
140
|
-
end = Math.max(end, last);
|
|
141
|
-
built = false;
|
|
142
|
-
steps.forEach((s) => s.anim?.cancel());
|
|
143
|
-
return api;
|
|
144
|
-
},
|
|
145
|
-
label(name, at) {
|
|
146
|
-
labels[name] = resolvePosition(at, end, prevStart, labels);
|
|
147
|
-
return api;
|
|
148
|
-
},
|
|
149
|
-
call(fn, at) {
|
|
150
|
-
cues.push({ fn, at: resolvePosition(at, end, prevStart, labels) });
|
|
151
|
-
return api;
|
|
152
|
-
},
|
|
153
|
-
play(from) {
|
|
154
|
-
if (from !== undefined)
|
|
155
|
-
render(resolvePosition(from, 0, 0, labels), t);
|
|
156
|
-
else if (t >= total())
|
|
157
|
-
render(0, -1);
|
|
158
|
-
return run(1);
|
|
159
|
-
},
|
|
160
|
-
reverse() {
|
|
161
|
-
return run(-1);
|
|
162
|
-
},
|
|
163
|
-
pause() {
|
|
164
|
-
stop();
|
|
165
|
-
return api;
|
|
166
|
-
},
|
|
167
|
-
seek(to) {
|
|
168
|
-
stop();
|
|
169
|
-
render(resolvePosition(to, 0, 0, labels), t);
|
|
170
|
-
return api;
|
|
171
|
-
},
|
|
172
|
-
progress(p) {
|
|
173
|
-
if (p !== undefined)
|
|
174
|
-
api.seek(base.clamp(p, 0, 1) * total());
|
|
175
|
-
return total() ? t / total() : 0;
|
|
176
|
-
},
|
|
177
|
-
scrub(source, o = {}) {
|
|
178
|
-
stop();
|
|
179
|
-
if (base.prefersReducedMotion() || typeof window === 'undefined') {
|
|
180
|
-
render(total(), t);
|
|
181
|
-
return () => { };
|
|
182
|
-
}
|
|
183
|
-
let id = 0;
|
|
184
|
-
let cur = t;
|
|
185
|
-
const update = () => {
|
|
186
|
-
id = 0;
|
|
187
|
-
const r = source.getBoundingClientRect();
|
|
188
|
-
const vh = window.innerHeight || 1;
|
|
189
|
-
const p = base.clamp((vh + (o.offset ?? 0) - r.top) / (vh + r.height || 1), 0, 1);
|
|
190
|
-
const goal = p * total();
|
|
191
|
-
const sm = base.clamp(o.smooth ?? 0, 0, 0.95);
|
|
192
|
-
cur = sm ? cur + (goal - cur) * (1 - sm) : goal;
|
|
193
|
-
render(cur, t);
|
|
194
|
-
if (sm && Math.abs(goal - cur) > 0.5)
|
|
195
|
-
id = base.raf(update);
|
|
196
|
-
};
|
|
197
|
-
const onScroll = () => { if (!id)
|
|
198
|
-
id = base.raf(update); };
|
|
199
|
-
window.addEventListener('scroll', onScroll, { passive: true });
|
|
200
|
-
window.addEventListener('resize', onScroll, { passive: true });
|
|
201
|
-
update();
|
|
202
|
-
return () => {
|
|
203
|
-
window.removeEventListener('scroll', onScroll);
|
|
204
|
-
window.removeEventListener('resize', onScroll);
|
|
205
|
-
if (id)
|
|
206
|
-
base.caf(id);
|
|
207
|
-
};
|
|
208
|
-
},
|
|
209
|
-
cancel() {
|
|
210
|
-
stop();
|
|
211
|
-
settle?.();
|
|
212
|
-
steps.forEach((s) => s.anim?.cancel());
|
|
213
|
-
built = false;
|
|
214
|
-
},
|
|
215
|
-
};
|
|
216
|
-
return api;
|
|
217
|
-
}
|
|
4
|
+
var core = require('../chunks/core-DXqZm5Il.cjs');
|
|
218
5
|
|
|
219
6
|
var css = "usa-timeline{display:block}usa-timeline[scrub]{position:relative}@media (prefers-reduced-motion:reduce){usa-timeline [data-tl]{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}}";
|
|
220
7
|
|
|
@@ -241,12 +28,12 @@ function defineTimeline(tag = 'usa-timeline') {
|
|
|
241
28
|
}
|
|
242
29
|
mount() {
|
|
243
30
|
const overlap = this.num('overlap', 0);
|
|
244
|
-
const tl = (this._tl = timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));
|
|
31
|
+
const tl = (this._tl = core.timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));
|
|
245
32
|
this.querySelectorAll('[data-tl]').forEach((el, i) => {
|
|
246
33
|
if (el.dataset.label)
|
|
247
34
|
tl.label(el.dataset.label);
|
|
248
35
|
const name = el.dataset.tl || 'fade';
|
|
249
|
-
tl.to(el, TIMELINE_PRESETS[name] ? name : 'fade', {
|
|
36
|
+
tl.to(el, core.TIMELINE_PRESETS[name] ? name : 'fade', {
|
|
250
37
|
at: el.dataset.at ?? (i && overlap ? `-=${overlap}` : undefined),
|
|
251
38
|
duration: el.dataset.duration ? Number(el.dataset.duration) : undefined,
|
|
252
39
|
});
|
|
@@ -295,9 +82,9 @@ function defineTimelineComponents() {
|
|
|
295
82
|
|
|
296
83
|
exports.configureComponents = base.configureComponents;
|
|
297
84
|
exports.prefersReducedMotion = base.prefersReducedMotion;
|
|
298
|
-
exports.TIMELINE_PRESETS = TIMELINE_PRESETS;
|
|
85
|
+
exports.TIMELINE_PRESETS = core.TIMELINE_PRESETS;
|
|
86
|
+
exports.resolvePosition = core.resolvePosition;
|
|
87
|
+
exports.timeline = core.timeline;
|
|
299
88
|
exports.defineTimeline = defineTimeline;
|
|
300
89
|
exports.defineTimelineComponents = defineTimelineComponents;
|
|
301
|
-
exports.resolvePosition = resolvePosition;
|
|
302
|
-
exports.timeline = timeline;
|
|
303
90
|
//# sourceMappingURL=timeline.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline.cjs","sources":["../../src/components/timeline/core.ts","../../src/components/timeline/timeline-el.ts","../../src/components/timeline/index.ts"],"sourcesContent":["import { prefersReducedMotion, motionScale, applyFrame, raf, caf, now, clamp } from '../base';\n\n/**\n * Where a step starts on a timeline:\n * - a number: absolute time in ms\n * - `'>'` (default): when the previous step ends · `'<'`: when it starts\n * - `'+=200'` / `'-=200'`: after / overlapping the previous end\n * - `'<+=100'`: 100ms after the previous step's start\n * - `'intro'` / `'intro+=150'`: at (or relative to) a label\n */\nexport type TimelinePosition = number | string;\n\nexport interface TimelineStepOptions {\n /** Duration in ms (default: timeline default, 600). */\n duration?: number;\n /** CSS easing (default `cubic-bezier(0.22, 1, 0.36, 1)`). */\n easing?: string;\n /** Start position, see `TimelinePosition`. */\n at?: TimelinePosition;\n /** ms between targets when the selector matches several elements. */\n stagger?: number;\n}\n\nexport interface TimelineOptions {\n /** Defaults for every step. */\n defaults?: Pick<TimelineStepOptions, 'duration' | 'easing' | 'stagger'>;\n /** Playback rate (1 = normal). */\n speed?: number;\n /** Called after `play()` reaches the end (or the start when reversed). */\n onComplete?: () => void;\n /** Called on every frame with progress 0–1. */\n onUpdate?: (progress: number) => void;\n}\n\nexport interface ScrubOptions {\n /** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */\n offset?: number;\n /** Smoothing 0–1 (0 = immediate, default 0). */\n smooth?: number;\n}\n\nexport interface Timeline {\n /** Total length in ms. */\n readonly duration: number;\n /** Label positions in ms. */\n readonly labels: Readonly<Record<string, number>>;\n /** Current playhead in ms. */\n readonly time: number;\n /** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */\n to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;\n /** Name a position (default: the current end). */\n label(name: string, at?: TimelinePosition): Timeline;\n /** Run `fn` when the playhead passes `at`. */\n call(fn: () => void, at?: TimelinePosition): Timeline;\n /** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */\n play(from?: TimelinePosition): Promise<void>;\n /** Play backwards to 0. */\n reverse(): Promise<void>;\n pause(): Timeline;\n /** Jump to a time (ms) or label. */\n seek(to: TimelinePosition): Timeline;\n /** Get or set progress 0–1. */\n progress(p?: number): number;\n /** Tie progress to the scroll position of `source` (it moves through the viewport). Returns a stop function. */\n scrub(source: Element, options?: ScrubOptions): () => void;\n /** Stop and drop every animation (elements keep their last frame). */\n cancel(): void;\n}\n\n/** Keyframe presets usable by name in `to()` and `data-tl`. */\nexport const TIMELINE_PRESETS: Record<string, Keyframe[]> = {\n fade: [{ opacity: 0 }, { opacity: 1 }],\n 'fade-up': [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'none' }],\n 'fade-down': [{ opacity: 0, transform: 'translateY(-24px)' }, { opacity: 1, transform: 'none' }],\n 'fade-left': [{ opacity: 0, transform: 'translateX(24px)' }, { opacity: 1, transform: 'none' }],\n 'fade-right': [{ opacity: 0, transform: 'translateX(-24px)' }, { opacity: 1, transform: 'none' }],\n scale: [{ opacity: 0, transform: 'scale(0.85)' }, { opacity: 1, transform: 'none' }],\n blur: [{ opacity: 0, filter: 'blur(12px)' }, { opacity: 1, filter: 'blur(0)' }],\n rotate: [{ opacity: 0, transform: 'rotate(-12deg) scale(0.9)' }, { opacity: 1, transform: 'none' }],\n 'clip-up': [{ clipPath: 'inset(100% 0 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],\n 'clip-right': [{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0 0 0)' }],\n};\n\n/** Resolve a position against the previous step and labels (pure). */\nexport function resolvePosition(\n pos: TimelinePosition | undefined,\n end: number,\n prevStart: number,\n labels: Record<string, number> = {}\n): number {\n if (pos === undefined || pos === '' || pos === '>') return end;\n if (typeof pos === 'number') return Math.max(0, pos);\n const s = String(pos).trim();\n if (/^-?\\d+(\\.\\d+)?$/.test(s)) return Math.max(0, Number(s));\n const m = /^(<|>|[A-Za-z_][\\w-]*)?\\s*(?:([+-])=\\s*(\\d+(?:\\.\\d+)?))?$/.exec(s);\n if (!m) return end;\n const base = m[1] === '<' ? prevStart : m[1] === '>' || !m[1] ? end : labels[m[1]] ?? end;\n const delta = m[2] ? (m[2] === '-' ? -1 : 1) * Number(m[3]) : 0;\n return Math.max(0, base + delta);\n}\n\nconst toEls = (t: string | Element | Element[] | NodeList): Element[] =>\n typeof t === 'string' ? (typeof document === 'undefined' ? [] : Array.from(document.querySelectorAll(t))) : t instanceof Element ? [t] : Array.from(t as ArrayLike<Element>);\n\ninterface Step { el: Element; frames: Keyframe[]; start: number; duration: number; easing: string; anim?: Animation | null }\ninterface Cue { fn: () => void; at: number }\n\n/**\n * Choreograph animations on one clock: chain, overlap, label, seek, reverse and\n * scrub them with scroll. Built on WAAPI (paused animations driven by one\n * playhead); without WAAPI or under reduced motion it jumps to the end state.\n *\n * @example\n * const tl = timeline({ defaults: { duration: 500 } })\n * .to('.title', 'fade-up')\n * .label('cards')\n * .to('.card', 'scale', { stagger: 80, at: '-=200' })\n * .to('.cta', [{ opacity: 0 }, { opacity: 1 }], { at: 'cards+=400' });\n * tl.play(); // or tl.scrub(document.querySelector('.hero'))\n */\nexport function timeline(options: TimelineOptions = {}): Timeline {\n const d = { duration: 600, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', stagger: 0, ...options.defaults };\n const steps: Step[] = [];\n const cues: Cue[] = [];\n const labels: Record<string, number> = {};\n let end = 0;\n let prevStart = 0;\n let t = 0;\n let frame = 0;\n let dir = 1;\n let settle: (() => void) | undefined;\n let built = false;\n\n const total = () => Math.max(end, ...cues.map((c) => c.at), 0);\n const build = () => {\n if (built) return;\n built = true;\n for (const s of steps) {\n if (typeof (s.el as HTMLElement).animate !== 'function') { s.anim = null; continue; }\n s.anim = (s.el as HTMLElement).animate(s.frames, { duration: s.duration, delay: s.start, easing: s.easing, fill: 'both' });\n s.anim.pause();\n }\n };\n const render = (to: number, from: number) => {\n build();\n t = clamp(to, 0, total());\n for (const s of steps) {\n if (s.anim) s.anim.currentTime = t;\n else applyFrame(s.el as HTMLElement, s.frames[t >= s.start ? s.frames.length - 1 : 0]);\n }\n for (const c of cues) if ((from < c.at && t >= c.at) || (from > c.at && t <= c.at)) c.fn();\n options.onUpdate?.(total() ? t / total() : 1);\n };\n const stop = () => {\n if (frame) caf(frame);\n frame = 0;\n };\n const run = (direction: number): Promise<void> => {\n stop();\n settle?.();\n dir = direction;\n const target = dir > 0 ? total() : 0;\n const k = motionScale();\n if (prefersReducedMotion() || k === 0 || !total()) {\n render(target, t);\n options.onComplete?.();\n return Promise.resolve();\n }\n const rate = (options.speed ?? 1) / k;\n return new Promise<void>((resolve) => {\n settle = () => { settle = undefined; resolve(); };\n let last = now();\n const loop = () => {\n const n = now();\n const next = t + (n - last) * rate * dir;\n last = n;\n render(next, t);\n if ((dir > 0 && t >= target) || (dir < 0 && t <= 0)) {\n frame = 0;\n options.onComplete?.();\n settle?.();\n return;\n }\n frame = raf(loop);\n };\n frame = raf(loop);\n });\n };\n\n const api: Timeline = {\n get duration() { return total(); },\n get labels() { return { ...labels }; },\n get time() { return t; },\n to(target, frames, o = {}) {\n const kf = typeof frames === 'string' ? TIMELINE_PRESETS[frames] || TIMELINE_PRESETS.fade : frames;\n const start = resolvePosition(o.at, end, prevStart, labels);\n const duration = o.duration ?? d.duration;\n const stagger = o.stagger ?? d.stagger;\n let last = start;\n toEls(target).forEach((el, i) => {\n const s = start + i * stagger;\n steps.push({ el, frames: kf, start: s, duration, easing: o.easing ?? d.easing });\n last = Math.max(last, s + duration);\n });\n prevStart = start;\n end = Math.max(end, last);\n built = false;\n steps.forEach((s) => s.anim?.cancel());\n return api;\n },\n label(name, at) {\n labels[name] = resolvePosition(at, end, prevStart, labels);\n return api;\n },\n call(fn, at) {\n cues.push({ fn, at: resolvePosition(at, end, prevStart, labels) });\n return api;\n },\n play(from) {\n if (from !== undefined) render(resolvePosition(from, 0, 0, labels), t);\n else if (t >= total()) render(0, -1);\n return run(1);\n },\n reverse() {\n return run(-1);\n },\n pause() {\n stop();\n return api;\n },\n seek(to) {\n stop();\n render(resolvePosition(to, 0, 0, labels), t);\n return api;\n },\n progress(p) {\n if (p !== undefined) api.seek(clamp(p, 0, 1) * total());\n return total() ? t / total() : 0;\n },\n scrub(source, o = {}) {\n stop();\n if (prefersReducedMotion() || typeof window === 'undefined') {\n render(total(), t);\n return () => {};\n }\n let id = 0;\n let cur = t;\n const update = () => {\n id = 0;\n const r = source.getBoundingClientRect();\n const vh = window.innerHeight || 1;\n const p = clamp((vh + (o.offset ?? 0) - r.top) / (vh + r.height || 1), 0, 1);\n const goal = p * total();\n const sm = clamp(o.smooth ?? 0, 0, 0.95);\n cur = sm ? cur + (goal - cur) * (1 - sm) : goal;\n render(cur, t);\n if (sm && Math.abs(goal - cur) > 0.5) id = raf(update);\n };\n const onScroll = () => { if (!id) id = raf(update); };\n window.addEventListener('scroll', onScroll, { passive: true });\n window.addEventListener('resize', onScroll, { passive: true });\n update();\n return () => {\n window.removeEventListener('scroll', onScroll);\n window.removeEventListener('resize', onScroll);\n if (id) caf(id);\n };\n },\n cancel() {\n stop();\n settle?.();\n steps.forEach((s) => s.anim?.cancel());\n built = false;\n },\n };\n return api;\n}\n","import { defineElement, type UsaElement } from '../base';\nimport { timeline, TIMELINE_PRESETS, type Timeline } from './core';\nimport css from './timeline.css?raw';\n\n/**\n * `<usa-timeline>` — declarative choreography. Every descendant with\n * `data-tl=\"<preset>\"` becomes a step, in document order; `data-at`\n * (`'-=200'`, `'<'`, `'label+=100'`, ms), `data-duration` and `data-label`\n * fine-tune it.\n *\n * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`\n * (progress follows scroll instead of playing), `overlap` (ms each step\n * overlaps the previous, default 0), `duration` (600), `stagger` (ms),\n * `repeat` (replay every time it enters the viewport). Methods: `play()`,\n * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.\n * Reduced motion: steps appear in their final state.\n */\nexport interface UsaTimelineElement extends UsaElement {\n readonly timeline: Timeline | null;\n play(): Promise<void>;\n reverse(): Promise<void>;\n seek(to: number | string): void;\n}\n\nexport function defineTimeline(tag = 'usa-timeline'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaTimeline extends Base {\n static get observedAttributes(): string[] {\n return ['scrub', 'trigger', 'overlap'];\n }\n private _tl: Timeline | null = null;\n\n get timeline(): Timeline | null {\n return this._tl;\n }\n\n play(): Promise<void> {\n return this._tl ? this._tl.play(0).then(() => void this.emit('complete')) : Promise.resolve();\n }\n\n reverse(): Promise<void> {\n return this._tl ? this._tl.reverse() : Promise.resolve();\n }\n\n seek(to: number | string): void {\n this._tl?.seek(to);\n }\n\n mount(): void {\n const overlap = this.num('overlap', 0);\n const tl = (this._tl = timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));\n this.querySelectorAll<HTMLElement>('[data-tl]').forEach((el, i) => {\n if (el.dataset.label) tl.label(el.dataset.label);\n const name = el.dataset.tl || 'fade';\n tl.to(el, TIMELINE_PRESETS[name] ? name : 'fade', {\n at: el.dataset.at ?? (i && overlap ? `-=${overlap}` : undefined),\n duration: el.dataset.duration ? Number(el.dataset.duration) : undefined,\n });\n });\n this.onCleanup(() => tl.cancel());\n if (this.reduced) {\n tl.seek(tl.duration);\n return;\n }\n if (this.flag('scrub')) {\n this.onCleanup(tl.scrub(this, { smooth: 0.2 }));\n return;\n }\n tl.seek(0);\n const trigger = this.str('trigger', 'view');\n if (trigger === 'click') this.listen(this, 'click', () => void this.play());\n else if (trigger === 'view') {\n let played = false;\n this.inView((v) => {\n if (v && (!played || this.flag('repeat'))) {\n played = true;\n void this.play();\n } else if (!v && this.flag('repeat')) tl.seek(0);\n }, { threshold: 0.2 });\n }\n }\n\n unmount(): void {\n this._tl = null;\n }\n },\n { id: 'timeline', text: css }\n );\n}\n","/**\n * use-scroll-animate/components/timeline — choreography (v3.1).\n * `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs\n * WAAPI animations on one playhead; `<usa-timeline>` builds one from\n * `data-tl` children.\n */\nimport { defineTimeline, type UsaTimelineElement } from './timeline-el';\n\nexport { defineTimeline };\nexport { timeline, resolvePosition, TIMELINE_PRESETS } from './core';\nexport type { Timeline, TimelineOptions, TimelineStepOptions, TimelinePosition, ScrubOptions } from './core';\nexport type { UsaTimelineElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineTimelineComponents(): void {\n defineTimeline();\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'usa-timeline': UsaTimelineElement;\n }\n}\n"],"names":["clamp","applyFrame","caf","motionScale","prefersReducedMotion","now","raf","defineElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"timeline.cjs","sources":["../../src/components/timeline/timeline-el.ts","../../src/components/timeline/index.ts"],"sourcesContent":["import { defineElement, type UsaElement } from '../base';\nimport { timeline, TIMELINE_PRESETS, type Timeline } from './core';\nimport css from './timeline.css?raw';\n\n/**\n * `<usa-timeline>` — declarative choreography. Every descendant with\n * `data-tl=\"<preset>\"` becomes a step, in document order; `data-at`\n * (`'-=200'`, `'<'`, `'label+=100'`, ms), `data-duration` and `data-label`\n * fine-tune it.\n *\n * Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`\n * (progress follows scroll instead of playing), `overlap` (ms each step\n * overlaps the previous, default 0), `duration` (600), `stagger` (ms),\n * `repeat` (replay every time it enters the viewport). Methods: `play()`,\n * `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.\n * Reduced motion: steps appear in their final state.\n */\nexport interface UsaTimelineElement extends UsaElement {\n readonly timeline: Timeline | null;\n play(): Promise<void>;\n reverse(): Promise<void>;\n seek(to: number | string): void;\n}\n\nexport function defineTimeline(tag = 'usa-timeline'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaTimeline extends Base {\n static get observedAttributes(): string[] {\n return ['scrub', 'trigger', 'overlap'];\n }\n private _tl: Timeline | null = null;\n\n get timeline(): Timeline | null {\n return this._tl;\n }\n\n play(): Promise<void> {\n return this._tl ? this._tl.play(0).then(() => void this.emit('complete')) : Promise.resolve();\n }\n\n reverse(): Promise<void> {\n return this._tl ? this._tl.reverse() : Promise.resolve();\n }\n\n seek(to: number | string): void {\n this._tl?.seek(to);\n }\n\n mount(): void {\n const overlap = this.num('overlap', 0);\n const tl = (this._tl = timeline({ defaults: { duration: this.num('duration', 600), stagger: this.num('stagger', 0) } }));\n this.querySelectorAll<HTMLElement>('[data-tl]').forEach((el, i) => {\n if (el.dataset.label) tl.label(el.dataset.label);\n const name = el.dataset.tl || 'fade';\n tl.to(el, TIMELINE_PRESETS[name] ? name : 'fade', {\n at: el.dataset.at ?? (i && overlap ? `-=${overlap}` : undefined),\n duration: el.dataset.duration ? Number(el.dataset.duration) : undefined,\n });\n });\n this.onCleanup(() => tl.cancel());\n if (this.reduced) {\n tl.seek(tl.duration);\n return;\n }\n if (this.flag('scrub')) {\n this.onCleanup(tl.scrub(this, { smooth: 0.2 }));\n return;\n }\n tl.seek(0);\n const trigger = this.str('trigger', 'view');\n if (trigger === 'click') this.listen(this, 'click', () => void this.play());\n else if (trigger === 'view') {\n let played = false;\n this.inView((v) => {\n if (v && (!played || this.flag('repeat'))) {\n played = true;\n void this.play();\n } else if (!v && this.flag('repeat')) tl.seek(0);\n }, { threshold: 0.2 });\n }\n }\n\n unmount(): void {\n this._tl = null;\n }\n },\n { id: 'timeline', text: css }\n );\n}\n","/**\n * use-scroll-animate/components/timeline — choreography (v3.1).\n * `timeline()` chains, overlaps, labels, seeks, reverses and scroll-scrubs\n * WAAPI animations on one playhead; `<usa-timeline>` builds one from\n * `data-tl` children.\n */\nimport { defineTimeline, type UsaTimelineElement } from './timeline-el';\n\nexport { defineTimeline };\nexport { timeline, resolvePosition, TIMELINE_PRESETS } from './core';\nexport type { Timeline, TimelineOptions, TimelineStepOptions, TimelinePosition, ScrubOptions } from './core';\nexport type { UsaTimelineElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function defineTimelineComponents(): void {\n defineTimeline();\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'usa-timeline': UsaTimelineElement;\n }\n}\n"],"names":["defineElement","timeline","TIMELINE_PRESETS"],"mappings":"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"}
|