svg-scroll-draw 2.23.7 → 2.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +129 -5
- package/dist/angular/index.mjs +1 -1
- package/dist/astro/index.mjs +1 -1
- package/dist/chunk-22P4KBPG.mjs +1 -0
- package/dist/{chunk-XNM3VKEK.mjs → chunk-32ZCSGFZ.mjs} +1 -1
- package/dist/{chunk-VJ5ZU55P.mjs → chunk-7USW2XFB.mjs} +1 -1
- package/dist/{chunk-K6VATIJH.mjs → chunk-7XOFQCQE.mjs} +1 -1
- package/dist/{chunk-G6K54ZFI.mjs → chunk-BDXWPUBJ.mjs} +1 -1
- package/dist/{chunk-NYQJPPMP.mjs → chunk-BRV2B2YW.mjs} +1 -1
- package/dist/chunk-D2BHE4F2.mjs +1 -0
- package/dist/chunk-EBU6E26L.mjs +1 -0
- package/dist/{chunk-22B37AWY.mjs → chunk-NX74KN5X.mjs} +1 -1
- package/dist/{chunk-CZLUBJAI.mjs → chunk-QZKYGS74.mjs} +1 -1
- package/dist/{chunk-PAGN26EH.mjs → chunk-U5TKLHGW.mjs} +1 -1
- package/dist/chunk-WKOT2MND.mjs +1 -0
- package/dist/cinematic/index.mjs +1 -1
- package/dist/devtools/index.cjs +1 -1
- package/dist/devtools/index.mjs +1 -1
- package/dist/frames/index.cjs +1 -0
- package/dist/frames/index.d.mts +42 -0
- package/dist/frames/index.d.ts +42 -0
- package/dist/frames/index.mjs +1 -0
- package/dist/group/index.mjs +1 -1
- package/dist/horizontal/index.mjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/nuxt/index.cjs +3 -3
- package/dist/nuxt/index.d.mts +4 -2
- package/dist/nuxt/index.d.ts +4 -2
- package/dist/nuxt/index.mjs +1 -1
- package/dist/pin/index.mjs +1 -1
- package/dist/progress/index.mjs +1 -1
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.d.mts +17 -1
- package/dist/react/index.d.ts +17 -1
- package/dist/react/index.mjs +1 -1
- package/dist/reveal/index.mjs +1 -1
- package/dist/snap/index.mjs +1 -1
- package/dist/solid/index.mjs +1 -1
- package/dist/svelte/index.mjs +1 -1
- package/dist/text/index.mjs +1 -1
- package/dist/timeline/index.mjs +1 -1
- package/dist/video/index.mjs +1 -1
- package/dist/vue/index.cjs +3 -3
- package/dist/vue/index.d.mts +37 -1
- package/dist/vue/index.d.ts +37 -1
- package/dist/vue/index.mjs +1 -1
- package/dist/web-component/index.mjs +1 -1
- package/package.json +18 -2
- package/dist/chunk-BCV4RAIX.mjs +0 -1
- package/dist/chunk-OSGWGHQJ.mjs +0 -1
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
Each drop-in is tested side by side against the original in real browsers (AOS 2.3.4, which has had no release since; ScrollReveal 4.0.9, which is GPL-3.0 where this is MIT; vivus 0.4.6). `npx svg-scroll-draw migrate` makes the change across a project.
|
|
24
24
|
|
|
25
|
-
**And the rest of scroll animation.** Reveal, pin, snap, parallax, counters, video scrub and text splitting, each its own entry point, so you load only what you import. Works in React, Next.js, Vue, Svelte, Solid, Angular, Astro, Nuxt and vanilla JS. Plus [free in-browser tools](https://svg-scroll-draw.vercel.app/tools) — generators, editors and converters — that write the code for you.
|
|
25
|
+
**And the rest of scroll animation.** Reveal, pin, snap, parallax, counters, video and image-sequence scrub and text splitting, each its own entry point, so you load only what you import. Works in React, Next.js, Vue, Svelte, Solid, Angular, Astro, Nuxt and vanilla JS. Plus [free in-browser tools](https://svg-scroll-draw.vercel.app/tools) — generators, editors and converters — that write the code for you.
|
|
26
26
|
|
|
27
27
|
**[Live Demo](https://svg-scroll-draw.vercel.app)** · [npm](https://www.npmjs.com/package/svg-scroll-draw) · [Docs](https://svg-scroll-draw.vercel.app/docs) · [Examples](https://svg-scroll-draw.vercel.app/examples) · [Report a bug](https://github.com/DhruvilChauahan0210/ink-scroll/issues)
|
|
28
28
|
|
|
@@ -47,6 +47,7 @@ Each drop-in is tested side by side against the original in real browsers (AOS 2
|
|
|
47
47
|
| `scrollParallax` | `svg-scroll-draw` | Move any element at a different rate than scroll. Speed multiplier, reverse direction. |
|
|
48
48
|
| `scrollDraw` | `svg-scroll-draw` | The original — scroll-driven SVG path drawing via `stroke-dashoffset`. |
|
|
49
49
|
| `scrollVideo` | `svg-scroll-draw/video` | Tie `<video>.currentTime` to scroll. The Apple/Stripe product-page pattern. |
|
|
50
|
+
| `scrollFrames` | `svg-scroll-draw/frames` | Scrub an image sequence on a `<canvas>` with the scroll: the frame-by-frame version of the same pattern, for footage a video decoder cannot seek smoothly. |
|
|
50
51
|
| `scrollText` | `svg-scroll-draw/text` | Split text into chars/words/lines and stagger-animate each on scroll. 3.5 KB, nothing else to load. |
|
|
51
52
|
| `devtools` | `svg-scroll-draw/devtools` | Visual overlay showing every active animation's triggers and progress. Dev-only. |
|
|
52
53
|
| `AOS` | `svg-scroll-draw/aos` | Drop-in replacement for AOS: same `AOS.init()`, same `data-aos` markup, no `aos.css`. |
|
|
@@ -246,6 +247,127 @@ import { ScrollVideo } from 'svg-scroll-draw/react';
|
|
|
246
247
|
|
|
247
248
|
---
|
|
248
249
|
|
|
250
|
+
## scrollFrames — image-sequence scrubbing on a canvas
|
|
251
|
+
|
|
252
|
+
The product-page film drawn one still at a time: frame `round(progress × (count − 1))` of a numbered image sequence, painted on a `<canvas>` as you scroll. A video seeks to a keyframe and decodes forward, so a fast scrub stutters; a sequence of decoded images shows any frame at once, in every browser.
|
|
253
|
+
|
|
254
|
+
```js
|
|
255
|
+
import { scrollFrames } from 'svg-scroll-draw/frames';
|
|
256
|
+
|
|
257
|
+
// 120 frames: /film/0001.jpg … /film/0120.jpg
|
|
258
|
+
scrollFrames('#film', {
|
|
259
|
+
frames: (i) => `/film/${String(i + 1).padStart(4, '0')}.jpg`,
|
|
260
|
+
count: 120,
|
|
261
|
+
trigger: { start: 'top top', end: 'bottom top' },
|
|
262
|
+
});
|
|
263
|
+
|
|
264
|
+
// Or a list of URLs, and the whole picture inside the box
|
|
265
|
+
scrollFrames('#turntable', { frames: urls, fit: 'contain' });
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
```html
|
|
269
|
+
<!-- The library adds no ARIA: say what the film shows. -->
|
|
270
|
+
<canvas id="film" role="img" aria-label="The headphones turning to show the hinge" style="width:100%;height:100vh"></canvas>
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
Size the canvas with CSS. The library sets its drawing buffer to that box × `devicePixelRatio` (capped at 2) and redraws when the box changes size.
|
|
274
|
+
|
|
275
|
+
Frame 0 loads first, then the last frame, then the midpoints of every gap, coarse to fine, so a reader who scrolls fast has a frame near wherever they land early on; at most `concurrency` images load at once. Until the frame the scroll calls for arrives, the nearest loaded one shows, and the canvas redraws as closer ones come in. A frame that fails to load is skipped the same way, with one console warning naming its URL. The canvas is redrawn only when the frame to show changes, not on every animation frame.
|
|
276
|
+
|
|
277
|
+
Under `prefers-reduced-motion: reduce` only the last frame is loaded and drawn. Turned on mid-visit, the scrub stops on the last frame and nothing more is loaded. Only that frame exists then, so `seek()` and `replay()` do not change the picture.
|
|
278
|
+
|
|
279
|
+
Every frame stays decoded in memory for the life of the instance, at its full pixel size, so keep the budget modest: as few frames as the motion needs, each no larger than the canvas shows it (WebP or JPEG at the display size, not camera originals). A hundred 1920×1080 frames hold about 800 MB decoded.
|
|
280
|
+
|
|
281
|
+
If the canvas has no CSS size of its own (it takes its box from its `width` and `height` attributes), the library holds that box with an inline size or `aspect-ratio` the first time it writes the drawing buffer, so the buffer cannot resize the box it is measured from.
|
|
282
|
+
|
|
283
|
+
For the pinned-film pattern, put the canvas in a `position: sticky` stage and point `triggerElement` at the tall track around it, as with `scrollVideo`.
|
|
284
|
+
|
|
285
|
+
#### React
|
|
286
|
+
|
|
287
|
+
```tsx
|
|
288
|
+
'use client';
|
|
289
|
+
import { useRef } from 'react';
|
|
290
|
+
import { ScrollFrames } from 'svg-scroll-draw/react';
|
|
291
|
+
|
|
292
|
+
export function Film() {
|
|
293
|
+
const track = useRef<HTMLElement>(null);
|
|
294
|
+
return (
|
|
295
|
+
<section ref={track} style={{ height: '400vh' }}>
|
|
296
|
+
<div style={{ position: 'sticky', top: 0, height: '100vh' }}>
|
|
297
|
+
<ScrollFrames
|
|
298
|
+
frames={(i) => `/film/${String(i + 1).padStart(4, '0')}.jpg`}
|
|
299
|
+
count={120}
|
|
300
|
+
triggerElement={track}
|
|
301
|
+
trigger={{ start: 'top top', end: 'bottom bottom' }}
|
|
302
|
+
aria-label="The headphones turning"
|
|
303
|
+
style={{ width: '100%', height: '100%' }}
|
|
304
|
+
/>
|
|
305
|
+
</div>
|
|
306
|
+
</section>
|
|
307
|
+
);
|
|
308
|
+
}
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
`<ScrollFrames>` renders a `<canvas role="img">`. Every scrollFrames option is a prop, and `className`, `style`, `id`, `role`, `title` and `aria-*` / `data-*` go on the canvas. Pass an `aria-label` saying what the film shows (it warns in development without one, unless the canvas is `aria-hidden` or `role="presentation"`). `triggerElement` takes an element or a ref, read when the film starts, so the track can be an ancestor in the same component. The 'use client' line is only needed because `frames` is a function; the entry itself is marked `"use client"`.
|
|
312
|
+
|
|
313
|
+
The film is rebuilt only when an option that needs it changes: a `frames` function is compared by the URLs it gives, so an inline `frames={(i) => …}` re-created on every render keeps the film and its loaded images, and new URLs (or a new `count`, `fit`, `trigger`…) start a new one. Callbacks are read live: a new `onProgress` takes effect without a rebuild. A `style` prop leaves alone the inline size the library holds on a canvas sized by its attributes, as React writes only the style keys that changed.
|
|
314
|
+
|
|
315
|
+
#### Vue
|
|
316
|
+
|
|
317
|
+
```vue
|
|
318
|
+
<script setup>
|
|
319
|
+
import { ScrollFrames } from 'svg-scroll-draw/vue';
|
|
320
|
+
</script>
|
|
321
|
+
|
|
322
|
+
<template>
|
|
323
|
+
<section id="track" style="height: 400vh">
|
|
324
|
+
<div style="position: sticky; top: 0; height: 100vh">
|
|
325
|
+
<ScrollFrames
|
|
326
|
+
:frames="(i) => `/film/${String(i + 1).padStart(4, '0')}.jpg`"
|
|
327
|
+
:count="120"
|
|
328
|
+
trigger-element="#track"
|
|
329
|
+
:trigger="{ start: 'top top', end: 'bottom bottom' }"
|
|
330
|
+
aria-label="The headphones turning"
|
|
331
|
+
:style="{ width: '100%', height: '100%' }"
|
|
332
|
+
/>
|
|
333
|
+
</div>
|
|
334
|
+
</section>
|
|
335
|
+
</template>
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
The same component as React's, with the same rebuild and live-callback rules: every option is a prop, `class`, `style` and `aria-label` fall through to the `<canvas role="img">`, and `trigger-element` also takes a selector, looked up when the film starts. Pass a `style` that changes as an object: Vue rewrites a changed style string whole. The composable binds to a canvas of your own, its options a getter or a ref to keep them live:
|
|
339
|
+
|
|
340
|
+
```ts
|
|
341
|
+
import { useScrollFrames } from 'svg-scroll-draw/vue';
|
|
342
|
+
|
|
343
|
+
const film = useScrollFrames(() => ({ frames: (i) => `/film/${i + 1}.jpg`, count: count.value }));
|
|
344
|
+
// <canvas :ref="film" role="img" aria-label="The headphones turning" />
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
Nuxt exports both, and `createScrollDrawPlugin()` registers `<ScrollFrames>` globally.
|
|
348
|
+
|
|
349
|
+
#### scrollFrames options
|
|
350
|
+
|
|
351
|
+
| Option | Type | Default | Description |
|
|
352
|
+
|---|---|---|---|
|
|
353
|
+
| `frames` | `string[] \| (index: number) => string` | — | The image URLs in order, or a function from a 0-based index to a URL. Required |
|
|
354
|
+
| `count` | `number` | `frames.length` | How many frames. Required when `frames` is a function |
|
|
355
|
+
| `trigger` | `TriggerConfig` | `{ start: 'top top', end: 'bottom top' }` | — |
|
|
356
|
+
| `easing` | `string \| fn` | `"linear"` | — |
|
|
357
|
+
| `once` | `boolean` | `false` | Hold the furthest frame reached when scrolling back |
|
|
358
|
+
| `axis` | `"x" \| "y"` | `"y"` | — |
|
|
359
|
+
| `triggerElement` | `Element` | the canvas | Measure the trigger window from this element: the tall track behind a `position: sticky` stage |
|
|
360
|
+
| `fit` | `"cover" \| "contain"` | `"cover"` | How each frame fills the canvas: `cover` fills it and crops, `contain` shows the whole frame; both centred |
|
|
361
|
+
| `concurrency` | `number` | `6` | How many images load at once |
|
|
362
|
+
| `onReady` | `() => void` | — | The first frame is drawn |
|
|
363
|
+
| `onLoad` | `() => void` | — | Every frame has loaded or failed |
|
|
364
|
+
| `onProgress` | `(alpha: number, frame: number) => void` | — | Progress, and the index of the frame it calls for |
|
|
365
|
+
| `onComplete` | `() => void` | — | — |
|
|
366
|
+
|
|
367
|
+
It returns the same instance as every other API: `{ destroy, replay, pause, resume, seek, getProgress }`. `destroy()` stops the loads still in flight.
|
|
368
|
+
|
|
369
|
+
---
|
|
370
|
+
|
|
249
371
|
## scrollText — text reveal on scroll
|
|
250
372
|
|
|
251
373
|
A 3.5 KB alternative to GSAP SplitText. SplitText is free and 3.6 KB, but it only splits — animating the pieces needs GSAP core (27.7 KB) on top.
|
|
@@ -622,14 +744,15 @@ devtools.highlight('#my-element'); // outline for 2 seconds
|
|
|
622
744
|
| Import | Contents |
|
|
623
745
|
|---|---|
|
|
624
746
|
| `svg-scroll-draw` | `scrollDraw`, `scrollAnimate`, `scrollCounter`, `scrollParallax`, `PRESETS`, easing factories |
|
|
625
|
-
| `svg-scroll-draw/react` | `ScrollDraw`, `ScrollAnimate`, `ScrollCounter`, `ScrollVideo`, `ScrollText`, `useScrollDrawProgress` |
|
|
626
|
-
| `svg-scroll-draw/vue` | `ScrollDraw`, `useScrollDraw` · **v2:** `ScrollAnimate`, `ScrollCounter`, `ScrollVideo`, `ScrollText`, `useScrollAnimate`, `useScrollCounter`, `useScrollVideo`, `useScrollText` |
|
|
747
|
+
| `svg-scroll-draw/react` | `ScrollDraw`, `ScrollAnimate`, `ScrollCounter`, `ScrollVideo`, `ScrollFrames`, `ScrollText`, `useScrollDrawProgress` |
|
|
748
|
+
| `svg-scroll-draw/vue` | `ScrollDraw`, `useScrollDraw` · **v2:** `ScrollAnimate`, `ScrollCounter`, `ScrollVideo`, `ScrollFrames`, `ScrollText`, `useScrollAnimate`, `useScrollCounter`, `useScrollVideo`, `useScrollFrames`, `useScrollText` |
|
|
627
749
|
| `svg-scroll-draw/svelte` | `scrollDraw` action, `createScrollDraw` · **v2:** `scrollAnimate`, `scrollCounterAction`, `scrollVideoAction`, `scrollTextAction`, `createScrollAnimate`, `createScrollCounter`, `createScrollVideo`, `createScrollText` |
|
|
628
750
|
| `svg-scroll-draw/solid` | `useScrollDraw`, `createScrollDraw` · **v2:** `useScrollAnimate`, `useScrollCounter`, `useScrollVideo`, `useScrollText`, `createScrollAnimate`, `createScrollCounter`, `createScrollVideo`, `createScrollText` |
|
|
629
751
|
| `svg-scroll-draw/angular` | `ScrollDrawRef` · **v2:** `ScrollAnimateRef`, `ScrollCounterRef`, `ScrollVideoRef`, `ScrollTextRef` |
|
|
630
752
|
| `svg-scroll-draw/astro` | `initScrollDraw()` · **v2:** `initScrollAnimate()`, `initScrollCounter()`, `initScrollText()`, `initAll()` |
|
|
631
753
|
| `svg-scroll-draw/nuxt` | All Vue v1+v2 composables and components, `createScrollDrawPlugin()` |
|
|
632
754
|
| `svg-scroll-draw/video` | `scrollVideo` |
|
|
755
|
+
| `svg-scroll-draw/frames` | `scrollFrames` |
|
|
633
756
|
| `svg-scroll-draw/text` | `scrollText` |
|
|
634
757
|
| `svg-scroll-draw/group` | `scrollDrawGroup`, `scrollDrawSequence` · **v2:** `scrollAnimateGroup`, `scrollAnimateSequence`, `scrollParallaxGroup` |
|
|
635
758
|
| `svg-scroll-draw/timeline` | `scrollDrawTimeline` |
|
|
@@ -650,11 +773,12 @@ devtools.highlight('#my-element'); // outline for 2 seconds
|
|
|
650
773
|
| Entry | Gzipped |
|
|
651
774
|
|---|---|
|
|
652
775
|
| `svg-scroll-draw` (main, every core API) | 11.5 KB |
|
|
653
|
-
| `svg-scroll-draw/react` (includes the engine) |
|
|
654
|
-
| `svg-scroll-draw` + `svg-scroll-draw/react` (together; the engine ships once) |
|
|
776
|
+
| `svg-scroll-draw/react` (includes the engine) | 14.9 KB |
|
|
777
|
+
| `svg-scroll-draw` + `svg-scroll-draw/react` (together; the engine ships once) | 16.6 KB |
|
|
655
778
|
| `svg-scroll-draw/reveal` | 5.7 KB |
|
|
656
779
|
| `svg-scroll-draw/text` | 3.5 KB |
|
|
657
780
|
| `svg-scroll-draw/video` | 2.9 KB |
|
|
781
|
+
| `svg-scroll-draw/frames` | 4.0 KB |
|
|
658
782
|
| `svg-scroll-draw/scrollreveal` | 4.7 KB |
|
|
659
783
|
| `svg-scroll-draw/vivus` | 4.2 KB |
|
|
660
784
|
| `svg-scroll-draw/aos` (styles included) | 3.2 KB |
|
package/dist/angular/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {a,b}from'../chunk-XSVTHCLO.mjs';import {a as a$3}from'../chunk-
|
|
1
|
+
import {a,b}from'../chunk-XSVTHCLO.mjs';import {a as a$3}from'../chunk-BRV2B2YW.mjs';import {a as a$4}from'../chunk-32ZCSGFZ.mjs';import {a as a$2}from'../chunk-U5TKLHGW.mjs';import {a as a$1}from'../chunk-7USW2XFB.mjs';import {b as b$1}from'../chunk-7XOFQCQE.mjs';import'../chunk-V3Z6G5JE.mjs';import'../chunk-UPWWULKI.mjs';import'../chunk-XC5NR2MU.mjs';import'../chunk-2PYLM3E7.mjs';import'../chunk-NV6YTPHI.mjs';import'../chunk-THPTANES.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-5PJEKEEP.mjs';import'../chunk-EBU6E26L.mjs';import'../chunk-LFSU6LR3.mjs';var r=class{constructor(t){this.create=t;this.instance=null;this.el=null;this.key="";}init(t,e){return this.destroy(),this.el=t,this.latest=e,this.key=a(e),this.instance=this.create(t,b(e,()=>this.latest)),this}update(t){return this.el?a(t)!==this.key?this.init(this.el,t):(this.latest=t,this):this}replay(){return this.instance?.replay(),this}pause(){return this.instance?.pause(),this}resume(){return this.instance?.resume(),this}seek(t){return this.instance?.seek(t),this}getProgress(){return this.instance?.getProgress()??0}destroy(){return this.instance?.destroy(),this.instance=this.el=null,this}},u=class extends r{constructor(){super(b$1);}init(t,e={}){return super.init(t,e)}},h=class extends r{constructor(){super(a$1);}},m=class extends r{constructor(){super(a$2);}},O=class extends r{constructor(){super(a$3);}init(t,e={}){return super.init(t,e)}},d=class extends r{constructor(){super(a$4);}init(t,e={}){return super.init(t,e)}};export{r as EngineRef,h as ScrollAnimateRef,m as ScrollCounterRef,u as ScrollDrawRef,d as ScrollTextRef,O as ScrollVideoRef};
|
package/dist/astro/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{a as scrollDraw}from'../chunk-
|
|
1
|
+
export{a as scrollDraw}from'../chunk-NX74KN5X.mjs';import {a as a$2}from'../chunk-32ZCSGFZ.mjs';import {a as a$1}from'../chunk-U5TKLHGW.mjs';import {a}from'../chunk-7USW2XFB.mjs';import {b}from'../chunk-7XOFQCQE.mjs';import'../chunk-V3Z6G5JE.mjs';import'../chunk-UPWWULKI.mjs';import'../chunk-XC5NR2MU.mjs';import'../chunk-2PYLM3E7.mjs';import'../chunk-NV6YTPHI.mjs';import'../chunk-THPTANES.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-5PJEKEEP.mjs';import'../chunk-EBU6E26L.mjs';import {b as b$1}from'../chunk-LFSU6LR3.mjs';function i(){return typeof document>"u"?null:document}var p=new WeakMap,g;function c(r,t,n,o){let l=p.get(r)??new Map;p.set(r,l);let f=()=>{let e=n(),s=l.get(t);s&&s.key===e||(s?.inst.destroy(),l.set(t,{inst:o(e),key:e,build:f,users:s?.users??0}));};f(),l.get(t).users++;let S=true;typeof MutationObserver<"u"&&(g??(g=new MutationObserver(e=>e.forEach(s=>p.get(s.target)?.forEach(O=>O.build())))),g.observe(r,{attributes:true,attributeFilter:["draw","animate","counter","text"].map(e=>`data-scroll-${e}-options`).concat("data-scroll-drawoptions")}));let a=()=>l.get(t)?.inst;return {destroy:()=>{let e=l.get(t);!S||!e||(S=false,!(--e.users>0)&&(e.inst.destroy(),l.delete(t)));},replay:()=>a()?.replay(),pause:()=>a()?.pause(),resume:()=>a()?.resume(),seek:e=>a()?.seek(e),getProgress:()=>a()?.getProgress()??0,refresh:()=>a()?.refresh?.()}}function u(r,t){try{return r?JSON.parse(r):t}catch{return t}}function E(r=i()){return r?Array.from(r.querySelectorAll("[data-scroll-draw]")).map(t=>c(t,"draw",()=>t.dataset.scrollDrawOptions??t.dataset.scrollDrawoptions??"",n=>b(t,u(n,{})))):[]}function A(r=i()){return r?Array.from(r.querySelectorAll("[data-scroll-animate]")).map(t=>c(t,"animate",()=>t.dataset.scrollAnimateOptions??"",n=>a(t,u(n,{props:{}})))):[]}function I(r=i()){return r?Array.from(r.querySelectorAll("[data-scroll-counter]")).map(t=>c(t,"counter",()=>t.dataset.scrollCounterOptions??"",n=>{let o=u(n,{});return !o.to&&o.to!==0&&(b$1('initScrollCounter: element missing "to" in options JSON:',t),o.to=0),typeof o.format!="function"&&o.format!==void 0&&(b$1('initScrollCounter: "format" must be a function, so it cannot come from JSON; use "decimals":',t),delete o.format),a$1(t,o)})):[]}function M(r=i()){return r?Array.from(r.querySelectorAll("[data-scroll-text]")).map(t=>c(t,"text",()=>t.dataset.scrollTextOptions??"",n=>a$2(t,u(n,{})))):[]}function H(r=i()){return {draw:E(r),animate:A(r),counter:I(r),text:M(r)}}export{H as initAll,A as initScrollAnimate,I as initScrollCounter,E as initScrollDraw,M as initScrollText};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {a}from'./chunk-XSVTHCLO.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var u=1e4;function h(t){let{frames:r,count:n}=t;if(typeof r!="function")return a(t);let a$1=Number.isFinite(n)?Math.min(Math.max(Math.floor(n),0),u):0,e;try{e=Array.from({length:a$1},(f,l)=>r(l));}catch{e=["throws"];}return a({...t,frames:e})}function c(t){if(!t||t.getAttribute("aria-hidden")==="true")return;let r=t.getAttribute("role");r==="presentation"||r==="none"||t.getAttribute("aria-label")||t.getAttribute("aria-labelledby")||b('<ScrollFrames>: the canvas has no aria-label. Say what the frames show, or set aria-hidden="true" if they are decoration.',t);}export{h as a,c as b};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,e,c,b as b$2}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$3}from'./chunk-4DOJSIEQ.mjs';import {a as a$2,b as b$1}from'./chunk-
|
|
1
|
+
import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,e,c,b as b$2}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$3}from'./chunk-4DOJSIEQ.mjs';import {a as a$2,b as b$1}from'./chunk-EBU6E26L.mjs';import {b}from'./chunk-LFSU6LR3.mjs';function G(e,o){let t=document.createElement("span");t.textContent=o,t.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;user-select:none",e.appendChild(t);}function S(e=""){let o=document.createElement("span");return o.setAttribute("aria-hidden","true"),o.textContent=e,o}function W(e){let o=e.textContent??"";return e.textContent="",o.split(/(\s+)/).filter(Boolean).map(t=>{let n=e.appendChild(S(t)),i=/^\s+$/.test(t);return i?n.style.whiteSpace="pre":n.style.display="inline-block",i?null:n}).filter(t=>t!==null)}function X(e){let o=e.textContent??"";e.textContent="";let t=[],n=null;for(let i of o){let r=S(i),s=i===" ";s?r.style.whiteSpace="pre":(r.style.display="inline-block",t.push(r)),s||i>"\u0DFF"?n=null:n||(n=e.appendChild(S()),n.style.cssText="display:inline-block;white-space:nowrap"),(n??e).appendChild(r);}return t}function R(e){let o=W(e),t=new Map;for(let r of o){let s=r.offsetTop;t.has(s)||t.set(s,[]),t.get(s).push(r);}let n=[],i=Array.from(t.keys()).sort((r,s)=>r-s);for(let r of i){let s=t.get(r),p=S();p.style.display="inline-block",s.forEach((d,m)=>{let f=d.nextElementSibling;p.appendChild(d),m<s.length-1&&f&&f.style.whiteSpace==="pre"&&p.appendChild(f);}),n.push(p);}return e.textContent="",n.forEach((r,s)=>{e.appendChild(r),s<n.length-1&&e.appendChild(document.createTextNode(" "));}),n}function J(e,o,t,n){if(t<=1||n===0)return e;n=Math.min(n,1/t);let i=(t-1)*n,r=o*n,s=r+(1-i);return s<=r?e>=r?1:0:a$3((e-r)/(s-r),0,1)}function K(e,o){let t=[];if(o?.y!==void 0&&t.push(`translateY(${o.y*(1-e)}px)`),o?.x!==void 0&&t.push(`translateX(${o.x*(1-e)}px)`),o?.rotate!==void 0&&t.push(`rotate(${o.rotate*(1-e)}deg)`),o?.scale!==void 0){let n=o.scale+(1-o.scale)*e;t.push(`scale(${n})`);}return t.join(" ")}var v={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function se(e,o={}){if(typeof window>"u")return v;let t=typeof e=="string"?document.querySelector(e):e;if(!t)return b("scrollText: element not found:",e),v;let n=t;return a(o,(i,r)=>Q(n,i,r))}function Q(e$1,o,t){let{split:n="words",stagger:i=.04,easing:r="ease-out",from:s={opacity:0,y:24},trigger:p={},once:d$1=true,onComplete:m}=o,f=typeof r=="function"?r:d[r]??d["ease-out"],_=a$1(p.start||"top 85%"),j=a$1(p.end||"top 40%"),b=e$1.innerHTML,I=e$1.textContent??"",a;n==="chars"?a=X(e$1):n==="lines"?a=R(e$1):a=W(e$1),G(e$1,I);let q=a.length;function z(l,T){s?.opacity!==void 0&&(l.style.opacity=String(s.opacity+(1-s.opacity)*T));let x=K(T,s);x&&(l.style.transform=x);}function c$1(l){e$1.style.setProperty("--scroll-draw-progress",String(l)),a.forEach((T,x)=>{let U=f(J(l,x,q,i));z(T,U);});}if(t)return c$1(1),m?.(),{...v,destroy:()=>{e$1.innerHTML=b;},getProgress:()=>1};c$1(0);let w=0,E=0,g=-1,u=0,h=false;function P(){({tStart:w,tEnd:E}=c(e$1.getBoundingClientRect(),window.scrollY,window.innerHeight,_,j));}let C=()=>b$2(window.scrollY,w,E,1);function F(){let l=d$1?g=Math.max(g,C()):C();u=l,c$1(l),l>=1&&!h?(h=true,m?.()):l<1&&!d$1&&(h=false);}P();let y=e(window,[e$1],C,F,()=>{n==="lines"&&(e$1.innerHTML=b,a=R(e$1),G(e$1,I),c$1(u)),P();});a$2(e$1,{type:"text",getProgress:()=>u,getTrigger:()=>({tStart:w,tEnd:E})});let k=()=>y.hold(false);return {destroy(){y.off(),e$1.innerHTML=b,b$1(e$1);},replay(){g=-1,h=false,u=0,c$1(0),k();},pause:()=>y.hold(true),resume:k,seek(l){y.hold(true),c$1(u=g=a$3(l,0,1));},getProgress(){return u}}}export{se as a};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {b,a as a$4}from'./chunk-V3Z6G5JE.mjs';import {a as a$3}from'./chunk-UPWWULKI.mjs';import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,e,b as b$1,c}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$2,b as b$3}from'./chunk-
|
|
1
|
+
import {b,a as a$4}from'./chunk-V3Z6G5JE.mjs';import {a as a$3}from'./chunk-UPWWULKI.mjs';import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,e,b as b$1,c}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$2,b as b$3}from'./chunk-EBU6E26L.mjs';import {b as b$2}from'./chunk-LFSU6LR3.mjs';function wt(t){return t.startsWith("#")||t.startsWith("rgb")||t.startsWith("hsl")}function ut(t){let i=[],l=/([\w]+)\(([^)]*)\)/g,s;for(;(s=l.exec(t))!==null;){let m=[],r=[],c=s[2].trim();if(c)for(let u of c.split(/[\s,]+/)){let o=u.match(/^([-+]?[\d.eE]+)(.*)$/);m.push(o?parseFloat(o[1]):0),r.push(o?o[2]:"");}i.push({fn:s[1],nums:m,units:r});}return i}function Mt(t,i,l){let s=ut(t),m=ut(i);return s.length===0||s.length!==m.length?l<1?t:i:s.map((r,c)=>{let u=m[c];return r.fn!==u.fn||r.nums.length!==u.nums.length?l<1?`${r.fn}(${r.nums.map((o,p)=>`${o}${r.units[p]}`).join(", ")})`:`${u.fn}(${u.nums.map((o,p)=>`${o}${u.units[p]}`).join(", ")})`:`${r.fn}(${r.nums.map((o,p)=>`${o+(u.nums[p]-o)*l}${r.units[p]}`).join(", ")})`}).join(" ")}function ft(t,i,l){if(typeof t=="number"&&typeof i=="number")return String(t+(i-t)*l);let s=String(t),m=String(i);if(wt(s))return a$4(s,m,l);if(s.includes("("))return Mt(s,m,l);let r=s.match(/^([-+]?[\d.]+)(.*)$/),c=m.match(/^([-+]?[\d.]+)(.*)$/);if(r&&c){let u=parseFloat(r[1]),o=parseFloat(c[1]);return `${u+(o-u)*l}${r[2]||c[2]}`}return l<1?s:m}function Lt(t){return t.replace(/([A-Z])/g,i=>`-${i.toLowerCase()}`)}var $t=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),At=0,pt="--scroll-draw-progress";function Ct(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var dt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Wt(t,i){return typeof window>"u"?dt:i.respectReducedMotion===false?gt(t,i,false):a(i,(l,s)=>gt(t,l,s))}function gt(t,i,l){let{props:s,trigger:m={},easing:r="ease-out",speed:c$1=1,once:u=false,axis:o="y",scrollContainer:p,native:yt=true,velocityScale:H=false,triggerElement:ht,onProgress:q,onComplete:F,onEnter:U,onLeave:X,onEnterBack:Y,onLeaveBack:Z}=i,x=typeof r=="function"?r:d[r]??d["ease-out"],J=a$1(m.start||"top bottom"),K=a$1(m.end||"bottom top"),N=ht??t,y=typeof p=="string"?document.querySelector(p):p??null,h=Object.entries(s).map(([e,n])=>({prop:Lt(e),from:Array.isArray(n)?n[0]:"",to:Array.isArray(n)?n[1]:n}));function Et(){let e=window.getComputedStyle(t);for(let n of h)n.from===""&&(n.from=e.getPropertyValue(n.prop).trim()||"0");}function bt(){for(let e of h)t.style.setProperty(e.prop,String(e.to));}let V=new Map;for(let e of [...h.map(n=>n.prop),pt])V.set(e,t.style.getPropertyValue(e));function O(){for(let[e,n]of V)n?t.style.setProperty(e,n):t.style.removeProperty(e);}if(l)return bt(),F?.(),{...dt,destroy:O,getProgress:()=>1};Et();let M=()=>y?o==="x"?y.scrollLeft:y.scrollTop:o==="x"?window.scrollX:window.scrollY,Q=()=>y?o==="x"?y.clientWidth:y.clientHeight:o==="x"?window.innerWidth:window.innerHeight,tt=typeof r=="string"?b(r):null;function St(){if(!yt||!Ct()||!tt||o!=="y"||y||N!==t||u||c$1!==1||q||F||U||X||Y||Z||H!==false||(m.start||"top bottom").trim()!=="top bottom"||(m.end||"bottom top").trim()!=="bottom top")return false;for(let e of h)if(!$t.has(e.prop))return false;return true}function vt(){let e=`ssd-a-${++At}`,n=h.map(a=>`${a.prop}:${a.from}`).join(";"),w=h.map(a=>`${a.prop}:${a.to}`).join(";"),b=document.createElement("style");b.setAttribute("data-ssd-animate",""),b.textContent=`@keyframes ${e}{from{${n}}to{${w}}}.${e}{animation-name:${e};animation-duration:auto;animation-timing-function:${tt};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(b),t.classList.add(e);let d=()=>{let a=t.getBoundingClientRect();return c({top:a.top,height:a.height},M(),Q(),J,K)};a$2(t,{type:"animate",getProgress:()=>f.getProgress(),getTrigger:d});let f={refresh(){},destroy(){t.classList.remove(e),b.remove(),t.style.animationPlayState="",O(),b$3(t);},replay(){t.classList.remove(e),t.offsetWidth,t.classList.add(e);},pause(){t.style.animationPlayState="paused";},resume(){t.style.animationPlayState="";},seek(a){let A=Math.min(1,Math.max(0,a));t.classList.remove(e);for(let I of h)t.style.setProperty(I.prop,ft(I.from,I.to,A));},getProgress(){let{tStart:a,tEnd:A}=d();return x(b$1(M(),a,A,c$1))}};return f}if(St())return vt();let g=0,E=0,T=false,W=-1,P=0,S=0,R=false,v=NaN,B=-1,et=0,L=N===t?h:[],nt=false;function rt(){let e=t.style,n=L.map(f=>e.getPropertyValue(f.prop)),w=e.transition;L.length&&(e.transition="none"),L.forEach(f=>e.setProperty(f.prop,V.get(f.prop)??""));let b=a$3(N,y,o);L.forEach((f,a)=>e.setProperty(f.prop,n[a])),L.length&&(t.offsetWidth,e.transition=w);let d=c(b,b.scroll,Q(),J,K);nt&&Math.abs(d.tStart-g)<1&&Math.abs(d.tEnd-E)<1||(nt=true,g=d.tStart,E=d.tEnd);}function k(e){t.style.setProperty(pt,String(e));for(let n of h)t.style.setProperty(n.prop,ft(n.from,n.to,e));q?.(e);}function Tt(e){if(isNaN(v)){v=e;return}v<=0&&e>0&&U?.(),v<1&&e>=1&&X?.(),v>=1&&e<1&&Y?.(),v>0&&e<=0&&Z?.(),v=e;}function Pt(){if(T)return;let e=performance.now(),n=M(),w=c$1;if(H!==false){let a=e-et,A=a>0?Math.abs(n-(B<0?n:B))/a:0;w=c$1*Math.max(.2,1+A*(typeof H=="number"?H:1)*.04);}B=n,et=e;let b=E===g?0:(n-g)/(E-g);Tt(b);let d=b$1(n,g,E,w),f=u?Math.max(W,x(P=Math.max(P,d))):x(d);S=f,k(f),f>=1&&!R?(R=true,F?.()):f<1&&!u&&(R=false);}let $=e(y??window,[N],()=>b$1(M(),g,E,Math.min(c$1,1)),Pt,rt);rt(),E===g&&b$2("scrollAnimate: zero-length trigger window, so it never animates. In a sticky stage, set triggerElement.",t),P=b$1(M(),g,E,c$1),S=x(P),k(S),a$2(t,{type:"animate",getProgress:()=>S,getTrigger:()=>({tStart:g,tEnd:E})});function ot(){T=true,$.hold(true);}return {destroy(){T=true,$.off(),O(),b$3(t);},replay(){W=-1,P=0,R=false,S=0,T=false,k(0),$.hold(false);},pause:ot,resume(){T&&(T=false,$.hold(false));},seek(e){let n=Math.min(1,Math.max(0,e));S=n,W=n,P=0,ot(),k(n);},getProgress(){return S},refresh:$.remeasure}}export{Wt as a};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {b as b$1,a as a$6}from'./chunk-V3Z6G5JE.mjs';import {a as a$2}from'./chunk-UPWWULKI.mjs';import {a as a$5}from'./chunk-XC5NR2MU.mjs';import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,e,c,b as b$3}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$4,b as b$2}from'./chunk-
|
|
1
|
+
import {b as b$1,a as a$6}from'./chunk-V3Z6G5JE.mjs';import {a as a$2}from'./chunk-UPWWULKI.mjs';import {a as a$5}from'./chunk-XC5NR2MU.mjs';import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,e,c,b as b$3}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$4,b as b$2}from'./chunk-EBU6E26L.mjs';import {b,a as a$3}from'./chunk-LFSU6LR3.mjs';var gt={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var Ct=0;function Ot(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function ht(r,p){let f="";try{f=getComputedStyle(r).getPropertyValue(p).trim();}catch{}return f||(r.getAttribute(p)??"").trim()}var vt=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function Nt(r){if(!a$3)return;let p=ht(r,"stroke");if(!p||p==="none"){b("Element has no stroke \u2014 path will not be visible.",r);return}let f=(r.getAttribute("fill")??"").trim();f&&!vt.has(f)&&!vt.has(ht(r,"fill"))&&b("Element has a fill \u2014 it may obscure the stroke animation.",r);}function Ft(r,p,f){let d=document.createElement("div");d.setAttribute("data-svg-scroll-draw-debug",""),d.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function k(){let F=f==="x"?window.scrollX:window.scrollY,x=r-F,M=p-F,H=f==="x";d.innerHTML=`
|
|
2
2
|
<div style="position:absolute;${H?`left:${x}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${x}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
|
|
3
3
|
<div style="position:absolute;${H?`left:${M}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${M}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(d),window.addEventListener("scroll",k,{passive:true}),k(),{el:d,destroy(){window.removeEventListener("scroll",k),d.remove();}}}var wt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,bt=/[MmLlHhVvCcSsQqTtAaZz]/g;function Ht(r,p,f){if(!a$3)return;let d=(r.match(bt)??[]).join("").toUpperCase(),k=(p.match(bt)??[]).join("").toUpperCase(),F=(r.match(wt)??[]).length,x=(p.match(wt)??[]).length;if(d!==k){b(`morphTo: command sequence differs (${d||"\u2205"} \u2192 ${k||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,f);return}F!==x&&b(`morphTo: coordinate count differs (${F} \u2192 ${x}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,f);}function It(r,p,f){let d=(p.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),k=0;return r.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,F=>{let x=parseFloat(F),M=d[k++]??x;return String(+(x+(M-x)*f).toFixed(4))})}function Zt(r,p={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:a(p,(f,d)=>Rt(r,f,d))}function Rt(r,p,f){let{preset:d$1,...k}=p,F=d$1?{...gt[d$1],...k}:k,{selector:x="path, polyline, line, polygon, rect, circle",speed:M=1,fade:H=false,easing:le="linear",trigger:he={},stagger:q=0,direction:u="forward",once:K=false,debug:Ve=false,axis:W="y",scrollContainer:ke,autoReverse:xe=false,delay:fe=0,strokeColor:B,strokeWidth:_,fillOpacity:j,waypoints:U,velocityScale:ce=false,threshold:Et=0,rootMargin:St="0px",repeat:ue=0,repeatDelay:We=0,morphTo:L,clip:Me,autoplay:ze=false,duration:Tt=1e3,native:$t=true,onProgress:me,onStart:ve,onComplete:we,onEnter:Ge,onLeave:qe,onEnterBack:Be,onLeaveBack:_e}=F,D=Me===true?"left":typeof Me=="string"?Me:false,z=typeof le=="function"?le:d[le]??d.linear,je=a$1(he.start||"top bottom"),Ue=a$1(he.end||"bottom top"),P=typeof ke=="string"?document.querySelector(ke):ke??null,ee=Array.isArray(B)?B[0]:null,te=Array.isArray(B)?B[1]:typeof B=="string"?B:null,X=Array.isArray(_)?_[0]:null,re=Array.isArray(_)?_[1]:typeof _=="number"?_:null,Y=Array.isArray(j)?j[0]:null,se=Array.isArray(j)?j[1]:typeof j=="number"?j:null;function ne(e){let t=e*100;switch(D){case "right":return `inset(0 0 0 ${100-t}%)`;case "top":return `inset(0 0 ${100-t}% 0)`;case "bottom":return `inset(${100-t}% 0 0 0)`;case "center":return `circle(${e*150}% at 50% 50%)`;default:return `inset(0 ${100-t}% 0 0)`}}let c$1=D?[]:Array.from(r.querySelectorAll(x)),S=[],C=[],w=0,O=0,be=q,Xe=0,Ye=0,A=false,I=false,R=0,Pe=-1,Ee=[],Se=-1,T=false,N=0,Q=0,Z,Le=false,De=null;function Qe(){De?.destroy(),De=null;}let J=new Set,Ze=NaN,oe=true,Te=-1,Je=performance.now(),ie=NaN;function $e(){return P?W==="x"?P.scrollLeft:P.scrollTop:W==="x"?window.scrollX:window.scrollY}function Ke(){return P?W==="x"?P.clientWidth:P.clientHeight:W==="x"?window.innerWidth:window.innerHeight}function et(){let e=a$2(r,P,W);return c(e,e.scroll,Ke(),je,Ue)}function At(){let e=O-w,t=c$1.length-1,s=P??document.documentElement,o=W==="x"?"Width":"Height";if(be=q,q>0&&t>0&&e>0){let y=s[`scroll${o}`]-s[`client${o}`]-1-w-e/M;y>=0&&(be=Math.min(q,y/(t*e)));}let m=Math.max(0,t)*be*e,b=e/Math.min(M,1);Xe=w+Math.min(0,m,b,m+b),Ye=w+Math.max(0,m,b,m+b);}function tt(){(({tStart:w,tEnd:O}=et())),At(),Ve&&a$3&&(Qe(),De=Ft(w,O,W));}function Ce(e,t=et){a$4(r,{type:"draw",getProgress:()=>e.getProgress(),getTrigger:t});let s=e.destroy;return e.destroy=()=>{s.call(e),b$2(r);},e}function rt(e,t){return K&&!xe?Math.max(Pe,z(Ee[e]=Math.max(Ee[e]??0,t))):z(t)}function kt(e,t){if(r.style.setProperty("--scroll-draw-progress",String(e)),D){let s=t==="reverse"?1-e:e;r.style.clipPath=ne(s);return}c$1.forEach((s,o)=>Oe(s,o,e,t));}function Oe(e,t,s,o){e.style.strokeDashoffset=o==="reverse"?`${S[t]*s}`:`${S[t]*(1-s)}`,H&&(e.style.opacity=o==="reverse"?`${1-s}`:`${s}`),ee&&te?e.style.stroke=a$6(ee,te,s):te&&(e.style.stroke=te),X!==null&&re!==null?e.style.strokeWidth=`${X+(re-X)*s}`:re!==null&&(e.style.strokeWidth=`${re}`),Y!==null&&se!==null?e.style.fillOpacity=`${Y+(se-Y)*s}`:se!==null&&(e.style.fillOpacity=`${se}`),L&&e.tagName.toLowerCase()==="path"&&C[t]&&e.setAttribute("d",It(C[t],L,s));}function Ne(){if(r.style.setProperty("--scroll-draw-progress","0"),D){r.style.clipPath=ne(u==="reverse"?1:0);return}c$1.forEach((e,t)=>{e.style.strokeDasharray=`${S[t]}`,e.style.strokeDashoffset=u==="reverse"?"0":`${S[t]}`,H?e.style.opacity=u==="reverse"?"1":"0":e.style.opacity="",ee&&(e.style.stroke=ee),X!==null&&(e.style.strokeWidth=`${X}`),Y!==null&&(e.style.fillOpacity=`${Y}`),L&&e.tagName.toLowerCase()==="path"&&C[t]&&e.setAttribute("d",C[t]);});}function pe(e,t){let s=e.getAttribute("d"),o=a$5(e);if(L&&C[t]){e.setAttribute("d",L);let m=a$5(e);e.setAttribute("d",C[t]),o=Math.max(a$5(e),m),e.setAttribute("d",s);}S[t]=o,e.style.strokeDasharray=`${o}`;}if(c$1.forEach((e,t)=>{Nt(e);let s=e.tagName.toLowerCase()==="path";s?C.push(e.getAttribute("d")??""):C.push(""),pe(e,t);let o=S[t];L&&(s?Ht(C[C.length-1],L,e):b(`morphTo only applies to <path> elements \u2014 ignored on <${e.tagName}>.`,e)),f?(e.style.strokeDashoffset=u==="reverse"?`${o}`:"0",H&&(e.style.opacity="1"),te&&(e.style.stroke=te),re!==null&&(e.style.strokeWidth=`${re}`),se!==null&&(e.style.fillOpacity=`${se}`),L&&e.tagName.toLowerCase()==="path"&&e.setAttribute("d",L)):(e.style.strokeDashoffset=u==="reverse"?"0":`${o}`,H?e.style.opacity=u==="reverse"?"1":"0":e.style.opacity="",ee&&(e.style.stroke=ee),X!==null&&(e.style.strokeWidth=`${X}`),Y!==null&&(e.style.fillOpacity=`${Y}`));}),f)return D&&(r.style.clipPath=ne(1)),we?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};D&&(r.style.clipPath=ne(u==="reverse"?1:0));let st=typeof le=="string"?b$1(le):null;function xt(){return !($t===false||ze||Ve&&a$3||!Ot()||!c$1.length||!st||D||W!=="y"||P||M!==1||q!==0||K||xe||ce!==false||L||U||ue||fe>0||me||ve||we||Ge||qe||Be||_e||B!=null||_!=null||j!=null||(he.start||"top bottom").trim()!=="top bottom"||(he.end||"bottom top").trim()!=="bottom top")}function Mt(){let e=++Ct,t=`svg-scroll-draw-${e}`,s=`svg-scroll-draw-host-${e}`,o=`--svg-scroll-draw-${e}`,m=u==="reverse"?"0":"var(--ssd-len)",b=u==="reverse"?"var(--ssd-len)":"0",y=`stroke-dashoffset:${m};`,a=`stroke-dashoffset:${b};`;H&&(y+=`opacity:${u==="reverse"?1:0};`,a+=`opacity:${u==="reverse"?0:1};`);let l=document.createElement("style");l.setAttribute("data-svg-scroll-draw",""),l.textContent=`@keyframes ${t}{from{${y}}to{${a}}}.${s}{view-timeline-name:${o};view-timeline-axis:block;}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${st};animation-fill-mode:both;animation-timeline:${o};animation-range:cover 0% cover 100%;}`,document.head.appendChild(l),r.classList.add(s);function v(n,i){n.style.setProperty("--ssd-len",String(S[i])),n.style.strokeDasharray=`${S[i]}`,n.style.strokeDashoffset="",n.style.opacity="",n.style.animationPlayState="",n.classList.add(t);}c$1.forEach(v);let g=false,E=-1;function $(){if(E>=0)return E;let n=r.getBoundingClientRect(),{tStart:i,tEnd:h}=c({top:n.top,height:n.height},$e(),Ke(),je,Ue);return z(b$3($e(),i,h,M))}return {destroy(){r.classList.remove(s),c$1.forEach(n=>{n.classList.remove(t),n.style.removeProperty("--ssd-len"),n.style.animationPlayState="";}),l.remove();},replay(){g=false,E=-1,c$1.forEach(v);},pause(){g=true,c$1.forEach(n=>{n.style.animationPlayState="paused";});},resume(){g&&(g=false,c$1.forEach(n=>{n.style.animationPlayState="running";}));},seek(n){let i=Math.min(1,Math.max(0,n));E=i,g=true,c$1.forEach((h,V)=>{h.classList.remove(t),h.style.strokeDashoffset=u==="reverse"?`${S[V]*i}`:`${S[V]*(1-i)}`,H&&(h.style.opacity=u==="reverse"?`${1-i}`:`${i}`);});},getProgress(){return $()},refresh(){c$1.forEach((n,i)=>{pe(n,i),n.style.setProperty("--ssd-len",String(S[i]));});}}}if(xt())return Ce(Mt());function Pt(){let e=Math.max(1,Tt),t=D?e:e*(1+Math.max(0,c$1.length-1)*q),s=0,o=0,m=false;function b(E){let $=true,n=Math.min(1,Math.max(0,E/t));if(D){let i=Math.min(1,Math.max(0,E/e)),h=z(i);N=h,r.style.setProperty("--scroll-draw-progress",String(h)),r.style.clipPath=ne(u==="reverse"?1-h:h),me?.(h),i<1&&($=false);}else {c$1.forEach((h,V)=>{let Dt=V*q*e,lt=Math.min(1,Math.max(0,(E-Dt)/e));Oe(h,V,z(lt),u),lt<1&&($=false);});let i=z(n);N=i,me?.(i),r.style.setProperty("--scroll-draw-progress",String(i));}if(U){let i=z(n);for(let h in U){let V=parseFloat(h);i>=V&&!J.has(V)&&(J.add(V),U[h]?.());}}return $}function y(E){if(T)return;let $=E-s;I||(I=true,ve?.());let n=b($);if(n&&!A){A=true,b(t),we?.(),Q<(ue==="infinite"?1/0:ue??0)&&(Q++,Z=setTimeout(()=>{s=performance.now(),I=false,A=false,J.clear(),Ne(),R=requestAnimationFrame(y);},We));return}n||(R=requestAnimationFrame(y));}function a(){cancelAnimationFrame(R),clearTimeout(Z),s=performance.now(),o=0,T=false,I=false,A=false,Q=0,m=true,N=0,J.clear(),Ne(),R=requestAnimationFrame(y);}let l=new IntersectionObserver(E=>{E.forEach($=>{$.isIntersecting&&!(K&&A)?a():!$.isIntersecting&&!K&&!A&&(cancelAnimationFrame(R),clearTimeout(Z),m=false);});},{root:P??null,threshold:Et,rootMargin:St}),v;function g(){clearTimeout(v),v=setTimeout(()=>c$1.forEach(pe),150);}return window.addEventListener("resize",g),window.addEventListener("orientationchange",g),fe>0?setTimeout(()=>l.observe(r),fe):l.observe(r),{destroy(){cancelAnimationFrame(R),clearTimeout(Z),l.disconnect(),window.removeEventListener("resize",g),window.removeEventListener("orientationchange",g),clearTimeout(v);},replay(){Q=0,a();},pause(){T||!m||(T=true,o=performance.now()-s,cancelAnimationFrame(R));},resume(){T&&(T=false,m=true,s=performance.now()-o,R=requestAnimationFrame(y));},seek(E){let $=Math.min(1,Math.max(0,E));N=$,T=true,o=$*t,s=performance.now()-o,cancelAnimationFrame(R),b(o);},getProgress(){return N},refresh(){clearTimeout(v),c$1.forEach(pe);}}}if(ze)return Ce(Pt());tt();let nt=()=>b$3($e(),Xe,Ye,1);function ot(){A=true,we?.(),Q<(ue==="infinite"?1/0:ue)&&(Q++,Z=setTimeout(()=>{Le=true;},We));}function it(){Pe=-1,Ee=[],I=false,A=false,Le=false,J.clear(),Ne(),oe=true;}function Lt(){let e=performance.now(),t=$e();if(Le&&nt()%1&&it(),!oe&&ce===false&&t===Ze)return;oe=false,Ze=t;let s=M;if(ce!==false){let a=e-Je,l=a>0?Math.abs(t-(Te<0?t:Te))/a:0;s=M*Math.max(.2,1+l*(typeof ce=="number"?ce:1)*.04);}Te=t,Je=e;let o=xe?Se===-1||t>=Se?"forward":"reverse":u;Se=t;let m=O-w,b=true,y=m===0?0:(t-w)/m;if(isNaN(ie)||(ie<=0&&y>0&&Ge?.(),ie<1&&y>=1&&qe?.(),ie>=1&&y<1&&Be?.(),ie>0&&y<=0&&_e?.()),ie=y,D){let a=rt(0,b$3(t,w,O,s));N=a,r.style.setProperty("--scroll-draw-progress",String(a));let l=o==="reverse"?1-a:a;r.style.clipPath=ne(l),me?.(a),!I&&b$3(t,w,O,s)>0&&(I=true,ve?.()),a>=1&&!A?ot():a<1&&!K&&(A=false);return}if(c$1.forEach((a,l)=>{let v=l*be*m,g=rt(l,b$3(t,w+v,O+v,s));Oe(a,l,g,o),l===0&&(N=g,me?.(g),r.style.setProperty("--scroll-draw-progress",String(g))),g<1&&(b=false);}),U){let a=z(b$3(t,w,O,s));for(let l in U){let v=parseFloat(l);a>=v&&!J.has(v)&&(J.add(v),U[l]?.());}}!I&&b$3(t,w,O,s)>0&&(I=true,ve?.()),b&&!A?ot():!b&&!K&&(A=false);}let de=e(P??window,[r],nt,Lt,()=>{let e=S.join();c$1.forEach(pe),tt(),oe=true,S.join()!==e&&ye();}),Fe=fe>0;function ye(){de.hold(T||Fe);}let at;return Fe&&(at=setTimeout(()=>{Fe=false,ye();},fe)),ye(),Ce({destroy(){clearTimeout(Z),clearTimeout(at),de.off(),Qe();},replay(){it(),Se=-1,Te=-1,Q=0,T=false,N=0,clearTimeout(Z),ye();},pause(){T=true,de.hold(true);},resume(){T&&(T=false,oe=true,ye());},seek(e){let t=Math.min(1,Math.max(0,e));N=t,Pe=t,Ee=[],T=true,de.hold(true),kt(t,u),oe=true;},getProgress(){return N},refresh:de.remeasure},()=>({tStart:w,tEnd:O}))}export{gt as a,Zt as b};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {e,b as b$2}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$1}from'./chunk-5PJEKEEP.mjs';import {a,b as b$1}from'./chunk-
|
|
1
|
+
import {e,b as b$2}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$1}from'./chunk-5PJEKEEP.mjs';import {a,b as b$1}from'./chunk-EBU6E26L.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var x="http://www.w3.org/2000/svg",G="cinematic-photo",D=a=>a<0?0:a>1?1:a;function u(a){let i=parseFloat(a);return Number.isFinite(i)?D(i/100):0}function L(a){return d[a]??d.linear}var P=a=>({destroy(){},getProgress:()=>a}),R=class{constructor(i){if(typeof document>"u"){this.mount=null;return}this.mount=typeof i.wrapper=="string"?document.querySelector(i.wrapper):i.wrapper,this.mount||b("Cinematic: wrapper not found:",i.wrapper);}loadStory(i){let s=this.mount;if(typeof window>"u"||!s)return P(0);s.style.position="relative",s.style.height=i.totalHeight,s.style.display="block";let l=document.createElement("div");l.setAttribute("data-cinematic-stage",""),l.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",s.appendChild(l);let f=[];for(let t of i.scenes){if(t.background){let e=document.createElement("img");e.id=G,e.src=t.background,e.alt="",e.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",l.appendChild(e);}let n=t.animations.filter(e=>e.type==="draw");if(n.length){let e=document.createElementNS(x,"svg");e.setAttribute("viewBox",`0 0 ${i.canvas.width} ${i.canvas.height}`),e.setAttribute("preserveAspectRatio","xMidYMid meet"),e.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",l.appendChild(e);for(let o of n){let r=document.createElementNS(x,"path");r.id=o.target.replace(/^#/,""),r.setAttribute("d",o.d),r.setAttribute("fill","none"),r.setAttribute("stroke",o.stroke),r.setAttribute("stroke-width",String(o.strokeWidth)),r.setAttribute("stroke-linecap","round"),r.setAttribute("stroke-linejoin","round");let h=o.length||r.getTotalLength?.()||0;r.style.strokeDasharray=String(h),r.style.strokeDashoffset=String(h),e.appendChild(r),f.push({kind:"draw",el:r,start:u(o.start),end:u(o.end),ease:L(o.easing),length:h});}}for(let e of t.animations){if(e.type!=="fade")continue;let o=l.querySelector(e.target)??document.querySelector(e.target);o&&(o.style.opacity=String(e.from),f.push({kind:"fade",el:o,start:u(e.start),end:u(e.end),ease:L("ease-in-out"),from:e.from,to:e.to}));}}let d=0,c=null;for(let t=s.parentElement;t?.parentElement;t=t.parentElement)if(/[ao]/.test(getComputedStyle(t).overflowY)&&t.scrollHeight>t.clientHeight&&(t!==document.body||/[aoh]/.test(getComputedStyle(t.parentElement).overflowY))){c=t;break}let m=0,p=0,b=()=>{let t=s.getBoundingClientRect().top;m=c?t-c.getBoundingClientRect().top-c.clientTop+c.scrollTop:t+window.scrollY,p=m+Math.max(0,s.offsetHeight-(c?c.clientHeight:window.innerHeight));},S=()=>{let t=c?c.scrollTop:window.scrollY;return p<=m?t>=m?1:0:b$2(t,m,p,1)},g=t=>{for(let n of f){let e=n.end-n.start,o=e<=0?t>=n.end?1:0:D((t-n.start)/e),r=n.ease(o);n.kind==="draw"?n.el.style.strokeDashoffset=String(n.length*(1-r)):n.el.style.opacity=String(n.from+(n.to-n.from)*r);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return g(1),P(1);let E=()=>{d=S(),g(d);};b(),E();let v=e(c||window,[s],S,E,b);a(s,{type:"draw",getProgress:()=>d,getTrigger:()=>({tStart:m,tEnd:p})});let k=a$1(t=>{t&&(k(),v.off(),b$1(s),d=1,g(1));});return {destroy(){k(),v.off(),b$1(s);},getProgress:()=>d}}};
|
|
2
2
|
export{R as a};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {a,e,c,b as b$2}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$1}from'./chunk-5PJEKEEP.mjs';import {a as a$2,b as b$1}from'./chunk-
|
|
1
|
+
import {a,e,c,b as b$2}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$1}from'./chunk-5PJEKEEP.mjs';import {a as a$2,b as b$1}from'./chunk-EBU6E26L.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var X={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function se(c$1,h={}){if(typeof window>"u")return X;let y=typeof c$1=="string"?document.querySelector(c$1):c$1;if(!y||y.tagName.toLowerCase()!=="video")return b("scrollVideo: <video> element not found:",c$1),X;let t=y,{trigger:C={},easing:v="linear",once:V=false,axis:u="y",preload:Y="auto",triggerElement:j,onReady:L,onComplete:J,onProgress:K}=h,R=j??t,a$3=window.matchMedia("(prefers-reduced-motion: reduce)").matches,z=typeof v=="function"?v:d[v]??d.linear,Q=a(C.start||"top top"),U=a(C.end||"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=Y);let A=h.from??0,b$3=h.to,m=0,f=0,r=false,E=-1,g=0,n=0,p=false,i=false,I=()=>u==="x"?window.scrollX:window.scrollY,Z=()=>u==="x"?window.innerWidth:window.innerHeight;function S(){let e=R.getBoundingClientRect(),o=u==="x"?e.left:e.top,d=u==="x"?e.width:e.height,H=c({top:o,height:d},I(),Z(),Q,U);m=H.tStart,f=H.tEnd,i&&f===m&&b("scrollVideo: zero-length trigger window, so it never scrubs. In a sticky stage, set triggerElement.",t);}let w=NaN;function s(e){if(!i)return;let o=b$3??t.duration??0,d=A+(o-A)*e;d!==w&&(w=d,t.currentTime=d),t.style.setProperty("--scroll-draw-progress",String(e)),K?.(e);}let O=()=>b$2(I(),m,f,1);function $(){if(!i||a$3)return;let e=O(),o=V?Math.max(E,z(g=Math.max(g,e))):z(e);n=o,s(o),o>=1&&!p?(p=true,J?.()):o<1&&!V&&(p=false);}let l=e(window,[R],O,$,S),x=()=>l.hold(r||!i||a$3);x();function N(){if(i=true,b$3===void 0&&(b$3=t.duration),a$3){s(1),L?.();return}S(),L?.(),r?s(n):x();}t.readyState>=1?N():t.addEventListener("loadedmetadata",N,{once:true}),i||S();let k=a$3?()=>{}:a$1(e=>{e&&(k(),a$3=true,l.hold(true),s(1));});a$2(t,{type:"video",getProgress:()=>n,getTrigger:()=>({tStart:m,tEnd:f})});function D(){r&&(r=false,x());}return {destroy(){l.off(),t.removeEventListener("loadedmetadata",N),k(),b$1(t);},replay(){E=-1,g=0,p=false,n=0,w=NaN,s(0),D();},pause(){r=true,l.hold(true);},resume:D,seek(e){let o=Math.min(1,Math.max(0,e));n=o,E=o,g=0,r=true,l.hold(true),w=NaN,s(o);},getProgress(){return n}}}export{se as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {a,e,c,b as b$2}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$1}from'./chunk-5PJEKEEP.mjs';import {a as a$2,b as b$1}from'./chunk-EBU6E26L.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var k={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Oe(c){let f=c>1?[0,c-1]:[0],d=[[0,c-1]];for(let r=0;r<d.length;r++){let[l,h]=d[r];if(h-l<2)continue;let m=l+h>>1;f.push(m),d.push([l,m],[m,h]);}return f}function $e(c$1,f){if(typeof window>"u")return k;let d$1=typeof c$1=="string"?document.querySelector(c$1):c$1;if(!d$1||d$1.tagName.toLowerCase()!=="canvas")return b("scrollFrames: <canvas> element not found:",c$1),k;let r=d$1,{frames:l,trigger:h={},easing:m="linear",once:J=false,axis:A="y",fit:be="cover",triggerElement:ye,onReady:ve,onLoad:Me,onComplete:xe,onProgress:Ee}=f||{},p=Array.isArray(l)?l:null,K=f?.count,w=Math.floor(p?Math.min(K??p.length,p.length):K??NaN);if(!(p||typeof l=="function")||!Number.isFinite(w)||w<1)return b("scrollFrames: no frames. Pass `frames` as an array of URLs, or a function with a finite `count` of 1 or more.",r),k;let b$3=f.concurrency??6;(!Number.isFinite(b$3)||b$3<1)&&(b("scrollFrames: `concurrency` must be a finite number of 1 or more; using 6.",f.concurrency),b$3=6),b$3=Math.floor(b$3);let H=r.getContext("2d");if(!H)return b("scrollFrames: the canvas has no 2D context.",r),k;let y=w-1,Q=ye??r,i=window.matchMedia("(prefers-reduced-motion: reduce)").matches,Fe=typeof m=="function"?m:d[m]??d.linear,V=e=>{let t=Fe(e);return t===t?t:0},Se=a(h.start||"top top"),Re=a(h.end||"bottom top"),C=0,P=0,E=false,W=-1,T=0,v=0,L=false,a$3=false,Z=false,ee=false,$=0,D=-1,O=new Array(w),U=new Uint8Array(w),F=new Set,M=i?[y]:Oe(w),q=0,G=0,te=false,z=(e,...t)=>{if(e)try{e(...t);}catch(n){typeof reportError=="function"?reportError(n):setTimeout(()=>{throw n});}},ne=false,Ae=e=>{let t;try{t=p?p[e]:l(e);}catch(n){t=n;}return typeof t=="string"&&t?t:(ne||(ne=true,b(`scrollFrames: no URL for frame ${e}; it is skipped for its nearest neighbour.`,t)),null)},re=()=>A==="x"?window.scrollX:window.scrollY,Ce=()=>A==="x"?window.innerWidth:window.innerHeight;function _(){!te&&G===M.length&&(te=true,z(Me));}function B(){for(;!a$3&&F.size<b$3&&q<M.length;){let e=M[q++];U[e]||Pe(e);}}function Pe(e){U[e]=1;let t=Ae(e);if(t===null){G++,queueMicrotask(()=>{a$3||_();});return}let n=new Image,o=false,s=g=>{o||a$3||(o=true,n.onload=n.onerror=null,F.delete(n),g?O[e]=n:b("scrollFrames: a frame failed to load; its nearest neighbour shows instead:",t),G++,B(),I(),_());};F.add(n),n.decoding="async",n.onerror=()=>s(false),n.src=t,typeof n.decode=="function"?n.decode().then(()=>s(true),()=>{n.complete?s(n.naturalWidth>0):n.onload=()=>s(true);}):n.onload=()=>s(true);}function Te(e){for(let t=0;t<=y;t++){if(O[e-t])return e-t;if(O[e+t])return e+t}return -1}function X(){let e=r.clientWidth,t=r.clientHeight;if(!e||!t)return;let n=Math.min(window.devicePixelRatio||1,2),o=Math.round(e*n),s=Math.round(t*n);if(Math.abs(r.width-o)<=1&&Math.abs(r.height-s)<=1)return;r.width=o,r.height=s,D=-1;let g=r.clientWidth,R=r.clientHeight;if(g!==e||R!==t){let x=r.style;g!==e&&R!==t?(x.width=`${e}px`,x.height=`${t}px`):x.aspectRatio=`${e} / ${t}`;}}function I(){let e=Te($);if(e<0||e===D)return;let t=O[e],n=r.width,o=r.height,s=t.naturalWidth||n,g=t.naturalHeight||o,R=(be==="contain"?Math.min:Math.max)(n/s,o/g),x=s*R,fe=g*R;H.clearRect(0,0,n,o),H.drawImage(t,(n-x)/2,(o-fe)/2,x,fe),D=e,Z||(Z=true,z(ve));}function N(e){$=Math.min(y,Math.max(0,Math.round(e*y))),r.style.setProperty("--scroll-draw-progress",String(e)),I(),z(Ee,e,$);}function oe(){let e=Q.getBoundingClientRect(),t=A==="x"?e.left:e.top,n=A==="x"?e.width:e.height,o=c({top:t,height:n},re(),Ce(),Se,Re);C=o.tStart,P=o.tEnd,P===C&&n>0&&!i&&!ee&&(ee=true,b("scrollFrames: zero-length trigger window, so it never scrubs. In a sticky stage, set triggerElement.",r));}let se=()=>b$2(re(),C,P,1);function Le(){if(i)return;let e=se(),t=J?Math.max(W,V(T=Math.max(T,e))):V(e);v=t,N(t),t>=1&&!L?(L=true,z(xe)):t<1&&!J&&(L=false);}function ie(){v=1,N(1);}X(),i||oe();let S=e(window,[Q],se,Le,()=>{X(),i||oe(),I();}),ae=()=>S.hold(E||i);ae(),i&&ie(),B();let ce=typeof ResizeObserver=="function"?new ResizeObserver(()=>{X(),I();}):null;ce?.observe(r);let le=i?()=>{}:a$1(e=>{e&&(le(),i=true,S.hold(true),M=M.slice(0,q),U[y]||M.push(y),_(),ie(),B());});a$2(r,{type:"frames",getProgress:()=>v,getTrigger:()=>({tStart:C,tEnd:P})});function ue(){a$3||!E||(E=false,ae());}return {destroy(){if(!a$3){a$3=true,S.off(),ce?.disconnect(),le();for(let e of F)e.onload=e.onerror=null,e.src="";F.clear(),b$1(r);}},replay(){a$3||(W=-1,T=0,L=false,v=0,N(0),ue());},pause(){a$3||(E=true,S.hold(true));},resume:ue,seek(e){if(a$3)return;let t=Math.min(1,Math.max(0,e===e?e:0));v=t,W=t,T=0,E=true,S.hold(true),N(t);},getProgress(){return v}}}export{$e as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var r=Symbol.for("svg-scroll-draw.registry");function t(){let e=globalThis;return e[r]||(e[r]=new Map)}function s(e,n){t().set(e,n);}function o(e){t().delete(e);}function i(){return t()}export{s as a,o as b,i as c};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {b}from'./chunk-
|
|
1
|
+
import {b}from'./chunk-7XOFQCQE.mjs';import {b as b$1}from'./chunk-LFSU6LR3.mjs';function l(r,s){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof r=="string"?document.querySelector(r):r;return o?b(o,s):(b$1("Container not found:",r),n)}export{l as a};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {a}from'./chunk-
|
|
1
|
+
import {a}from'./chunk-7USW2XFB.mjs';import {b as b$1}from'./chunk-LFSU6LR3.mjs';var n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function b(e,o){if(typeof window>"u")return n;let r=typeof e=="string"?document.querySelector(e):e;return r?a(r,o):(b$1("scrollAnimate: element not found:",e),n)}function P(e,o={}){if(typeof window>"u")return n;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return b$1("scrollParallax: element not found:",e),n;let{speed:c=.3,axis:p="y",easing:f="linear",trigger:u,onProgress:g}=o,i=-c*100,s=r.style,m=!!r.ownerSVGElement,y=s.getPropertyValue("transform-box");m&&s.setProperty("transform-box","fill-box");let l=a(r,{props:p==="x"?{transform:["translateX(0%)",`translateX(${i}%)`]}:{transform:["translateY(0%)",`translateY(${i}%)`]},trigger:u??{start:"top bottom",end:"bottom top"},easing:f,native:false,onProgress:g});return m?{...l,destroy(){l.destroy(),s.setProperty("transform-box",y);}}:l}export{b as a,P as b};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,b as b$1,e,c}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$2,b as b$2}from'./chunk-
|
|
1
|
+
import {a}from'./chunk-2PYLM3E7.mjs';import {a as a$1,b as b$1,e,c}from'./chunk-NV6YTPHI.mjs';import {d}from'./chunk-THPTANES.mjs';import {a as a$2,b as b$2}from'./chunk-EBU6E26L.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var C={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function U(t,p){if(typeof window>"u")return C;let a$1=typeof t=="string"?document.querySelector(t):t;return a$1?a(p,(l,c)=>B(a$1,l,c)):(b("scrollCounter: element not found:",t),C)}function B(t,p,a){let{from:l=0,to:c$1,format:F,easing:f="ease-out",trigger:P={},once:E=true,decimals:M,onComplete:v}=p,x=M!==void 0?e=>e.toFixed(M):F??(e=>String(Math.round(e))),d$1=typeof f=="function"?f:d[f]??d["ease-out"],G=a$1(P.start||"top 80%"),L=a$1(P.end||"top 20%");if(a)return t.textContent=x(c$1),v?.(),{...C,getProgress:()=>1};let s=0,i=0,T=false,h=-1,o=0,n=0,u=false,w=()=>window.scrollY,V=()=>window.innerHeight;function A(){let e=t.getBoundingClientRect(),r=c({top:e.top,height:e.height},w(),V(),G,L);T&&Math.abs(r.tStart-s)<1&&Math.abs(r.tEnd-i)<1||(T=true,s=r.tStart,i=r.tEnd);}let _=t.style.getPropertyValue("--scroll-draw-progress");function m(e){t.textContent=x(l+(c$1-l)*e),t.style.setProperty("--scroll-draw-progress",String(e));}let I=()=>b$1(w(),s,i,1);function q(){let e=I(),r=E?Math.max(h,d$1(o=Math.max(o,e))):d$1(e);n=r,m(r),r>=1&&!u?(u=true,v?.()):r<1&&!E&&(u=false);}A();{o=b$1(w(),s,i,1);let e=d$1(o);n=e,m(e);}let g=e(window,[t],I,q,A);a$2(t,{type:"counter",getProgress:()=>n,getTrigger:()=>({tStart:s,tEnd:i})});let O=()=>g.hold(false);return {destroy(){g.off(),t.style.setProperty("--scroll-draw-progress",_),b$2(t);},replay(){h=-1,o=0,u=false,n=0,m(0),O();},pause:()=>g.hold(true),resume:O,seek(e){let r=Math.min(1,Math.max(0,e));n=r,h=r,o=0,g.hold(true),m(r);},getProgress(){return n}}}export{U as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {b,a as a$4}from'./chunk-22P4KBPG.mjs';import {a as a$6}from'./chunk-D2BHE4F2.mjs';import {a,b as b$1}from'./chunk-XSVTHCLO.mjs';import {a as a$3}from'./chunk-BRV2B2YW.mjs';import {a as a$5}from'./chunk-32ZCSGFZ.mjs';import {a as a$2}from'./chunk-U5TKLHGW.mjs';import {a as a$1}from'./chunk-7USW2XFB.mjs';import {b as b$2}from'./chunk-7XOFQCQE.mjs';import {b as b$3}from'./chunk-LFSU6LR3.mjs';import {defineComponent,ref,h,onMounted,watch,onUnmounted,unref}from'vue';var u=e=>typeof e=="function"?e():unref(e);function l(e,t,n,s=a){let o=null,i=t(),O=()=>{o?.destroy(),o=e.value?n(e.value,b$1(i,()=>i),i):null;};onMounted(O),watch(()=>s(i=t()),O),onUnmounted(()=>{o?.destroy(),o=null;});}function K(e={}){let t=ref(null);return l(t,()=>u(e),b$2),t}var C={preset:0,selector:0,speed:0,fade:1,easing:0,trigger:0,stagger:0,direction:0,once:1,debug:1,axis:0,scrollContainer:0,autoReverse:1,delay:0,strokeColor:0,strokeWidth:0,fillOpacity:0,clip:2,waypoints:0,velocityScale:3,threshold:0,rootMargin:0,repeat:0,repeatDelay:0,morphTo:0,onProgress:0,onStart:0,onComplete:0,onEnter:0,onLeave:0,onEnterBack:0,onLeaveBack:0,autoplay:1,duration:0,native:1},H=[null,Boolean,[Boolean,String],[Boolean,Number]],y=e=>({type:e,default:void 0}),P=defineComponent({name:"ScrollDraw",props:Object.fromEntries(Object.entries(C).map(([e,t])=>[e,t?y(H[t]):null])),setup(e,{slots:t}){let n=ref(null);return l(n,()=>{let s={};for(let o in C){let i=e[o];i!=null&&(s[o]=i);}return s},b$2),()=>h("div",{ref:n},t.default?.())}});function Y(e){let t=ref(null);return l(t,()=>u(e),a$1),t}var _=defineComponent({name:"ScrollAnimate",props:{options:{type:Object,required:true}},setup(e,{slots:t}){let n=ref(null);return l(n,()=>e.options,a$1),()=>h("div",{ref:n},t.default?.())}});function W(e){let t=ref(null);return l(t,()=>u(e),a$2),t}var U=defineComponent({name:"ScrollCounter",props:{to:{type:Number,required:true},from:{type:Number},format:{type:Function},easing:{type:[String,Function]},trigger:{type:Object},once:y(Boolean),decimals:{type:Number},onComplete:{type:Function}},setup(e){let t=ref(null);return l(t,()=>{let n={to:e.to};return e.from!=null&&(n.from=e.from),e.format!=null&&(n.format=e.format),e.easing!=null&&(n.easing=e.easing),e.trigger!=null&&(n.trigger=e.trigger),e.once!=null&&(n.once=e.once),e.decimals!=null&&(n.decimals=e.decimals),e.onComplete!=null&&(n.onComplete=e.onComplete),n},a$2),()=>h("span",{ref:t})}});function $(e={}){let t=ref(null);return l(t,()=>u(e),a$3),t}var z=defineComponent({name:"ScrollVideo",props:{src:{type:String,required:true},options:{type:Object},muted:{type:Boolean,default:true},playsInline:{type:Boolean,default:true},class:{type:String}},setup(e){let t=ref(null);return l(t,()=>e.options??{},a$3),()=>h("video",{ref:t,src:e.src,muted:e.muted,playsinline:e.playsInline,preload:"auto",class:e.class})}}),F=(e,{triggerElement:t,...n},s)=>{let o=typeof t=="string"?document.querySelector(t):t;return typeof t=="string"&&!o&&b$3(`<ScrollFrames>: triggerElement "${t}" matches nothing; measuring the canvas.`),a$6(e,{...n,frames:s.frames,triggerElement:o??void 0})};function J(e){let t=ref(null);return l(t,()=>u(e),F,a$4),t}var M={frames:0,count:0,trigger:0,easing:0,once:1,axis:0,triggerElement:0,fit:0,concurrency:0,onReady:0,onLoad:0,onComplete:0,onProgress:0},Q=defineComponent({name:"ScrollFrames",props:Object.fromEntries(Object.entries(M).map(([e,t])=>[e,t?y(Boolean):e==="frames"?{required:true}:null])),setup(e){let t=ref(null);return l(t,()=>{let n={};for(let s in M){let o=e[s];o!=null&&(n[s]=o);}return n},F,a$4),onMounted(()=>b(t.value)),()=>h("canvas",{ref:t,role:"img"})}});function X(e={}){let t=ref(null);return l(t,()=>u(e),a$5),t}var Z=defineComponent({name:"ScrollText",props:{options:{type:Object},tag:{type:String,default:"p"}},setup(e,{slots:t}){let n=ref(null);return l(n,()=>e.options??{},a$5),()=>h(e.tag,{ref:n},t.default?.())}});export{K as a,P as b,Y as c,_ as d,W as e,U as f,$ as g,z as h,J as i,Q as j,X as k,Z as l};
|
package/dist/cinematic/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{a as Cinematic}from'../chunk-
|
|
1
|
+
export{a as Cinematic}from'../chunk-BDXWPUBJ.mjs';import'../chunk-NV6YTPHI.mjs';import'../chunk-THPTANES.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-5PJEKEEP.mjs';import'../chunk-EBU6E26L.mjs';import'../chunk-LFSU6LR3.mjs';
|
package/dist/devtools/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var E=Symbol.for("svg-scroll-draw.registry");function L(){let e=globalThis;return e[E]||(e[E]=new Map)}function g(){return L()}var h=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";var v={draw:"#60a5fa",animate:"#4ade80",counter:"#fbbf24",video:"#c084fc",text:"#fb923c",pin:"#f43f5e",snap:"#22d3ee"},n=null,o=null,b=0,p=false,m=null;function R(){o?.remove(),o=document.createElement("div"),o.setAttribute("data-ssd-devtools-overlay",""),o.style.cssText="position:fixed;pointer-events:none;z-index:99998;inset:0;overflow:hidden;",document.body.appendChild(o);}function M(){if(!o)return;o.innerHTML="";let e=window.scrollY,l=window.innerHeight;for(let[,t]of g()){let{tStart:i,tEnd:r}=t.getTrigger(),d=v[t.type]??"#60a5fa",f=i-e,s=r-e;if(s<-100||f>l+100)continue;let c=(u,y)=>{let a=document.createElement("div");a.style.cssText=`position:absolute;left:0;right:0;top:${u}px;height:2px;background:${d};opacity:0.85;`;let x=document.createElement("span");return x.textContent=y,x.style.cssText=`position:absolute;right:8px;top:-18px;font:bold 9px/1 monospace;color:#fff;background:${d};padding:2px 5px;border-radius:3px;white-space:nowrap;`,a.appendChild(x),a};o.appendChild(c(f,`\u25B6 ${t.type}:start`)),o.appendChild(c(s,`\u25A0 ${t.type}:end`));}}function $(){n?.remove(),n=document.createElement("div"),n.setAttribute("data-ssd-devtools-panel",""),n.style.cssText="position:fixed;bottom:12px;right:12px;z-index:99999;background:rgba(10,10,10,0.92);color:#e8e8e3;border-radius:10px;border:1px solid #333;font:12px/1.5 monospace;padding:10px 14px;min-width:220px;max-width:280px;pointer-events:none;backdrop-filter:blur(4px);";let e=document.createElement("div");e.style.cssText="font-weight:bold;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:8px;",e.textContent="\u26A1 svg-scroll-draw devtools",n.appendChild(e),document.body.appendChild(n);}function S(){if(!n)return;for(;n.children.length>1;)n.removeChild(n.lastChild);let e=g();if(e.size===0){let t=document.createElement("div");t.style.cssText="color:#555;font-size:11px;",t.textContent="No active instances.",n.appendChild(t);return}for(let[t,i]of e){let r=i.getProgress(),d=v[i.type]??"#60a5fa",f=t.id?`#${t.id}`:t.className?`.${t.className.split(" ")[0]}`:i.type,s=document.createElement("div");s.style.cssText="margin-bottom:6px;";let c=document.createElement("div");c.style.cssText=`font-size:10px;color:${d};margin-bottom:2px;`,c.textContent=`${i.type} ${f}`;let u=document.createElement("div");u.style.cssText="height:6px;background:#222;border-radius:3px;overflow:hidden;";let y=document.createElement("div");y.style.cssText=`height:100%;width:${Math.round(r*100)}%;background:${d};border-radius:3px;transition:width 0.1s;`,u.appendChild(y),s.appendChild(c),s.appendChild(u);let a=document.createElement("div");a.style.cssText="font-size:9px;color:#555;text-align:right;margin-top:1px;",a.textContent=`${Math.round(r*100)}%`,s.appendChild(a),n.appendChild(s);}}function w(){M(),S(),b=requestAnimationFrame(w);}function T(){h&&(p||(p=true,R(),$(),b=requestAnimationFrame(w),m=e=>{(e.metaKey||e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="s"&&(e.preventDefault(),C());},window.addEventListener("keydown",m)));}function _(){p&&(p=false,cancelAnimationFrame(b),n?.remove(),n=null,o?.remove(),o=null,m&&(window.removeEventListener("keydown",m),m=null));}function C(){p?_():T();}function k(e){if(!p)return;let l=typeof e=="string"?document.querySelector(e):e;if(!l)return;let t=g().get(l);if(!t)return;let i=v[t.type]??"#60a5fa",r=l,d=r.style.outline;r.style.outline=`2px solid ${i}`,r.style.outlineOffset="2px",setTimeout(()=>{r.style.outline=d,r.style.outlineOffset="";},2e3);}var A={enable:T,disable:_,toggle:C,highlight:k};exports.devtools=A;
|
|
1
|
+
'use strict';var E=Symbol.for("svg-scroll-draw.registry");function L(){let e=globalThis;return e[E]||(e[E]=new Map)}function g(){return L()}var h=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";var v={draw:"#60a5fa",animate:"#4ade80",counter:"#fbbf24",video:"#c084fc",frames:"#e879f9",text:"#fb923c",pin:"#f43f5e",snap:"#22d3ee"},n=null,o=null,b=0,p=false,m=null;function R(){o?.remove(),o=document.createElement("div"),o.setAttribute("data-ssd-devtools-overlay",""),o.style.cssText="position:fixed;pointer-events:none;z-index:99998;inset:0;overflow:hidden;",document.body.appendChild(o);}function M(){if(!o)return;o.innerHTML="";let e=window.scrollY,l=window.innerHeight;for(let[,t]of g()){let{tStart:i,tEnd:r}=t.getTrigger(),d=v[t.type]??"#60a5fa",f=i-e,s=r-e;if(s<-100||f>l+100)continue;let c=(u,y)=>{let a=document.createElement("div");a.style.cssText=`position:absolute;left:0;right:0;top:${u}px;height:2px;background:${d};opacity:0.85;`;let x=document.createElement("span");return x.textContent=y,x.style.cssText=`position:absolute;right:8px;top:-18px;font:bold 9px/1 monospace;color:#fff;background:${d};padding:2px 5px;border-radius:3px;white-space:nowrap;`,a.appendChild(x),a};o.appendChild(c(f,`\u25B6 ${t.type}:start`)),o.appendChild(c(s,`\u25A0 ${t.type}:end`));}}function $(){n?.remove(),n=document.createElement("div"),n.setAttribute("data-ssd-devtools-panel",""),n.style.cssText="position:fixed;bottom:12px;right:12px;z-index:99999;background:rgba(10,10,10,0.92);color:#e8e8e3;border-radius:10px;border:1px solid #333;font:12px/1.5 monospace;padding:10px 14px;min-width:220px;max-width:280px;pointer-events:none;backdrop-filter:blur(4px);";let e=document.createElement("div");e.style.cssText="font-weight:bold;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:8px;",e.textContent="\u26A1 svg-scroll-draw devtools",n.appendChild(e),document.body.appendChild(n);}function S(){if(!n)return;for(;n.children.length>1;)n.removeChild(n.lastChild);let e=g();if(e.size===0){let t=document.createElement("div");t.style.cssText="color:#555;font-size:11px;",t.textContent="No active instances.",n.appendChild(t);return}for(let[t,i]of e){let r=i.getProgress(),d=v[i.type]??"#60a5fa",f=t.id?`#${t.id}`:t.className?`.${t.className.split(" ")[0]}`:i.type,s=document.createElement("div");s.style.cssText="margin-bottom:6px;";let c=document.createElement("div");c.style.cssText=`font-size:10px;color:${d};margin-bottom:2px;`,c.textContent=`${i.type} ${f}`;let u=document.createElement("div");u.style.cssText="height:6px;background:#222;border-radius:3px;overflow:hidden;";let y=document.createElement("div");y.style.cssText=`height:100%;width:${Math.round(r*100)}%;background:${d};border-radius:3px;transition:width 0.1s;`,u.appendChild(y),s.appendChild(c),s.appendChild(u);let a=document.createElement("div");a.style.cssText="font-size:9px;color:#555;text-align:right;margin-top:1px;",a.textContent=`${Math.round(r*100)}%`,s.appendChild(a),n.appendChild(s);}}function w(){M(),S(),b=requestAnimationFrame(w);}function T(){h&&(p||(p=true,R(),$(),b=requestAnimationFrame(w),m=e=>{(e.metaKey||e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="s"&&(e.preventDefault(),C());},window.addEventListener("keydown",m)));}function _(){p&&(p=false,cancelAnimationFrame(b),n?.remove(),n=null,o?.remove(),o=null,m&&(window.removeEventListener("keydown",m),m=null));}function C(){p?_():T();}function k(e){if(!p)return;let l=typeof e=="string"?document.querySelector(e):e;if(!l)return;let t=g().get(l);if(!t)return;let i=v[t.type]??"#60a5fa",r=l,d=r.style.outline;r.style.outline=`2px solid ${i}`,r.style.outlineOffset="2px",setTimeout(()=>{r.style.outline=d,r.style.outlineOffset="";},2e3);}var A={enable:T,disable:_,toggle:C,highlight:k};exports.devtools=A;
|
package/dist/devtools/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {c}from'../chunk-
|
|
1
|
+
import {c}from'../chunk-EBU6E26L.mjs';import {a}from'../chunk-LFSU6LR3.mjs';var v={draw:"#60a5fa",animate:"#4ade80",counter:"#fbbf24",video:"#c084fc",frames:"#e879f9",text:"#fb923c",pin:"#f43f5e",snap:"#22d3ee"},n=null,o=null,h=0,p=false,m=null;function L(){o?.remove(),o=document.createElement("div"),o.setAttribute("data-ssd-devtools-overlay",""),o.style.cssText="position:fixed;pointer-events:none;z-index:99998;inset:0;overflow:hidden;",document.body.appendChild(o);}function $(){if(!o)return;o.innerHTML="";let e=window.scrollY,l=window.innerHeight;for(let[,t]of c()){let{tStart:r,tEnd:i}=t.getTrigger(),d=v[t.type]??"#60a5fa",f=r-e,s=i-e;if(s<-100||f>l+100)continue;let c=(u,x)=>{let a=document.createElement("div");a.style.cssText=`position:absolute;left:0;right:0;top:${u}px;height:2px;background:${d};opacity:0.85;`;let g=document.createElement("span");return g.textContent=x,g.style.cssText=`position:absolute;right:8px;top:-18px;font:bold 9px/1 monospace;color:#fff;background:${d};padding:2px 5px;border-radius:3px;white-space:nowrap;`,a.appendChild(g),a};o.appendChild(c(f,`\u25B6 ${t.type}:start`)),o.appendChild(c(s,`\u25A0 ${t.type}:end`));}}function M(){n?.remove(),n=document.createElement("div"),n.setAttribute("data-ssd-devtools-panel",""),n.style.cssText="position:fixed;bottom:12px;right:12px;z-index:99999;background:rgba(10,10,10,0.92);color:#e8e8e3;border-radius:10px;border:1px solid #333;font:12px/1.5 monospace;padding:10px 14px;min-width:220px;max-width:280px;pointer-events:none;backdrop-filter:blur(4px);";let e=document.createElement("div");e.style.cssText="font-weight:bold;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:8px;",e.textContent="\u26A1 svg-scroll-draw devtools",n.appendChild(e),document.body.appendChild(n);}function k(){if(!n)return;for(;n.children.length>1;)n.removeChild(n.lastChild);let e=c();if(e.size===0){let t=document.createElement("div");t.style.cssText="color:#555;font-size:11px;",t.textContent="No active instances.",n.appendChild(t);return}for(let[t,r]of e){let i=r.getProgress(),d=v[r.type]??"#60a5fa",f=t.id?`#${t.id}`:t.className?`.${t.className.split(" ")[0]}`:r.type,s=document.createElement("div");s.style.cssText="margin-bottom:6px;";let c=document.createElement("div");c.style.cssText=`font-size:10px;color:${d};margin-bottom:2px;`,c.textContent=`${r.type} ${f}`;let u=document.createElement("div");u.style.cssText="height:6px;background:#222;border-radius:3px;overflow:hidden;";let x=document.createElement("div");x.style.cssText=`height:100%;width:${Math.round(i*100)}%;background:${d};border-radius:3px;transition:width 0.1s;`,u.appendChild(x),s.appendChild(c),s.appendChild(u);let a=document.createElement("div");a.style.cssText="font-size:9px;color:#555;text-align:right;margin-top:1px;",a.textContent=`${Math.round(i*100)}%`,s.appendChild(a),n.appendChild(s);}}function E(){$(),k(),h=requestAnimationFrame(E);}function T(){a&&(p||(p=true,L(),M(),h=requestAnimationFrame(E),m=e=>{(e.metaKey||e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="s"&&(e.preventDefault(),C());},window.addEventListener("keydown",m)));}function w(){p&&(p=false,cancelAnimationFrame(h),n?.remove(),n=null,o?.remove(),o=null,m&&(window.removeEventListener("keydown",m),m=null));}function C(){p?w():T();}function H(e){if(!p)return;let l=typeof e=="string"?document.querySelector(e):e;if(!l)return;let t=c().get(l);if(!t)return;let r=v[t.type]??"#60a5fa",i=l,d=i.style.outline;i.style.outline=`2px solid ${r}`,i.style.outlineOffset="2px",setTimeout(()=>{i.style.outline=d,i.style.outlineOffset="";},2e3);}var K={enable:T,disable:w,toggle:C,highlight:H};export{K as devtools};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
'use strict';function qe({tension:e=2.5,friction:r=2.2}={}){return o=>1-Math.cos(o*Math.PI*e)*Math.pow(1-o,r)}function He({bounces:e=3,decay:r=.5}={}){let o=Math.max(1,Math.round(e)),t=Math.max(.01,Math.min(.99,r)),s=Math.sqrt(t),a=0,c=[];for(let l=0;l<o;l++){let d=Math.pow(s,l);c.push(d),a+=d;}let f=[0],p=0;for(let l=0;l<o;l++)p+=c[l]/a,f.push(p);return l=>{if(l<=0)return 0;if(l>=1)return 1;for(let d=0;d<o;d++)if(l<=f[d+1]){let h=(l-f[d])/(f[d+1]-f[d]);if(d===0)return h*(2-h);let M=1-Math.pow(t,d);return M+(1-M)*(2*h-1)*(2*h-1)}return 1}}function Be({amplitude:e=1,period:r=.4}={}){let o=Math.max(1,e),t=Math.max(.1,r),s=o<=1?t/4:t/(2*Math.PI)*Math.asin(1/o);return a=>a<=0?0:a>=1?1:o*Math.pow(2,-10*a)*Math.sin((a-s)*(2*Math.PI)/t)+1}var ie={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:qe(),bounce:He(),elastic:Be()};function Me(e,r,o){return Math.min(o,Math.max(r,e))}function se(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[o="top",t="bottom"]=r.split(/\s+/).filter(Boolean);return {element:o,viewport:t}}var Re=(e,r)=>e==="top"?0:e==="center"?.5:e==="bottom"?1:r;function xe(e,r,o,t){return e+o+r*Re(t,0)}function Le(e,r){return r*(/^\d+(\.\d+)?%$/.test(e)?parseFloat(e)/100:Re(e,1))}function Se(e,r,o,t){return o===r?0:Me((e-r)/(o-r)*t,0,1)}function _e(e,r,o,t,s){let a=xe(e.top,e.height,r,t.element)-Le(t.viewport,o),c=xe(e.top,e.height,r,s.element)-Le(s.viewport,o);return {tStart:a,tEnd:c}}var Te=Symbol.for("svg-scroll-draw.registry");function Ae(){let e=globalThis;return e[Te]||(e[Te]=new Map)}function Fe(e,r){Ae().set(e,r);}function Oe(e){Ae().delete(e);}var Ue=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function E(e,...r){Ue&&console.warn(`[svg-scroll-draw] ${e}`,...r);}function Ie(e){if(typeof window>"u"||typeof window.matchMedia!="function")return ()=>{};let r=window.matchMedia("(prefers-reduced-motion: reduce)"),o=s=>e(!!s.matches);if(typeof r.addEventListener=="function")return r.addEventListener("change",o),()=>r.removeEventListener("change",o);let t=r;return t.addListener?.(o),()=>t.removeListener?.(o)}var z,H=new Set,B=new WeakMap,k=new Map,Ne=e=>{let r=e.getBoundingClientRect();return r.width+" "+r.height};function Ye(e){let r=new Set;for(let o of e)for(;o&&o!==document.body;o=o.parentElement)for(let t=o;t;t=t.previousElementSibling)r.add(t);return r}function Pe(e,r){if(typeof ResizeObserver>"u"||typeof document>"u")return ()=>{};let o=()=>r();z??(z=new ResizeObserver(s=>{let a=false;for(let{target:c}of s)B.get(c)!==Ne(c)&&(a=true),B.set(c,"");a&&H.forEach(c=>c());})),H.add(o);let t=Ye(e);return [document.body,document.documentElement].forEach(s=>s&&t.add(s)),t.forEach(s=>{B.has(s)||B.set(s,Ne(s)),k.set(s,(k.get(s)??0)+1),z.observe(s);}),()=>{H.delete(o)&&(t.forEach(s=>{let a=(k.get(s)??1)-1;if(a)return void k.set(s,a);k.delete(s),z?.unobserve(s);}),H.size||(z?.disconnect(),z=void 0));}}function ze(e,r,o,t,s){let a,c=NaN,f,p,l=()=>{a=0,t(),!f&&!a&&(c=o())>0&&c<1&&(a=requestAnimationFrame(l));},d=()=>{!a&&!f&&o()!==c&&(a=requestAnimationFrame(l));},h=y=>{f=y,cancelAnimationFrame(a),a=c=NaN,d();},M=()=>{clearTimeout(p),s(),d();},F=()=>{clearTimeout(p),p=setTimeout(M,150);},Y=Pe(r,F),b=y=>{e[y]("scroll",d,{passive:true}),window[y]("resize",F),window[y]("orientationchange",F);};return b("addEventListener"),d(),{hold:h,remeasure:M,off(){h(true),b("removeEventListener"),Y(),clearTimeout(p);}}}var U={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ke(e){let r=e>1?[0,e-1]:[0],o=[[0,e-1]];for(let t=0;t<o.length;t++){let[s,a]=o[t];if(a-s<2)continue;let c=s+a>>1;r.push(c),o.push([s,c],[c,a]);}return r}function mt(e,r){if(typeof window>"u")return U;let o=typeof e=="string"?document.querySelector(e):e;if(!o||o.tagName.toLowerCase()!=="canvas")return E("scrollFrames: <canvas> element not found:",e),U;let t=o,{frames:s,trigger:a={},easing:c="linear",once:f=false,axis:p="y",fit:l="cover",triggerElement:d,onReady:h,onLoad:M,onComplete:F,onProgress:Y}=r||{},b=Array.isArray(s)?s:null,y=r?.count,L=Math.floor(b?Math.min(y??b.length,b.length):y??NaN);if(!(b||typeof s=="function")||!Number.isFinite(L)||L<1)return E("scrollFrames: no frames. Pass `frames` as an array of URLs, or a function with a finite `count` of 1 or more.",t),U;let R=r.concurrency??6;(!Number.isFinite(R)||R<1)&&(E("scrollFrames: `concurrency` must be a finite number of 1 or more; using 6.",r.concurrency),R=6),R=Math.floor(R);let K=t.getContext("2d");if(!K)return E("scrollFrames: the canvas has no 2D context.",t),U;let S=L-1,ae=d??t,w=window.matchMedia("(prefers-reduced-motion: reduce)").matches,ke=typeof c=="function"?c:ie[c]??ie.linear,ue=n=>{let i=ke(n);return i===i?i:0},Ce=se(a.start||"top top"),De=se(a.end||"bottom top"),C=0,D=0,O=false,X=-1,W=0,_=0,G=false,v=false,ce=false,de=false,j=0,J=-1,Q=new Array(L),Z=new Uint8Array(L),I=new Set,T=w?[S]:Ke(L),ee=0,te=0,le=false,V=(n,...i)=>{if(n)try{n(...i);}catch(u){typeof reportError=="function"?reportError(u):setTimeout(()=>{throw u});}},me=false,We=n=>{let i;try{i=b?b[n]:s(n);}catch(u){i=u;}return typeof i=="string"&&i?i:(me||(me=true,E(`scrollFrames: no URL for frame ${n}; it is skipped for its nearest neighbour.`,i)),null)},fe=()=>p==="x"?window.scrollX:window.scrollY,Ge=()=>p==="x"?window.innerWidth:window.innerHeight;function ne(){!le&&te===T.length&&(le=true,V(M));}function re(){for(;!v&&I.size<R&&ee<T.length;){let n=T[ee++];Z[n]||Qe(n);}}function Qe(n){Z[n]=1;let i=We(n);if(i===null){te++,queueMicrotask(()=>{v||ne();});return}let u=new Image,m=false,g=x=>{m||v||(m=true,u.onload=u.onerror=null,I.delete(u),x?Q[n]=u:E("scrollFrames: a frame failed to load; its nearest neighbour shows instead:",i),te++,re(),$(),ne());};I.add(u),u.decoding="async",u.onerror=()=>g(false),u.src=i,typeof u.decode=="function"?u.decode().then(()=>g(true),()=>{u.complete?g(u.naturalWidth>0):u.onload=()=>g(true);}):u.onload=()=>g(true);}function Ve(n){for(let i=0;i<=S;i++){if(Q[n-i])return n-i;if(Q[n+i])return n+i}return -1}function oe(){let n=t.clientWidth,i=t.clientHeight;if(!n||!i)return;let u=Math.min(window.devicePixelRatio||1,2),m=Math.round(n*u),g=Math.round(i*u);if(Math.abs(t.width-m)<=1&&Math.abs(t.height-g)<=1)return;t.width=m,t.height=g,J=-1;let x=t.clientWidth,P=t.clientHeight;if(x!==n||P!==i){let A=t.style;x!==n&&P!==i?(A.width=`${n}px`,A.height=`${i}px`):A.aspectRatio=`${n} / ${i}`;}}function $(){let n=Ve(j);if(n<0||n===J)return;let i=Q[n],u=t.width,m=t.height,g=i.naturalWidth||u,x=i.naturalHeight||m,P=(l==="contain"?Math.min:Math.max)(u/g,m/x),A=g*P,Ee=x*P;K.clearRect(0,0,u,m),K.drawImage(i,(u-A)/2,(m-Ee)/2,A,Ee),J=n,ce||(ce=true,V(h));}function q(n){j=Math.min(S,Math.max(0,Math.round(n*S))),t.style.setProperty("--scroll-draw-progress",String(n)),$(),V(Y,n,j);}function pe(){let n=ae.getBoundingClientRect(),i=p==="x"?n.left:n.top,u=p==="x"?n.width:n.height,m=_e({top:i,height:u},fe(),Ge(),Ce,De);C=m.tStart,D=m.tEnd,D===C&&u>0&&!w&&!de&&(de=true,E("scrollFrames: zero-length trigger window, so it never scrubs. In a sticky stage, set triggerElement.",t));}let ge=()=>Se(fe(),C,D,1);function $e(){if(w)return;let n=ge(),i=f?Math.max(X,ue(W=Math.max(W,n))):ue(n);_=i,q(i),i>=1&&!G?(G=true,V(F)):i<1&&!f&&(G=false);}function he(){_=1,q(1);}oe(),w||pe();let N=ze(window,[ae],ge,$e,()=>{oe(),w||pe(),$();}),be=()=>N.hold(O||w);be(),w&&he(),re();let we=typeof ResizeObserver=="function"?new ResizeObserver(()=>{oe(),$();}):null;we?.observe(t);let ve=w?()=>{}:Ie(n=>{n&&(ve(),w=true,N.hold(true),T=T.slice(0,ee),Z[S]||T.push(S),ne(),he(),re());});Fe(t,{type:"frames",getProgress:()=>_,getTrigger:()=>({tStart:C,tEnd:D})});function ye(){v||!O||(O=false,be());}return {destroy(){if(!v){v=true,N.off(),we?.disconnect(),ve();for(let n of I)n.onload=n.onerror=null,n.src="";I.clear(),Oe(t);}},replay(){v||(X=-1,W=0,G=false,_=0,q(0),ye());},pause(){v||(O=true,N.hold(true));},resume:ye,seek(n){if(v)return;let i=Math.min(1,Math.max(0,n===n?n:0));_=i,X=i,W=0,O=true,N.hold(true),q(i);},getProgress(){return _}}}exports.scrollFrames=mt;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { T as TriggerConfig, E as EasingName, S as ScrollDrawInstance } from '../types-9bcJdVcg.mjs';
|
|
2
|
+
|
|
3
|
+
interface ScrollFramesOptions {
|
|
4
|
+
/** Image URLs in order, or a function from index (0-based) to URL. */
|
|
5
|
+
frames: string[] | ((index: number) => string);
|
|
6
|
+
/** Number of frames; required when `frames` is a function, else frames.length. */
|
|
7
|
+
count?: number;
|
|
8
|
+
trigger?: TriggerConfig;
|
|
9
|
+
easing?: EasingName | ((t: number) => number);
|
|
10
|
+
once?: boolean;
|
|
11
|
+
axis?: 'x' | 'y';
|
|
12
|
+
/**
|
|
13
|
+
* Measure the trigger window from this element instead of the canvas: the
|
|
14
|
+
* pinned-stage pattern, as in scrollVideo. Point it at the tall track that
|
|
15
|
+
* holds the scroll room, with `start: 'top top'` and `end: 'bottom bottom'`.
|
|
16
|
+
*/
|
|
17
|
+
triggerElement?: Element;
|
|
18
|
+
/** How each frame fills the canvas box: 'cover' (default) or 'contain'. */
|
|
19
|
+
fit?: 'cover' | 'contain';
|
|
20
|
+
/** How many images load at once. Default 6. */
|
|
21
|
+
concurrency?: number;
|
|
22
|
+
/** The first frame is drawn. */
|
|
23
|
+
onReady?: () => void;
|
|
24
|
+
/** Every frame has loaded (or failed). */
|
|
25
|
+
onLoad?: () => void;
|
|
26
|
+
onComplete?: () => void;
|
|
27
|
+
/**
|
|
28
|
+
* Every animation frame while the scroll is inside the trigger window (and on
|
|
29
|
+
* seek(), replay() and the frame that crosses an edge), as scrollVideo's
|
|
30
|
+
* does: the eased progress, and the index of the frame it calls for. The
|
|
31
|
+
* canvas shows the nearest loaded frame until that one arrives.
|
|
32
|
+
*/
|
|
33
|
+
onProgress?: (alpha: number, frame: number) => void;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Scrub an image sequence on a canvas with the scroll: the Apple product-page
|
|
37
|
+
* film. Frame `round(alpha × (count − 1))` is drawn, or the nearest one that
|
|
38
|
+
* has loaded until it arrives.
|
|
39
|
+
*/
|
|
40
|
+
declare function scrollFrames(target: string | HTMLCanvasElement, options: ScrollFramesOptions): ScrollDrawInstance;
|
|
41
|
+
|
|
42
|
+
export { type ScrollFramesOptions, scrollFrames };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { T as TriggerConfig, E as EasingName, S as ScrollDrawInstance } from '../types-9bcJdVcg.js';
|
|
2
|
+
|
|
3
|
+
interface ScrollFramesOptions {
|
|
4
|
+
/** Image URLs in order, or a function from index (0-based) to URL. */
|
|
5
|
+
frames: string[] | ((index: number) => string);
|
|
6
|
+
/** Number of frames; required when `frames` is a function, else frames.length. */
|
|
7
|
+
count?: number;
|
|
8
|
+
trigger?: TriggerConfig;
|
|
9
|
+
easing?: EasingName | ((t: number) => number);
|
|
10
|
+
once?: boolean;
|
|
11
|
+
axis?: 'x' | 'y';
|
|
12
|
+
/**
|
|
13
|
+
* Measure the trigger window from this element instead of the canvas: the
|
|
14
|
+
* pinned-stage pattern, as in scrollVideo. Point it at the tall track that
|
|
15
|
+
* holds the scroll room, with `start: 'top top'` and `end: 'bottom bottom'`.
|
|
16
|
+
*/
|
|
17
|
+
triggerElement?: Element;
|
|
18
|
+
/** How each frame fills the canvas box: 'cover' (default) or 'contain'. */
|
|
19
|
+
fit?: 'cover' | 'contain';
|
|
20
|
+
/** How many images load at once. Default 6. */
|
|
21
|
+
concurrency?: number;
|
|
22
|
+
/** The first frame is drawn. */
|
|
23
|
+
onReady?: () => void;
|
|
24
|
+
/** Every frame has loaded (or failed). */
|
|
25
|
+
onLoad?: () => void;
|
|
26
|
+
onComplete?: () => void;
|
|
27
|
+
/**
|
|
28
|
+
* Every animation frame while the scroll is inside the trigger window (and on
|
|
29
|
+
* seek(), replay() and the frame that crosses an edge), as scrollVideo's
|
|
30
|
+
* does: the eased progress, and the index of the frame it calls for. The
|
|
31
|
+
* canvas shows the nearest loaded frame until that one arrives.
|
|
32
|
+
*/
|
|
33
|
+
onProgress?: (alpha: number, frame: number) => void;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Scrub an image sequence on a canvas with the scroll: the Apple product-page
|
|
37
|
+
* film. Frame `round(alpha × (count − 1))` is drawn, or the nearest one that
|
|
38
|
+
* has loaded until it arrives.
|
|
39
|
+
*/
|
|
40
|
+
declare function scrollFrames(target: string | HTMLCanvasElement, options: ScrollFramesOptions): ScrollDrawInstance;
|
|
41
|
+
|
|
42
|
+
export { type ScrollFramesOptions, scrollFrames };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{a as scrollFrames}from'../chunk-D2BHE4F2.mjs';import'../chunk-NV6YTPHI.mjs';import'../chunk-THPTANES.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-5PJEKEEP.mjs';import'../chunk-EBU6E26L.mjs';import'../chunk-LFSU6LR3.mjs';
|
package/dist/group/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {b as b$1}from'../chunk-
|
|
1
|
+
import {b as b$1}from'../chunk-QZKYGS74.mjs';import {a as a$1}from'../chunk-7USW2XFB.mjs';import {b}from'../chunk-7XOFQCQE.mjs';import'../chunk-V3Z6G5JE.mjs';import'../chunk-UPWWULKI.mjs';import'../chunk-XC5NR2MU.mjs';import'../chunk-2PYLM3E7.mjs';import'../chunk-NV6YTPHI.mjs';import'../chunk-THPTANES.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-5PJEKEEP.mjs';import'../chunk-EBU6E26L.mjs';import'../chunk-LFSU6LR3.mjs';function u(s){return s.map(o=>typeof o=="string"?document.querySelector(o):o).filter(o=>o!==null)}var a={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function y(s,o={}){if(typeof window>"u")return a;let r=u(s).map(e=>b(e,o));return {destroy(){r.forEach(e=>e.destroy());},replay(){r.forEach(e=>e.replay());},pause(){r.forEach(e=>e.pause());},resume(){r.forEach(e=>e.resume());},seek(e){r.forEach(n=>n.seek(e));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(e=>e.refresh?.());}}}function E(s,o={}){if(typeof window>"u")return a;let r=u(s);if(r.length===0)return a;let e=0,n=[];function i(t){return b(r[t],{...o,once:true,onComplete(){o.onComplete?.(),e=Math.min(t+1,r.length-1),e>t&&n[e]?.resume();}})}function l(){r.forEach((t,c)=>{n[c]=i(c);});for(let t=1;t<n.length;t++)n[t].pause();}return l(),{destroy(){n.forEach(t=>t.destroy()),n.length=0;},replay(){n.forEach(t=>t.destroy()),n.length=0,e=0,l();},pause(){n[e]?.pause();},resume(){n[e]?.resume();},seek(t){n[e]?.seek(t);},getProgress(){return n[e]?.getProgress()??0},refresh(){n.forEach(t=>t.refresh?.());}}}function d(s,o){if(typeof window>"u")return a;let r=u(s).map(e=>a$1(e,o));return {destroy(){r.forEach(e=>e.destroy());},replay(){r.forEach(e=>e.replay());},pause(){r.forEach(e=>e.pause());},resume(){r.forEach(e=>e.resume());},seek(e){r.forEach(n=>n.seek(e));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(e=>e.refresh?.());}}}function w(s,o){if(typeof window>"u")return a;let r=u(s);if(r.length===0)return a;let e=0,n=[];function i(t){return a$1(r[t],{...o,once:true,onComplete(){o.onComplete?.(),e=Math.min(t+1,r.length-1),e>t&&n[e]?.resume();}})}function l(){r.forEach((t,c)=>{n[c]=i(c);});for(let t=1;t<n.length;t++)n[t].pause();}return l(),{destroy(){n.forEach(t=>t.destroy()),n.length=0;},replay(){n.forEach(t=>t.destroy()),n.length=0,e=0,l();},pause(){n[e]?.pause();},resume(){n[e]?.resume();},seek(t){n[e]?.seek(t);},getProgress(){return n[e]?.getProgress()??0},refresh(){n.forEach(t=>t.refresh?.());}}}function S(s,o={}){if(typeof window>"u")return a;let r=u(s).map(e=>b$1(e,o));return {destroy(){r.forEach(e=>e.destroy());},replay(){r.forEach(e=>e.replay());},pause(){r.forEach(e=>e.pause());},resume(){r.forEach(e=>e.resume());},seek(e){r.forEach(n=>n.seek(e));},getProgress(){return r[0]?.getProgress()??0},refresh(){r.forEach(e=>e.refresh?.());}}}export{d as scrollAnimateGroup,w as scrollAnimateSequence,y as scrollDrawGroup,E as scrollDrawSequence,S as scrollParallaxGroup};
|