svg-scroll-draw 2.18.1 → 2.19.1
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 +11 -11
- package/dist/angular/index.cjs +3 -3
- package/dist/angular/index.d.mts +3 -3
- package/dist/angular/index.d.ts +3 -3
- package/dist/angular/index.mjs +1 -1
- package/dist/astro/index.cjs +3 -3
- package/dist/astro/index.d.mts +6 -5
- package/dist/astro/index.d.ts +6 -5
- package/dist/astro/index.mjs +1 -1
- package/dist/cdn/svg-scroll-draw.dev.global.js +161 -37
- package/dist/cdn/svg-scroll-draw.global.js +3 -3
- package/dist/{chunk-DIMNQPW5.mjs → chunk-6SSA5V7J.mjs} +1 -1
- package/dist/chunk-7SBTYJGH.mjs +1 -0
- package/dist/chunk-A4JCC3QQ.mjs +1 -0
- package/dist/chunk-BFX2CSQ3.mjs +1 -0
- package/dist/chunk-I45LCJUP.mjs +1 -0
- package/dist/chunk-KHQ7OGQK.mjs +1 -0
- package/dist/chunk-LQBXJRFY.mjs +3 -0
- package/dist/chunk-MTEGM4RR.mjs +1 -0
- package/dist/chunk-VVFGB4RT.mjs +1 -0
- package/dist/{engine-6AXEX8CL.d.ts → engine-DQyBzZDl.d.ts} +1 -1
- package/dist/{engine-Ci08nM91.d.mts → engine-P8u6OK4m.d.mts} +1 -1
- package/dist/group/index.cjs +3 -3
- package/dist/group/index.d.mts +3 -3
- package/dist/group/index.d.ts +3 -3
- package/dist/group/index.mjs +1 -1
- package/dist/horizontal/index.cjs +1 -1
- package/dist/horizontal/index.d.mts +1 -1
- package/dist/horizontal/index.d.ts +1 -1
- package/dist/horizontal/index.mjs +1 -1
- package/dist/{index-CGR7pSOR.d.mts → index-CMqK0GCT.d.mts} +2 -2
- package/dist/{index-BDGQEK6X.d.mts → index-CdaBYn3A.d.mts} +1 -1
- package/dist/{index-DxjUOIbK.d.ts → index-D3o4vT3e.d.ts} +1 -1
- package/dist/{index-BVuNgQSd.d.ts → index-DPqPEnO-.d.ts} +2 -2
- package/dist/index.cjs +4 -4
- package/dist/index.d.mts +6 -6
- package/dist/index.d.ts +6 -6
- package/dist/index.mjs +1 -1
- package/dist/nuxt/index.cjs +3 -3
- package/dist/nuxt/index.d.mts +3 -3
- package/dist/nuxt/index.d.ts +3 -3
- package/dist/nuxt/index.mjs +1 -1
- package/dist/pin/index.cjs +1 -1
- package/dist/pin/index.mjs +1 -1
- package/dist/progress/index.cjs +1 -1
- package/dist/progress/index.d.mts +1 -1
- package/dist/progress/index.d.ts +1 -1
- package/dist/progress/index.mjs +1 -1
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.d.mts +16 -13
- package/dist/react/index.d.ts +16 -13
- package/dist/react/index.mjs +1 -1
- package/dist/reveal/index.cjs +1 -1
- package/dist/reveal/index.d.mts +1 -1
- package/dist/reveal/index.d.ts +1 -1
- package/dist/reveal/index.mjs +1 -1
- package/dist/{scroll-draw-CNlq4Z_L.d.mts → scroll-draw-Dej-GIRP.d.mts} +1 -1
- package/dist/{scroll-draw-BlJfbTDv.d.ts → scroll-draw-DsBMkwrX.d.ts} +1 -1
- package/dist/snap/index.d.mts +1 -1
- package/dist/snap/index.d.ts +1 -1
- package/dist/solid/index.cjs +3 -3
- package/dist/solid/index.d.mts +3 -3
- package/dist/solid/index.d.ts +3 -3
- package/dist/solid/index.mjs +1 -1
- package/dist/svelte/index.cjs +2 -2
- package/dist/svelte/index.d.mts +3 -3
- package/dist/svelte/index.d.ts +3 -3
- package/dist/svelte/index.mjs +1 -1
- package/dist/text/index.cjs +1 -1
- package/dist/text/index.d.mts +1 -1
- package/dist/text/index.d.ts +1 -1
- package/dist/text/index.mjs +1 -1
- package/dist/timeline/index.cjs +11 -11
- package/dist/timeline/index.d.mts +1 -1
- package/dist/timeline/index.d.ts +1 -1
- package/dist/timeline/index.mjs +4 -4
- package/dist/{types-DHU1zNEw.d.mts → types-MswK0erX.d.mts} +12 -1
- package/dist/{types-DHU1zNEw.d.ts → types-MswK0erX.d.ts} +12 -1
- package/dist/video/index.cjs +1 -1
- package/dist/video/index.d.mts +1 -1
- package/dist/video/index.d.ts +1 -1
- package/dist/video/index.mjs +1 -1
- package/dist/vue/index.cjs +3 -3
- package/dist/vue/index.d.mts +5 -83
- package/dist/vue/index.d.ts +5 -83
- package/dist/vue/index.mjs +1 -1
- package/dist/web-component/index.cjs +3 -3
- package/dist/web-component/index.mjs +1 -1
- package/package.json +2 -2
- package/dist/chunk-4MH5SQTH.mjs +0 -1
- package/dist/chunk-CTVQDBD3.mjs +0 -1
- package/dist/chunk-KBFWDHF4.mjs +0 -1
- package/dist/chunk-LINFV2GK.mjs +0 -3
- package/dist/chunk-PEFR3ZB7.mjs +0 -1
- package/dist/chunk-QJ4H2HW3.mjs +0 -1
- package/dist/chunk-SNCRC6BA.mjs +0 -1
- package/dist/chunk-TIRZOSQ4.mjs +0 -1
|
@@ -311,6 +311,59 @@ var SvgScrollDraw = (() => {
|
|
|
311
311
|
registry().delete(el);
|
|
312
312
|
}
|
|
313
313
|
|
|
314
|
+
// src/core/layout-watch.ts
|
|
315
|
+
var observer;
|
|
316
|
+
var watchers = /* @__PURE__ */ new Set();
|
|
317
|
+
var boxes = /* @__PURE__ */ new WeakMap();
|
|
318
|
+
var uses = /* @__PURE__ */ new Map();
|
|
319
|
+
var boxOf = (t) => {
|
|
320
|
+
const r = t.getBoundingClientRect();
|
|
321
|
+
return r.width + " " + r.height;
|
|
322
|
+
};
|
|
323
|
+
function above(targets) {
|
|
324
|
+
const out = /* @__PURE__ */ new Set();
|
|
325
|
+
for (let n of targets) {
|
|
326
|
+
for (; n && n !== document.body; n = n.parentElement) {
|
|
327
|
+
for (let s = n; s; s = s.previousElementSibling) out.add(s);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
return out;
|
|
331
|
+
}
|
|
332
|
+
function watchLayout(targets, onChange) {
|
|
333
|
+
if (typeof ResizeObserver === "undefined" || typeof document === "undefined") return () => {
|
|
334
|
+
};
|
|
335
|
+
const fire = () => onChange();
|
|
336
|
+
observer ?? (observer = new ResizeObserver((entries) => {
|
|
337
|
+
let moved = false;
|
|
338
|
+
for (const { target } of entries) {
|
|
339
|
+
if (boxes.get(target) !== boxOf(target)) moved = true;
|
|
340
|
+
boxes.set(target, "");
|
|
341
|
+
}
|
|
342
|
+
if (moved) watchers.forEach((w) => w());
|
|
343
|
+
}));
|
|
344
|
+
watchers.add(fire);
|
|
345
|
+
const all = above(targets);
|
|
346
|
+
[document.body, document.documentElement].forEach((t) => t && all.add(t));
|
|
347
|
+
all.forEach((t) => {
|
|
348
|
+
if (!boxes.has(t)) boxes.set(t, boxOf(t));
|
|
349
|
+
uses.set(t, (uses.get(t) ?? 0) + 1);
|
|
350
|
+
observer.observe(t);
|
|
351
|
+
});
|
|
352
|
+
return () => {
|
|
353
|
+
if (!watchers.delete(fire)) return;
|
|
354
|
+
all.forEach((t) => {
|
|
355
|
+
const n = (uses.get(t) ?? 1) - 1;
|
|
356
|
+
if (n) return void uses.set(t, n);
|
|
357
|
+
uses.delete(t);
|
|
358
|
+
observer?.unobserve(t);
|
|
359
|
+
});
|
|
360
|
+
if (!watchers.size) {
|
|
361
|
+
observer?.disconnect();
|
|
362
|
+
observer = void 0;
|
|
363
|
+
}
|
|
364
|
+
};
|
|
365
|
+
}
|
|
366
|
+
|
|
314
367
|
// src/core/engine.ts
|
|
315
368
|
var nativeUid = 0;
|
|
316
369
|
function supportsNativeTimeline() {
|
|
@@ -471,6 +524,8 @@ var SvgScrollDraw = (() => {
|
|
|
471
524
|
const originalDs = [];
|
|
472
525
|
let tStart = 0;
|
|
473
526
|
let tEnd = 0;
|
|
527
|
+
let staggerFit = stagger;
|
|
528
|
+
let tLast = 0;
|
|
474
529
|
let completed = false;
|
|
475
530
|
let started = false;
|
|
476
531
|
let rafId = 0;
|
|
@@ -505,8 +560,21 @@ var SvgScrollDraw = (() => {
|
|
|
505
560
|
const frame = measureTriggerFrame(container, scrollEl, axis);
|
|
506
561
|
return computeTriggers(frame, frame.scroll, vpSize(), startConfig, endConfig);
|
|
507
562
|
}
|
|
563
|
+
function fitStagger() {
|
|
564
|
+
const range = tEnd - tStart;
|
|
565
|
+
const gaps = paths.length - 1;
|
|
566
|
+
const s = scrollEl ?? document.documentElement;
|
|
567
|
+
const d = axis === "x" ? "Width" : "Height";
|
|
568
|
+
staggerFit = stagger;
|
|
569
|
+
if (stagger > 0 && gaps > 0 && range > 0) {
|
|
570
|
+
const room = s[`scroll${d}`] - s[`client${d}`] - 1 - tStart - range / speed;
|
|
571
|
+
if (room >= 0) staggerFit = Math.min(stagger, room / (gaps * range));
|
|
572
|
+
}
|
|
573
|
+
tLast = tEnd + gaps * staggerFit * range;
|
|
574
|
+
}
|
|
508
575
|
function cacheTriggers() {
|
|
509
576
|
({ tStart, tEnd } = measureTriggers());
|
|
577
|
+
fitStagger();
|
|
510
578
|
if (debug && IS_DEV) {
|
|
511
579
|
destroyDebugOverlay();
|
|
512
580
|
debugOverlay = createDebugOverlay(tStart, tEnd, axis);
|
|
@@ -839,7 +907,7 @@ var SvgScrollDraw = (() => {
|
|
|
839
907
|
resetPaths();
|
|
840
908
|
rafId = requestAnimationFrame(tick);
|
|
841
909
|
}
|
|
842
|
-
const
|
|
910
|
+
const observer3 = new IntersectionObserver(
|
|
843
911
|
(entries) => {
|
|
844
912
|
entries.forEach((e) => {
|
|
845
913
|
if (e.isIntersecting && !(once && completed)) {
|
|
@@ -865,13 +933,13 @@ var SvgScrollDraw = (() => {
|
|
|
865
933
|
}
|
|
866
934
|
window.addEventListener("resize", onResize2);
|
|
867
935
|
window.addEventListener("orientationchange", onResize2);
|
|
868
|
-
if (delay > 0) setTimeout(() =>
|
|
869
|
-
else
|
|
936
|
+
if (delay > 0) setTimeout(() => observer3.observe(container), delay);
|
|
937
|
+
else observer3.observe(container);
|
|
870
938
|
return {
|
|
871
939
|
destroy() {
|
|
872
940
|
cancelAnimationFrame(rafId);
|
|
873
941
|
clearTimeout(repeatTimer);
|
|
874
|
-
|
|
942
|
+
observer3.disconnect();
|
|
875
943
|
window.removeEventListener("resize", onResize2);
|
|
876
944
|
window.removeEventListener("orientationchange", onResize2);
|
|
877
945
|
clearTimeout(resizeTimer2);
|
|
@@ -918,11 +986,11 @@ var SvgScrollDraw = (() => {
|
|
|
918
986
|
if (autoplay) return tracked(buildAutoplay());
|
|
919
987
|
cacheTriggers();
|
|
920
988
|
function update() {
|
|
921
|
-
if (
|
|
989
|
+
if (paused || !looping) return;
|
|
922
990
|
const now = performance.now();
|
|
923
991
|
const currentScroll = scrollPos();
|
|
924
992
|
if (!dirty && velocityScale === false && currentScroll === lastAppliedScroll) {
|
|
925
|
-
|
|
993
|
+
next(currentScroll);
|
|
926
994
|
return;
|
|
927
995
|
}
|
|
928
996
|
dirty = false;
|
|
@@ -979,16 +1047,15 @@ var SvgScrollDraw = (() => {
|
|
|
979
1047
|
} else if (alpha < 1 && !once) {
|
|
980
1048
|
completed = false;
|
|
981
1049
|
}
|
|
982
|
-
|
|
1050
|
+
next(currentScroll);
|
|
983
1051
|
return;
|
|
984
1052
|
}
|
|
985
1053
|
paths.forEach((el, i) => {
|
|
986
|
-
const offset = i *
|
|
1054
|
+
const offset = i * staggerFit * range;
|
|
987
1055
|
let alpha = easeFn(computeProgress(currentScroll, tStart + offset, tEnd + offset, effectiveSpeed));
|
|
988
1056
|
if (once && !autoReverse) {
|
|
989
1057
|
alpha = frozenPath[i] = Math.max(frozenPath[i] ?? frozenAlpha, alpha);
|
|
990
1058
|
}
|
|
991
|
-
currentAlpha = alpha;
|
|
992
1059
|
el.style.strokeDashoffset = effectiveDir === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
|
|
993
1060
|
if (fade) el.style.opacity = effectiveDir === "reverse" ? `${1 - alpha}` : `${alpha}`;
|
|
994
1061
|
if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
|
|
@@ -1004,6 +1071,7 @@ var SvgScrollDraw = (() => {
|
|
|
1004
1071
|
if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
|
|
1005
1072
|
el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
|
|
1006
1073
|
if (i === 0) {
|
|
1074
|
+
currentAlpha = alpha;
|
|
1007
1075
|
onProgress?.(alpha);
|
|
1008
1076
|
container.style.setProperty("--scroll-draw-progress", String(alpha));
|
|
1009
1077
|
}
|
|
@@ -1042,7 +1110,14 @@ var SvgScrollDraw = (() => {
|
|
|
1042
1110
|
} else if (!allComplete && !once) {
|
|
1043
1111
|
completed = false;
|
|
1044
1112
|
}
|
|
1045
|
-
|
|
1113
|
+
next(currentScroll);
|
|
1114
|
+
}
|
|
1115
|
+
function inStaggerTail(scroll) {
|
|
1116
|
+
return scroll >= tEnd && scroll < tLast;
|
|
1117
|
+
}
|
|
1118
|
+
function next(scroll) {
|
|
1119
|
+
if (isVisible || inStaggerTail(scroll)) rafId = requestAnimationFrame(update);
|
|
1120
|
+
else looping = false;
|
|
1046
1121
|
}
|
|
1047
1122
|
let looping = false;
|
|
1048
1123
|
function startLoop() {
|
|
@@ -1056,14 +1131,14 @@ var SvgScrollDraw = (() => {
|
|
|
1056
1131
|
looping = false;
|
|
1057
1132
|
cancelAnimationFrame(rafId);
|
|
1058
1133
|
}
|
|
1059
|
-
const
|
|
1134
|
+
const observer2 = new IntersectionObserver(
|
|
1060
1135
|
(entries) => {
|
|
1061
1136
|
entries.forEach((e) => {
|
|
1062
1137
|
isVisible = e.isIntersecting;
|
|
1063
1138
|
if (isVisible && !paused) {
|
|
1064
1139
|
dirty = true;
|
|
1065
1140
|
startLoop();
|
|
1066
|
-
} else {
|
|
1141
|
+
} else if (!(looping && !paused && inStaggerTail(scrollPos()))) {
|
|
1067
1142
|
stopLoop();
|
|
1068
1143
|
}
|
|
1069
1144
|
});
|
|
@@ -1085,22 +1160,16 @@ var SvgScrollDraw = (() => {
|
|
|
1085
1160
|
}
|
|
1086
1161
|
window.addEventListener("resize", onResize);
|
|
1087
1162
|
window.addEventListener("orientationchange", onResize);
|
|
1088
|
-
|
|
1089
|
-
if (
|
|
1090
|
-
|
|
1091
|
-
layoutObserver.observe(document.body);
|
|
1092
|
-
layoutObserver.observe(document.documentElement);
|
|
1093
|
-
layoutObserver.observe(container);
|
|
1094
|
-
}
|
|
1095
|
-
if (delay > 0) setTimeout(() => observer.observe(container), delay);
|
|
1096
|
-
else observer.observe(container);
|
|
1163
|
+
const unwatch = watchLayout([container], onResize);
|
|
1164
|
+
if (delay > 0) setTimeout(() => observer2.observe(container), delay);
|
|
1165
|
+
else observer2.observe(container);
|
|
1097
1166
|
return tracked({
|
|
1098
1167
|
destroy() {
|
|
1099
1168
|
cancelAnimationFrame(rafId);
|
|
1100
1169
|
clearTimeout(repeatTimer);
|
|
1101
1170
|
stopLoop();
|
|
1102
|
-
|
|
1103
|
-
|
|
1171
|
+
observer2.disconnect();
|
|
1172
|
+
unwatch();
|
|
1104
1173
|
window.removeEventListener("resize", onResize);
|
|
1105
1174
|
window.removeEventListener("orientationchange", onResize);
|
|
1106
1175
|
clearTimeout(resizeTimer);
|
|
@@ -1361,6 +1430,9 @@ var SvgScrollDraw = (() => {
|
|
|
1361
1430
|
getTrigger: liveTriggers
|
|
1362
1431
|
});
|
|
1363
1432
|
const instance = {
|
|
1433
|
+
// The view() timeline measures the element every frame.
|
|
1434
|
+
refresh() {
|
|
1435
|
+
},
|
|
1364
1436
|
destroy() {
|
|
1365
1437
|
el.classList.remove(cls);
|
|
1366
1438
|
style.remove();
|
|
@@ -1413,9 +1485,23 @@ var SvgScrollDraw = (() => {
|
|
|
1413
1485
|
if (scrollEl) return axis === "x" ? scrollEl.clientWidth : scrollEl.clientHeight;
|
|
1414
1486
|
return axis === "x" ? window.innerWidth : window.innerHeight;
|
|
1415
1487
|
};
|
|
1488
|
+
const moving = triggerEl === el ? entries : [];
|
|
1489
|
+
let measured = false;
|
|
1416
1490
|
function cacheTriggers() {
|
|
1491
|
+
const style = el.style;
|
|
1492
|
+
const held = moving.map((e) => style.getPropertyValue(e.prop));
|
|
1493
|
+
const transition = style.transition;
|
|
1494
|
+
if (moving.length) style.transition = "none";
|
|
1495
|
+
moving.forEach((e) => style.setProperty(e.prop, savedInline.get(e.prop) ?? ""));
|
|
1417
1496
|
const frame = measureTriggerFrame(triggerEl, scrollEl, axis);
|
|
1497
|
+
moving.forEach((e, i) => style.setProperty(e.prop, held[i]));
|
|
1498
|
+
if (moving.length) {
|
|
1499
|
+
void el.offsetWidth;
|
|
1500
|
+
style.transition = transition;
|
|
1501
|
+
}
|
|
1418
1502
|
const result = computeTriggers(frame, frame.scroll, vpSize(), startConfig, endConfig);
|
|
1503
|
+
if (measured && Math.abs(result.tStart - tStart) < 1 && Math.abs(result.tEnd - tEnd) < 1) return;
|
|
1504
|
+
measured = true;
|
|
1419
1505
|
tStart = result.tStart;
|
|
1420
1506
|
tEnd = result.tEnd;
|
|
1421
1507
|
}
|
|
@@ -1480,7 +1566,7 @@ var SvgScrollDraw = (() => {
|
|
|
1480
1566
|
currentAlpha = initAlpha;
|
|
1481
1567
|
applyAlpha(initAlpha);
|
|
1482
1568
|
}
|
|
1483
|
-
const
|
|
1569
|
+
const observer2 = new IntersectionObserver(
|
|
1484
1570
|
(ioEntries) => {
|
|
1485
1571
|
ioEntries.forEach((e) => {
|
|
1486
1572
|
isVisible = e.isIntersecting;
|
|
@@ -1497,7 +1583,8 @@ var SvgScrollDraw = (() => {
|
|
|
1497
1583
|
}
|
|
1498
1584
|
window.addEventListener("resize", onResize);
|
|
1499
1585
|
window.addEventListener("orientationchange", onResize);
|
|
1500
|
-
|
|
1586
|
+
const unwatch = watchLayout([triggerEl], onResize);
|
|
1587
|
+
observer2.observe(el);
|
|
1501
1588
|
_register(el, {
|
|
1502
1589
|
type: "animate",
|
|
1503
1590
|
getProgress: () => currentAlpha,
|
|
@@ -1506,9 +1593,10 @@ var SvgScrollDraw = (() => {
|
|
|
1506
1593
|
return {
|
|
1507
1594
|
destroy() {
|
|
1508
1595
|
cancelAnimationFrame(rafId);
|
|
1509
|
-
|
|
1596
|
+
observer2.disconnect();
|
|
1510
1597
|
window.removeEventListener("resize", onResize);
|
|
1511
1598
|
window.removeEventListener("orientationchange", onResize);
|
|
1599
|
+
unwatch();
|
|
1512
1600
|
clearTimeout(resizeTimer);
|
|
1513
1601
|
restoreInline();
|
|
1514
1602
|
_unregister(el);
|
|
@@ -1539,6 +1627,9 @@ var SvgScrollDraw = (() => {
|
|
|
1539
1627
|
},
|
|
1540
1628
|
getProgress() {
|
|
1541
1629
|
return currentAlpha;
|
|
1630
|
+
},
|
|
1631
|
+
refresh() {
|
|
1632
|
+
cacheTriggers();
|
|
1542
1633
|
}
|
|
1543
1634
|
};
|
|
1544
1635
|
}
|
|
@@ -1574,16 +1665,23 @@ var SvgScrollDraw = (() => {
|
|
|
1574
1665
|
return NOOP;
|
|
1575
1666
|
}
|
|
1576
1667
|
const { speed = 0.3, axis = "y", easing = "linear", trigger, onProgress } = options;
|
|
1577
|
-
const
|
|
1578
|
-
const
|
|
1579
|
-
const
|
|
1580
|
-
|
|
1581
|
-
|
|
1668
|
+
const travel = -speed * 100;
|
|
1669
|
+
const style = el.style;
|
|
1670
|
+
const svg = !!el.ownerSVGElement;
|
|
1671
|
+
const box = style.getPropertyValue("transform-box");
|
|
1672
|
+
if (svg) style.setProperty("transform-box", "fill-box");
|
|
1673
|
+
const inst = createAnimateEngine(el, {
|
|
1674
|
+
props: axis === "x" ? { transform: [`translateX(0%)`, `translateX(${travel}%)`] } : { transform: [`translateY(0%)`, `translateY(${travel}%)`] },
|
|
1582
1675
|
trigger: trigger ?? { start: "top bottom", end: "bottom top" },
|
|
1583
1676
|
easing,
|
|
1584
1677
|
native: false,
|
|
1585
1678
|
onProgress
|
|
1586
1679
|
});
|
|
1680
|
+
if (!svg) return inst;
|
|
1681
|
+
return { ...inst, destroy() {
|
|
1682
|
+
inst.destroy();
|
|
1683
|
+
style.setProperty("transform-box", box);
|
|
1684
|
+
} };
|
|
1587
1685
|
}
|
|
1588
1686
|
|
|
1589
1687
|
// src/counter/index.ts
|
|
@@ -1630,6 +1728,7 @@ var SvgScrollDraw = (() => {
|
|
|
1630
1728
|
}
|
|
1631
1729
|
let tStart = 0;
|
|
1632
1730
|
let tEnd = 0;
|
|
1731
|
+
let measured = false;
|
|
1633
1732
|
let rafId = 0;
|
|
1634
1733
|
let isVisible = false;
|
|
1635
1734
|
let paused = false;
|
|
@@ -1647,6 +1746,8 @@ var SvgScrollDraw = (() => {
|
|
|
1647
1746
|
startConfig,
|
|
1648
1747
|
endConfig
|
|
1649
1748
|
);
|
|
1749
|
+
if (measured && Math.abs(result.tStart - tStart) < 1 && Math.abs(result.tEnd - tEnd) < 1) return;
|
|
1750
|
+
measured = true;
|
|
1650
1751
|
tStart = result.tStart;
|
|
1651
1752
|
tEnd = result.tEnd;
|
|
1652
1753
|
}
|
|
@@ -1678,7 +1779,7 @@ var SvgScrollDraw = (() => {
|
|
|
1678
1779
|
currentAlpha = initAlpha;
|
|
1679
1780
|
applyAlpha(initAlpha);
|
|
1680
1781
|
}
|
|
1681
|
-
const
|
|
1782
|
+
const observer2 = new IntersectionObserver(
|
|
1682
1783
|
(entries) => {
|
|
1683
1784
|
entries.forEach((e) => {
|
|
1684
1785
|
isVisible = e.isIntersecting;
|
|
@@ -1694,7 +1795,8 @@ var SvgScrollDraw = (() => {
|
|
|
1694
1795
|
}
|
|
1695
1796
|
window.addEventListener("resize", onResize);
|
|
1696
1797
|
window.addEventListener("orientationchange", onResize);
|
|
1697
|
-
|
|
1798
|
+
const unwatch = watchLayout([el], onResize);
|
|
1799
|
+
observer2.observe(el);
|
|
1698
1800
|
_register(el, {
|
|
1699
1801
|
type: "counter",
|
|
1700
1802
|
getProgress: () => currentAlpha,
|
|
@@ -1703,9 +1805,10 @@ var SvgScrollDraw = (() => {
|
|
|
1703
1805
|
return {
|
|
1704
1806
|
destroy() {
|
|
1705
1807
|
cancelAnimationFrame(rafId);
|
|
1706
|
-
|
|
1808
|
+
observer2.disconnect();
|
|
1707
1809
|
window.removeEventListener("resize", onResize);
|
|
1708
1810
|
window.removeEventListener("orientationchange", onResize);
|
|
1811
|
+
unwatch();
|
|
1709
1812
|
clearTimeout(resizeTimer);
|
|
1710
1813
|
_unregister(el);
|
|
1711
1814
|
},
|
|
@@ -1867,7 +1970,7 @@ var SvgScrollDraw = (() => {
|
|
|
1867
1970
|
running = false;
|
|
1868
1971
|
cancelAnimationFrame(rafId);
|
|
1869
1972
|
};
|
|
1870
|
-
const
|
|
1973
|
+
const observer2 = new IntersectionObserver(
|
|
1871
1974
|
(entries) => {
|
|
1872
1975
|
for (const e of entries) {
|
|
1873
1976
|
visible = e.isIntersecting;
|
|
@@ -1877,7 +1980,7 @@ var SvgScrollDraw = (() => {
|
|
|
1877
1980
|
},
|
|
1878
1981
|
{ threshold: 0 }
|
|
1879
1982
|
);
|
|
1880
|
-
|
|
1983
|
+
observer2.observe(stage);
|
|
1881
1984
|
progress = computeProgress2();
|
|
1882
1985
|
apply(progress);
|
|
1883
1986
|
_register(mount, {
|
|
@@ -1891,7 +1994,7 @@ var SvgScrollDraw = (() => {
|
|
|
1891
1994
|
return {
|
|
1892
1995
|
destroy() {
|
|
1893
1996
|
stop();
|
|
1894
|
-
|
|
1997
|
+
observer2.disconnect();
|
|
1895
1998
|
_unregister(mount);
|
|
1896
1999
|
},
|
|
1897
2000
|
getProgress: () => progress
|
|
@@ -1901,12 +2004,32 @@ var SvgScrollDraw = (() => {
|
|
|
1901
2004
|
|
|
1902
2005
|
// src/web-component/index.ts
|
|
1903
2006
|
if (typeof HTMLElement !== "undefined" && typeof customElements !== "undefined" && !customElements.get("scroll-draw")) {
|
|
2007
|
+
const OPTIONS = ["speed", "easing", "stagger", "direction", "selector", "fade", "once"];
|
|
1904
2008
|
class ScrollDrawElement extends HTMLElement {
|
|
1905
2009
|
constructor() {
|
|
1906
2010
|
super(...arguments);
|
|
1907
2011
|
this.instance = null;
|
|
2012
|
+
/** The option attributes the running engine was built from. */
|
|
2013
|
+
this.key = "";
|
|
1908
2014
|
}
|
|
1909
2015
|
connectedCallback() {
|
|
2016
|
+
this.build();
|
|
2017
|
+
}
|
|
2018
|
+
/**
|
|
2019
|
+
* An option changed after connect. The element read its attributes once, so
|
|
2020
|
+
* setting `speed` or `easing` later did nothing; the other wrappers rebuild on
|
|
2021
|
+
* a real change since 2.17.0. Called for every parsed attribute before connect
|
|
2022
|
+
* too — those are read in connectedCallback — and for an equal setAttribute,
|
|
2023
|
+
* which build() ignores.
|
|
2024
|
+
*/
|
|
2025
|
+
attributeChangedCallback() {
|
|
2026
|
+
if (this.instance) this.build();
|
|
2027
|
+
}
|
|
2028
|
+
build() {
|
|
2029
|
+
const key = JSON.stringify(OPTIONS.map((a) => this.getAttribute(a)));
|
|
2030
|
+
if (this.instance && key === this.key) return;
|
|
2031
|
+
this.instance?.destroy();
|
|
2032
|
+
this.key = key;
|
|
1910
2033
|
const opts = {};
|
|
1911
2034
|
const speed = this.getAttribute("speed");
|
|
1912
2035
|
const easing = this.getAttribute("easing");
|
|
@@ -1927,6 +2050,7 @@ var SvgScrollDraw = (() => {
|
|
|
1927
2050
|
this.instance = null;
|
|
1928
2051
|
}
|
|
1929
2052
|
}
|
|
2053
|
+
ScrollDrawElement.observedAttributes = OPTIONS;
|
|
1930
2054
|
customElements.define("scroll-draw", ScrollDrawElement);
|
|
1931
2055
|
}
|
|
1932
2056
|
return __toCommonJS(cdn_exports);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";var SvgScrollDraw=(()=>{var
|
|
2
|
-
<div style="position:absolute;${c?`left:${
|
|
3
|
-
<div style="position:absolute;${c?`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(n),window.addEventListener("scroll",i,{passive:!0}),i(),{el:n,destroy(){window.removeEventListener("scroll",i),n.remove()}}}var Rt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Ft=/[MmLlHhVvCcSsQqTtAaZz]/g;function cr(e,t,r){if(!!1)return;let n=(e.match(Ft)??[]).join("").toUpperCase(),i=(t.match(Ft)??[]).join("").toUpperCase(),a=(e.match(Rt)??[]).length,f=(t.match(Rt)??[]).length;if(n!==i){j(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${i||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}a!==f&&j(`morphTo: coordinate count differs (${a} \u2192 ${f}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r)}function ft(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,a=>{let f=parseFloat(a),m=n[i++]??f;return String(+(f+(m-f)*r).toFixed(4))})}function et(e,t={}){if(typeof window>"u")return{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...n}=t,i=r?{...Ke[r],...n}:n,a=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:f="path, polyline, line, polygon, rect, circle",speed:m=1,fade:c=!1,easing:p="linear",trigger:x={},stagger:I=0,direction:T="forward",once:J=!1,debug:Ee=!1,axis:S="y",scrollContainer:$,autoReverse:g=!1,delay:E=0,strokeColor:b,strokeWidth:z,fillOpacity:F,waypoints:G,velocityScale:ee=!1,threshold:de=0,rootMargin:Y="0px",repeat:q=0,repeatDelay:ke=0,morphTo:N,clip:ge,autoplay:Le=!1,duration:Ce=1e3,native:De=!0,onProgress:w,onStart:P,onComplete:ne,onEnter:ye,onLeave:He,onEnterBack:he,onLeaveBack:xe}=i,te=ge===!0?"left":typeof ge=="string"?ge:!1,ce=typeof p=="function"?p:K[p]??K.linear,be=$e(x.start??"top bottom"),_e=$e(x.end??"bottom top"),ae=typeof $=="string"?document.querySelector($):$??null,le=Array.isArray(b)?b[0]:null,U=Array.isArray(b)?b[1]:typeof b=="string"?b:null,X=Array.isArray(z)?z[0]:null,H=Array.isArray(z)?z[1]:typeof z=="number"?z:null,re=Array.isArray(F)?F[0]:null,W=Array.isArray(F)?F[1]:typeof F=="number"?F:null;function we(o){let l=o*100;switch(te){case"right":return`inset(0 0 0 ${100-l}%)`;case"top":return`inset(0 0 ${100-l}% 0)`;case"bottom":return`inset(${100-l}% 0 0 0)`;case"center":return`circle(${o*150}% at 50% 50%)`;default:return`inset(0 ${100-l}% 0 0)`}}let C=te?[]:Array.from(e.querySelectorAll(f)),A=[],s=[],u=0,oe=0,k=!1,D=!1,O=0,fe=!1,ue=-1,B=[],Ie=-1,_=!1,ve=0,Ae=0,Oe,ot=null;function ht(){ot?.destroy(),ot=null}let Re=new Set,bt=NaN,Fe=!0,Ge=-1,wt=performance.now(),Ve=NaN;function st(){return ae?S==="x"?ae.scrollLeft:ae.scrollTop:S==="x"?window.scrollX:window.scrollY}function vt(){return ae?S==="x"?ae.clientWidth:ae.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function St(){let o=Ze(e,ae,S);return Ne(o,o.scroll,vt(),be,_e)}function Et(){({tStart:u,tEnd:oe}=St()),Ee&&!1&&(ht(),ot=lr(u,oe,S))}function it(o,l=St){Me(e,{type:"draw",getProgress:()=>o.getProgress(),getTrigger:l});let h=o.destroy;return o.destroy=()=>{h.call(o),Pe(e)},o}function Gt(o,l){if(e.style.setProperty("--scroll-draw-progress",String(o)),te){let h=l==="reverse"?1-o:o;e.style.clipPath=we(h);return}C.forEach((h,Q)=>{h.style.strokeDashoffset=l==="reverse"?`${A[Q]*o}`:`${A[Q]*(1-o)}`,c&&(h.style.opacity=l==="reverse"?`${1-o}`:`${o}`),le&&U?h.style.stroke=qe(le,U,o):U&&(h.style.stroke=U),X!==null&&H!==null?h.style.strokeWidth=`${X+(H-X)*o}`:H!==null&&(h.style.strokeWidth=`${H}`),re!==null&&W!==null?h.style.fillOpacity=`${re+(W-re)*o}`:W!==null&&(h.style.fillOpacity=`${W}`),N&&h.tagName.toLowerCase()==="path"&&s[Q]&&h.setAttribute("d",ft(s[Q],N,o))})}function je(){if(e.style.setProperty("--scroll-draw-progress","0"),te){e.style.clipPath=we(0);return}C.forEach((o,l)=>{o.style.strokeDasharray=`${A[l]}`,o.style.strokeDashoffset=T==="reverse"?"0":`${A[l]}`,c?o.style.opacity=T==="reverse"?"1":"0":o.style.opacity="",le&&(o.style.stroke=le),X!==null&&(o.style.strokeWidth=`${X}`),re!==null&&(o.style.fillOpacity=`${re}`),N&&o.tagName.toLowerCase()==="path"&&s[l]&&o.setAttribute("d",s[l])})}if(C.forEach(o=>{ar(o);let l=ze(o);A.push(l);let h=o.tagName.toLowerCase()==="path";h?s.push(o.getAttribute("d")??""):s.push(""),N&&(h?cr(s[s.length-1],N,o):j(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),a?(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=T==="reverse"?`${l}`:"0",c&&(o.style.opacity="1"),U&&(o.style.stroke=U),H!==null&&(o.style.strokeWidth=`${H}`),W!==null&&(o.style.fillOpacity=`${W}`),N&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",N)):(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=T==="reverse"?"0":`${l}`,c?o.style.opacity=T==="reverse"?"1":"0":o.style.opacity="",le&&(o.style.stroke=le),X!==null&&(o.style.strokeWidth=`${X}`),re!==null&&(o.style.fillOpacity=`${re}`))}),te){if(a)return e.style.clipPath=we(1),ne?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=we(0)}else if(a)return ne?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let xt=typeof p=="string"?Je(p):null;function jt(){return!(De===!1||!ir()||!C.length||!xt||te||S!=="y"||ae||m!==1||I!==0||J||g||ee!==!1||N||G||q||E>0||w||P||ne||ye||He||he||xe||b!=null||z!=null||F!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function Yt(){let o=++sr,l=`svg-scroll-draw-${o}`,h=`svg-scroll-draw-host-${o}`,Q=`--svg-scroll-draw-${o}`,Te=T==="reverse"?"0":"var(--ssd-len)",Se=T==="reverse"?"var(--ssd-len)":"0",pe=`stroke-dashoffset:${Te};`,v=`stroke-dashoffset:${Se};`;c&&(pe+=`opacity:${T==="reverse"?1:0};`,v+=`opacity:${T==="reverse"?0:1};`);let M=document.createElement("style");M.setAttribute("data-svg-scroll-draw",""),M.textContent=`@keyframes ${l}{from{${pe}}to{${v}}}.${h}{view-timeline-name:${Q};view-timeline-axis:block;}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${xt};animation-fill-mode:both;animation-timeline:${Q};animation-range:cover 0% cover 100%;}`,document.head.appendChild(M),e.classList.add(h);function Z(d,V){d.style.setProperty("--ssd-len",String(A[V])),d.style.strokeDasharray=`${A[V]}`,d.style.strokeDashoffset="",d.style.opacity="",d.style.animationPlayState="",d.classList.add(l)}C.forEach(Z);let y=!1,L=-1;function R(){if(L>=0)return L;let d=e.getBoundingClientRect(),{tStart:V,tEnd:me}=Ne({top:d.top,height:d.height},st(),vt(),be,_e);return ce(ie(st(),V,me,m))}return{destroy(){e.classList.remove(h),C.forEach(d=>{d.classList.remove(l),d.style.removeProperty("--ssd-len"),d.style.animationPlayState=""}),M.remove()},replay(){y=!1,L=-1,C.forEach(Z)},pause(){y=!0,C.forEach(d=>{d.style.animationPlayState="paused"})},resume(){y&&(y=!1,C.forEach(d=>{d.style.animationPlayState="running"}))},seek(d){let V=Math.min(1,Math.max(0,d));L=V,y=!0,C.forEach((me,se)=>{me.classList.remove(l),me.style.strokeDashoffset=T==="reverse"?`${A[se]*V}`:`${A[se]*(1-V)}`,c&&(me.style.opacity=T==="reverse"?`${1-V}`:`${V}`)})},getProgress(){return R()},refresh(){C.forEach((d,V)=>{A[V]=ze(d),d.style.setProperty("--ssd-len",String(A[V])),d.style.strokeDasharray=`${A[V]}`})}}}if(jt())return it(Yt());function Ut(){let o=Math.max(1,Ce),l=0,h=0,Q=!1;function Te(y){let L=!0;if(te){let R=Math.min(1,Math.max(0,y/o)),d=ce(R);ve=d,e.style.setProperty("--scroll-draw-progress",String(d)),e.style.clipPath=we(T==="reverse"?1-d:d),w?.(d),R<1&&(L=!1)}else C.forEach((R,d)=>{let V=d*I*o,me=Math.min(1,Math.max(0,(y-V)/o)),se=ce(me);R.style.strokeDashoffset=T==="reverse"?`${A[d]*se}`:`${A[d]*(1-se)}`,c&&(R.style.opacity=T==="reverse"?`${1-se}`:`${se}`),le&&U?R.style.stroke=qe(le,U,se):U&&(R.style.stroke=U),X!==null&&H!==null?R.style.strokeWidth=`${X+(H-X)*se}`:H!==null&&(R.style.strokeWidth=`${H}`),re!==null&&W!==null?R.style.fillOpacity=`${re+(W-re)*se}`:W!==null&&(R.style.fillOpacity=`${W}`),N&&R.tagName.toLowerCase()==="path"&&s[d]&&R.setAttribute("d",ft(s[d],N,se)),d===0&&(ve=se,w?.(se),e.style.setProperty("--scroll-draw-progress",String(se))),me<1&&(L=!1)});if(G){let R=Math.min(1,Math.max(0,y/o)),d=ce(R);for(let V in G){let me=parseFloat(V);d>=me&&!Re.has(me)&&(Re.add(me),G[V]?.())}}return L}function Se(y){if(_)return;let L=y-l;D||(D=!0,P?.());let R=Te(L);if(R&&!k){k=!0,Te(o*(1+Math.max(0,C.length-1)*I)),ne?.(),Ae<(q==="infinite"?1/0:q??0)&&(Ae++,Oe=setTimeout(()=>{l=performance.now(),D=!1,k=!1,Re.clear(),je(),O=requestAnimationFrame(Se)},ke));return}R||(O=requestAnimationFrame(Se))}function pe(){cancelAnimationFrame(O),clearTimeout(Oe),l=performance.now(),h=0,_=!1,D=!1,k=!1,Ae=0,Q=!0,ve=0,Re.clear(),je(),O=requestAnimationFrame(Se)}let v=new IntersectionObserver(y=>{y.forEach(L=>{L.isIntersecting&&!(J&&k)?pe():!L.isIntersecting&&!J&&!k&&(cancelAnimationFrame(O),clearTimeout(Oe),Q=!1)})},{root:ae??null,threshold:de,rootMargin:Y}),M;function Z(){clearTimeout(M),M=setTimeout(()=>{C.forEach((y,L)=>{A[L]=ze(y),y.style.strokeDasharray=`${A[L]}`})},150)}return window.addEventListener("resize",Z),window.addEventListener("orientationchange",Z),E>0?setTimeout(()=>v.observe(e),E):v.observe(e),{destroy(){cancelAnimationFrame(O),clearTimeout(Oe),v.disconnect(),window.removeEventListener("resize",Z),window.removeEventListener("orientationchange",Z),clearTimeout(M)},replay(){Ae=0,pe()},pause(){_||!Q||(_=!0,h=performance.now()-l,cancelAnimationFrame(O))},resume(){_&&(_=!1,Q=!0,l=performance.now()-h,O=requestAnimationFrame(Se))},seek(y){let L=Math.min(1,Math.max(0,y));ve=L,_=!0,h=L*o,l=performance.now()-h,cancelAnimationFrame(O),Te(h)},getProgress(){return ve},refresh(){clearTimeout(M),C.forEach((y,L)=>{A[L]=ze(y),y.style.strokeDasharray=`${A[L]}`})}}}if(Le)return it(Ut());Et();function Ye(){if(!fe||_)return;let o=performance.now(),l=st();if(!Fe&&ee===!1&&l===bt){O=requestAnimationFrame(Ye);return}Fe=!1,bt=l;let h=m;if(ee!==!1){let v=o-wt,M=v>0?Math.abs(l-(Ge<0?l:Ge))/v:0;h=m*Math.max(.2,1+M*(typeof ee=="number"?ee:1)*.04)}Ge=l,wt=o;let Q=g?Ie===-1||l>=Ie?"forward":"reverse":T;Ie=l;let Te=oe-u,Se=!0,pe=Te===0?0:(l-u)/Te;if(isNaN(Ve)||(Ve<=0&&pe>0?ye?.():Ve>0&&pe<=0&&xe?.(),Ve<1&&pe>=1?He?.():Ve>=1&&pe<1&&he?.()),Ve=pe,te){let v=ce(ie(l,u,oe,h));J&&!g&&(ue=Math.max(ue,v),v=ue),ve=v,e.style.setProperty("--scroll-draw-progress",String(v));let M=Q==="reverse"?1-v:v;e.style.clipPath=we(M),w?.(v),!D&&ie(l,u,oe,h)>0&&(D=!0,P?.()),v>=1&&!k?(k=!0,ne?.(),Ae<(q==="infinite"?1/0:q??0)&&(Ae++,Oe=setTimeout(()=>{ue=-1,D=!1,k=!1,e.style.clipPath=we(0)},ke))):v<1&&!J&&(k=!1),O=requestAnimationFrame(Ye);return}if(C.forEach((v,M)=>{let Z=M*I*Te,y=ce(ie(l,u+Z,oe+Z,h));J&&!g&&(y=B[M]=Math.max(B[M]??ue,y)),ve=y,v.style.strokeDashoffset=Q==="reverse"?`${A[M]*y}`:`${A[M]*(1-y)}`,c&&(v.style.opacity=Q==="reverse"?`${1-y}`:`${y}`),le&&U?v.style.stroke=qe(le,U,y):U&&(v.style.stroke=U),X!==null&&H!==null?v.style.strokeWidth=`${X+(H-X)*y}`:H!==null&&(v.style.strokeWidth=`${H}`),re!==null&&W!==null?v.style.fillOpacity=`${re+(W-re)*y}`:W!==null&&(v.style.fillOpacity=`${W}`),N&&v.tagName.toLowerCase()==="path"&&s[M]&&v.setAttribute("d",ft(s[M],N,y)),M===0&&(w?.(y),e.style.setProperty("--scroll-draw-progress",String(y))),y<1&&(Se=!1)}),G){let v=ce(ie(l,u,oe,h));for(let M in G){let Z=parseFloat(M);v>=Z&&!Re.has(Z)&&(Re.add(Z),G[M]?.())}}!D&&ie(l,u,oe,h)>0&&(D=!0,P?.()),Se&&!k?(k=!0,ne?.(),Ae<(q==="infinite"?1/0:q??0)&&(Ae++,Oe=setTimeout(()=>{ue=-1,B=[],D=!1,k=!1,Re.clear(),je(),Fe=!0},ke))):!Se&&!J&&(k=!1),O=requestAnimationFrame(Ye)}let at=!1;function Ue(){at||(at=!0,O=requestAnimationFrame(function(){Ye()}))}function Xe(){at=!1,cancelAnimationFrame(O)}let lt=new IntersectionObserver(o=>{o.forEach(l=>{fe=l.isIntersecting,fe&&!_?(Fe=!0,Ue()):Xe()})},{root:ae??null,threshold:de,rootMargin:Y});function At(){C.forEach((o,l)=>{A[l]=ze(o),o.style.strokeDasharray=`${A[l]}`}),Et(),Fe=!0}let Qe;function We(){clearTimeout(Qe),Qe=setTimeout(At,150)}window.addEventListener("resize",We),window.addEventListener("orientationchange",We);let Be;return typeof ResizeObserver<"u"&&(Be=new ResizeObserver(()=>We()),Be.observe(document.body),Be.observe(document.documentElement),Be.observe(e)),E>0?setTimeout(()=>lt.observe(e),E):lt.observe(e),it({destroy(){cancelAnimationFrame(O),clearTimeout(Oe),Xe(),lt.disconnect(),Be?.disconnect(),window.removeEventListener("resize",We),window.removeEventListener("orientationchange",We),clearTimeout(Qe),ht()},replay(){ue=-1,B=[],Ie=-1,Ge=-1,D=!1,k=!1,Ae=0,_=!1,ve=0,Re.clear(),clearTimeout(Oe),je(),Fe=!0,fe&&Ue()},pause(){_=!0,Xe()},resume(){_&&(_=!1,Fe=!0,fe&&Ue())},seek(o){let l=Math.min(1,Math.max(0,o));ve=l,ue=l,B=[],_=!0,Xe(),Gt(l,T),Fe=!0},getProgress(){return ve},refresh(){clearTimeout(Qe),At(),fe&&!_&&Ue()}},()=>({tStart:u,tEnd:oe}))}function Nt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let n=typeof e=="string"?document.querySelector(e):e;return n?et(n,t):(j("Container not found:",e),r)}function ur(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Ht(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let i=[],a=[],f=n[2].trim();if(f)for(let m of f.split(/[\s,]+/)){let c=m.match(/^([-+]?[\d.eE]+)(.*)$/);i.push(c?parseFloat(c[1]):0),a.push(c?c[2]:"")}t.push({fn:n[1],nums:i,units:a})}return t}function mr(e,t,r){let n=Ht(e),i=Ht(t);return n.length===0||n.length!==i.length?r<1?e:t:n.map((a,f)=>{let m=i[f];return a.fn!==m.fn||a.nums.length!==m.nums.length?r<1?`${a.fn}(${a.nums.map((c,p)=>`${c}${a.units[p]}`).join(", ")})`:`${m.fn}(${m.nums.map((c,p)=>`${c}${m.units[p]}`).join(", ")})`:`${a.fn}(${a.nums.map((c,p)=>`${c+(m.nums[p]-c)*r}${a.units[p]}`).join(", ")})`}).join(" ")}function _t(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),i=String(t);if(ur(n))return qe(n,i,r);if(n.includes("("))return mr(n,i,r);let a=n.match(/^([-+]?[\d.]+)(.*)$/),f=i.match(/^([-+]?[\d.]+)(.*)$/);if(a&&f){let m=parseFloat(a[1]),c=parseFloat(f[1]);return`${m+(c-m)*r}${a[2]||f[2]}`}return r<1?n:i}function fr(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var pr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),dr=0,Vt="--scroll-draw-progress";function gr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function dt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:i={},easing:a="ease-out",speed:f=1,once:m=!1,axis:c="y",scrollContainer:p,native:x=!0,velocityScale:I=!1,respectReducedMotion:T=!0,triggerElement:J,onProgress:Ee,onComplete:S,onEnter:$,onLeave:g,onEnterBack:E,onLeaveBack:b}=t,z=T&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,F=typeof a=="function"?a:K[a]??K["ease-out"],G=$e(i.start??"top bottom"),ee=$e(i.end??"bottom top"),de=J??e,Y=typeof p=="string"?document.querySelector(p):p??null,q=Object.entries(n).map(([s,u])=>({prop:fr(s),from:Array.isArray(u)?u[0]:"",to:Array.isArray(u)?u[1]:u}));function ke(){let s=window.getComputedStyle(e);for(let u of q)u.from===""&&(u.from=s.getPropertyValue(u.prop).trim()||"0")}function N(){for(let s of q)e.style.setProperty(s.prop,String(s.to))}let ge=new Map;for(let s of[...q.map(u=>u.prop),Vt])ge.set(s,e.style.getPropertyValue(s));function Le(){for(let[s,u]of ge)u?e.style.setProperty(s,u):e.style.removeProperty(s)}if(z)return N(),S?.(),{...r,destroy:Le,getProgress:()=>1};ke();let Ce=typeof a=="string"?Je(a):null;function De(){if(!x||!gr()||!Ce||c!=="y"||Y||de!==e||m||f!==1||Ee||S||$||g||E||b||I!==!1||(i.start??"top bottom").trim()!=="top bottom"||(i.end??"bottom top").trim()!=="bottom top")return!1;for(let s of q)if(!pr.has(s.prop))return!1;return!0}function w(){let s=`ssd-a-${++dr}`,u=q.map(B=>`${B.prop}:${B.from}`).join(";"),oe=q.map(B=>`${B.prop}:${B.to}`).join(";"),k=document.createElement("style");k.setAttribute("data-ssd-animate",""),k.textContent=`@keyframes ${s}{from{${u}}to{${oe}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${Ce};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(k),e.classList.add(s);let D=()=>c==="x"?window.scrollX:window.scrollY,O=()=>c==="x"?window.innerWidth:window.innerHeight,fe=()=>{let B=e.getBoundingClientRect();return Ne({top:B.top,height:B.height},D(),O(),G,ee)};Me(e,{type:"animate",getProgress:()=>ue.getProgress(),getTrigger:fe});let ue={destroy(){e.classList.remove(s),k.remove(),e.style.animationPlayState="",Le(),Pe(e)},replay(){e.classList.remove(s),e.offsetWidth,e.classList.add(s)},pause(){e.style.animationPlayState="paused"},resume(){e.style.animationPlayState=""},seek(B){let Ie=Math.min(1,Math.max(0,B));e.classList.remove(s);for(let _ of q)e.style.setProperty(_.prop,_t(_.from,_.to,Ie))},getProgress(){let{tStart:B,tEnd:Ie}=fe();return F(ie(D(),B,Ie,f))}};return ue}if(De())return w();let P=0,ne=0,ye=0,He=!1,he=!1,xe=-1,te=0,ce=!1,be=NaN,_e=-1,ae=0,le=()=>Y?c==="x"?Y.scrollLeft:Y.scrollTop:c==="x"?window.scrollX:window.scrollY,U=()=>Y?c==="x"?Y.clientWidth:Y.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function X(){let s=Ze(de,Y,c),u=Ne(s,s.scroll,U(),G,ee);P=u.tStart,ne=u.tEnd}function H(s){e.style.setProperty(Vt,String(s));for(let u of q)e.style.setProperty(u.prop,_t(u.from,u.to,s));Ee?.(s)}function re(s){if(isNaN(be)){be=s;return}be<=0&&s>0?$?.():be>0&&s<=0&&b?.(),be<1&&s>=1?g?.():be>=1&&s<1&&E?.(),be=s}function W(){if(!He||he)return;let s=performance.now(),u=le(),oe=f;if(I!==!1){let O=s-ae,fe=O>0?Math.abs(u-(_e<0?u:_e))/O:0;oe=f*Math.max(.2,1+fe*(typeof I=="number"?I:1)*.04)}_e=u,ae=s;let k=ne===P?0:(u-P)/(ne-P);re(k);let D=F(ie(u,P,ne,oe));m&&(xe=Math.max(xe,D),D=xe),te=D,H(D),D>=1&&!ce?(ce=!0,S?.()):D<1&&!m&&(ce=!1),ye=requestAnimationFrame(W)}X(),ne===P&&j("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let s=F(ie(le(),P,ne,f));m&&s>0&&(xe=s),te=s,H(s)}let we=new IntersectionObserver(s=>{s.forEach(u=>{He=u.isIntersecting,He&&!he?ye=requestAnimationFrame(W):cancelAnimationFrame(ye)})},{root:Y??null}),C;function A(){clearTimeout(C),C=setTimeout(X,150)}return window.addEventListener("resize",A),window.addEventListener("orientationchange",A),we.observe(e),Me(e,{type:"animate",getProgress:()=>te,getTrigger:()=>({tStart:P,tEnd:ne})}),{destroy(){cancelAnimationFrame(ye),we.disconnect(),window.removeEventListener("resize",A),window.removeEventListener("orientationchange",A),clearTimeout(C),Le(),Pe(e)},replay(){xe=-1,ce=!1,te=0,he=!1,H(0)},pause(){he=!0,cancelAnimationFrame(ye)},resume(){he&&(he=!1,He&&(ye=requestAnimationFrame(W)))},seek(s){let u=Math.min(1,Math.max(0,s));te=u,xe=u,he=!0,cancelAnimationFrame(ye),H(u)},getProgress(){return te}}}var tt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function zt(e,t){if(typeof window>"u")return tt;let r=typeof e=="string"?document.querySelector(e):e;return r?dt(r,t):(j("scrollAnimate: element not found:",e),tt)}function qt(e,t={}){if(typeof window>"u")return tt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return j("scrollParallax: element not found:",e),tt;let{speed:n=.3,axis:i="y",easing:a="linear",trigger:f,onProgress:m}=t,c=r.getBoundingClientRect(),p=i==="x"?c.width:c.height,x=n*p;return dt(r,{props:i==="x"?{transform:["translateX(0px)",`translateX(${-x}px)`]}:{transform:["translateY(0px)",`translateY(${-x}px)`]},trigger:f??{start:"top bottom",end:"bottom top"},easing:a,native:!1,onProgress:m})}var gt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Wt(e,t){if(typeof window>"u")return gt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return j("scrollCounter: element not found:",e),gt;let n=r,{from:i=0,to:a,format:f,easing:m="ease-out",trigger:c={},once:p=!0,decimals:x,onComplete:I}=t,T=x!==void 0?w=>w.toFixed(x):f??(w=>String(Math.round(w))),J=typeof m=="function"?m:K[m]??K["ease-out"],Ee=$e(c.start??"top 80%"),S=$e(c.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=T(a),I?.(),gt;let g=0,E=0,b=0,z=!1,F=!1,G=-1,ee=0,de=!1,Y=()=>window.scrollY,q=()=>window.innerHeight;function ke(){let w=n.getBoundingClientRect(),P=Ne({top:w.top,height:w.height},Y(),q(),Ee,S);g=P.tStart,E=P.tEnd}function N(w){n.textContent=T(i+(a-i)*w),n.style.setProperty("--scroll-draw-progress",String(w))}function ge(){if(!z||F)return;let w=J(ie(Y(),g,E,1));p&&(G=Math.max(G,w),w=G),ee=w,N(w),w>=1&&!de?(de=!0,I?.()):w<1&&!p&&(de=!1),b=requestAnimationFrame(ge)}ke();{let w=J(ie(Y(),g,E,1));p&&w>0&&(G=w),ee=w,N(w)}let Le=new IntersectionObserver(w=>{w.forEach(P=>{z=P.isIntersecting,z&&!F?b=requestAnimationFrame(ge):cancelAnimationFrame(b)})}),Ce;function De(){clearTimeout(Ce),Ce=setTimeout(ke,150)}return window.addEventListener("resize",De),window.addEventListener("orientationchange",De),Le.observe(n),Me(n,{type:"counter",getProgress:()=>ee,getTrigger:()=>({tStart:g,tEnd:E})}),{destroy(){cancelAnimationFrame(b),Le.disconnect(),window.removeEventListener("resize",De),window.removeEventListener("orientationchange",De),clearTimeout(Ce),Pe(n)},replay(){G=-1,de=!1,ee=0,F=!1,N(0)},pause(){F=!0,cancelAnimationFrame(b)},resume(){F&&(F=!1,z&&(b=requestAnimationFrame(ge)))},seek(w){let P=Math.min(1,Math.max(0,w));ee=P,G=P,F=!0,cancelAnimationFrame(b),N(P)},getProgress(){return ee}}}var Bt="http://www.w3.org/2000/svg",yr="cinematic-photo",yt=e=>e<0?0:e>1?1:e;function rt(e){let t=parseFloat(e);return Number.isFinite(t)?yt(t/100):0}function hr(e){return K[e]??K.linear}var br={destroy:()=>{},getProgress:()=>0},nt=class{constructor(t){if(typeof document>"u"){this.mount=null;return}this.mount=typeof t.wrapper=="string"?document.querySelector(t.wrapper):t.wrapper,this.mount||j("Cinematic: wrapper not found:",t.wrapper)}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return br;r.style.position="relative",r.style.height=t.totalHeight,r.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(n);let i=[];for(let S of t.scenes){if(S.background){let g=document.createElement("img");g.id=yr,g.src=S.background,g.alt="",g.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(g)}let $=S.animations.filter(g=>g.type==="draw");if($.length){let g=document.createElementNS(Bt,"svg");g.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),g.setAttribute("preserveAspectRatio","xMidYMid meet"),g.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(g);for(let E of $){let b=document.createElementNS(Bt,"path");b.id=E.target.replace(/^#/,""),b.setAttribute("d",E.d),b.setAttribute("fill","none"),b.setAttribute("stroke",E.stroke),b.setAttribute("stroke-width",String(E.strokeWidth)),b.setAttribute("stroke-linecap","round"),b.setAttribute("stroke-linejoin","round");let z=E.length||b.getTotalLength?.()||0;b.style.strokeDasharray=String(z),b.style.strokeDashoffset=String(z),g.appendChild(b),i.push({kind:"draw",el:b,start:rt(E.start),end:rt(E.end),ease:hr(E.easing),length:z})}}for(let g of S.animations){if(g.type!=="fade")continue;let E=n.querySelector(g.target)??document.querySelector(g.target);E&&(E.style.opacity=String(g.from),i.push({kind:"fade",el:E,start:rt(g.start),end:rt(g.end),ease:K["ease-in-out"]??K.linear,from:g.from,to:g.to}))}}let a=0,f=()=>{let S=r.offsetHeight-window.innerHeight;return S<=0?r.getBoundingClientRect().top<=0?1:0:yt(-r.getBoundingClientRect().top/S)},m=S=>{for(let $ of i){let g=$.end-$.start,E=g<=0?S>=$.end?1:0:yt((S-$.start)/g),b=$.ease(E);$.kind==="draw"?$.el.style.strokeDashoffset=String($.length*(1-b)):$.el.style.opacity=String($.from+($.to-$.from)*b)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return m(1),{destroy:()=>{},getProgress:()=>1};let c=0,p=!1,x=!1,I=()=>{a=f(),m(a),p&&(c=requestAnimationFrame(I))},T=()=>{p||(p=!0,c=requestAnimationFrame(I))},J=()=>{p=!1,cancelAnimationFrame(c)},Ee=new IntersectionObserver(S=>{for(let $ of S)x=$.isIntersecting,x?T():J()},{threshold:0});return Ee.observe(n),a=f(),m(a),Me(r,{type:"draw",getProgress:()=>a,getTrigger:()=>{let S=r.getBoundingClientRect().top+window.scrollY;return{tStart:S,tEnd:S+Math.max(0,r.offsetHeight-window.innerHeight)}}}),{destroy(){J(),Ee.disconnect(),Pe(r)},getProgress:()=>a}}};if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){class e extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let n={},i=this.getAttribute("speed"),a=this.getAttribute("easing"),f=this.getAttribute("stagger"),m=this.getAttribute("direction"),c=this.getAttribute("selector");i&&(n.speed=parseFloat(i)),a&&(n.easing=a),f&&(n.stagger=parseFloat(f)),m&&(n.direction=m),c&&(n.selector=c),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(n.once=this.getAttribute("once")!=="false"),this.instance=et(this,n)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}}customElements.define("scroll-draw",e)}return er(wr);})();
|
|
1
|
+
"use strict";var SvgScrollDraw=(()=>{var gt=Object.defineProperty;var ir=Object.getOwnPropertyDescriptor;var ar=Object.getOwnPropertyNames;var lr=Object.prototype.hasOwnProperty;var cr=(e,t)=>{for(var r in t)gt(e,r,{get:t[r],enumerable:!0})},ur=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of ar(t))!lr.call(e,s)&&s!==r&>(e,s,{get:()=>t[s],enumerable:!(n=ir(t,s))||n.enumerable});return e};var mr=e=>ur(gt({},"__esModule",{value:!0}),e);var Cr={};cr(Cr,{Cinematic:()=>ut,PRESETS:()=>nt,createBounce:()=>yt,createElastic:()=>ht,createSpring:()=>It,scrollAnimate:()=>Qt,scrollCounter:()=>Jt,scrollDraw:()=>jt,scrollParallax:()=>Zt});function It({tension:e=2.5,friction:t=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,t)}function yt({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,t)),s=Math.sqrt(n),i=0,u=[];for(let f=0;f<r;f++){let v=Math.pow(s,f);u.push(v),i+=v}let m=[0],c=0;for(let f=0;f<r;f++)c+=u[f]/i,m.push(c);return f=>{if(f<=0)return 0;if(f>=1)return 1;for(let v=0;v<r;v++)if(f<=m[v+1]){let M=(f-m[v])/(m[v+1]-m[v]);if(v===0)return M*(2-M);let E=1-Math.pow(n,v);return E+(1-E)*(2*M-1)*(2*M-1)}return 1}}function ht({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),n=Math.max(.1,t),s=r<=1?n/4:n/(2*Math.PI)*Math.asin(1/r);return i=>i<=0?0:i>=1?1:r*Math.pow(2,-10*i)*Math.sin((i-s)*(2*Math.PI)/n)+1}var ne={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:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:yt(),elastic:ht()};function Ot(e,t,r){return Math.min(r,Math.max(t,e))}function Le(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return{element:"top",viewport:t};let[r="top",n="bottom"]=t.split(/\s+/).filter(Boolean);return{element:r,viewport:n}}function Rt(e,t,r,n){switch(n){case"top":return e+r;case"center":return e+r+t/2;case"bottom":return e+r+t;default:return e+r}}function Ft(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case"top":return 0;case"center":return t/2;case"bottom":return t;default:return t}}function pe(e,t,r,n){return r===t?0:Ot((e-t)/(r-t)*n,0,1)}function Fe(e,t,r,n,s){let i=Rt(e.top,e.height,t,n.element)-Ft(n.viewport,r),u=Rt(e.top,e.height,t,s.element)-Ft(s.viewport,r);return{tStart:i,tEnd:u}}function rt(e,t,r){let n=e.getBoundingClientRect(),s=r==="x"?n.width:n.height;return t?{top:r==="x"?n.left-t.getBoundingClientRect().left+t.scrollLeft:n.top-t.getBoundingClientRect().top+t.scrollTop,height:s,scroll:0}:{top:r==="x"?n.left:n.top,height:s,scroll:r==="x"?window.scrollX:window.scrollY}}function Be(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(r+n)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function Nt(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return[parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return[parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function Ge(e,t,r){let n=Nt(e),s=Nt(t);return!n||!s?e:`rgb(${Math.round(n[0]+(s[0]-n[0])*r)},${Math.round(n[1]+(s[1]-n[1])*r)},${Math.round(n[2]+(s[2]-n[2])*r)})`}var nt={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:!1},reveal:{easing:"ease-out",fade:!0,speed:1.2,once:!0},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:!0,speed:.75},spring:{easing:"spring",speed:1.1}};function Z(e,...t){}var fr="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",pr="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Ht=33;function dr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function gr(e){let t=[];for(let r=0;r<Ht;r++){let n=r/(Ht-1);t.push(String(Math.round(e(n)*1e5)/1e5))}return`linear(${t.join(",")})`}function ot(e){switch(e){case"linear":return"linear";case"ease-in":return fr;case"ease-out":return pr;case"ease-in-out":return dr()?gr(ne["ease-in-out"]):null;default:return null}}var _t=Symbol.for("svg-scroll-draw.registry");function Vt(){let e=globalThis;return e[_t]||(e[_t]=new Map)}function Ce(e,t){Vt().set(e,t)}function De(e){Vt().delete(e)}var Ue,st=new Set,it=new WeakMap,Xe=new Map,zt=e=>{let t=e.getBoundingClientRect();return t.width+" "+t.height};function yr(e){let t=new Set;for(let r of e)for(;r&&r!==document.body;r=r.parentElement)for(let n=r;n;n=n.previousElementSibling)t.add(n);return t}function je(e,t){if(typeof ResizeObserver>"u"||typeof document>"u")return()=>{};let r=()=>t();Ue??(Ue=new ResizeObserver(s=>{let i=!1;for(let{target:u}of s)it.get(u)!==zt(u)&&(i=!0),it.set(u,"");i&&st.forEach(u=>u())})),st.add(r);let n=yr(e);return[document.body,document.documentElement].forEach(s=>s&&n.add(s)),n.forEach(s=>{it.has(s)||it.set(s,zt(s)),Xe.set(s,(Xe.get(s)??0)+1),Ue.observe(s)}),()=>{st.delete(r)&&(n.forEach(s=>{let i=(Xe.get(s)??1)-1;if(i)return void Xe.set(s,i);Xe.delete(s),Ue?.unobserve(s)}),st.size||(Ue?.disconnect(),Ue=void 0))}}var hr=0;function br(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Wt(e,t){let r="";try{r=getComputedStyle(e).getPropertyValue(t).trim()}catch{}return r||(e.getAttribute(t)??"").trim()}var qt=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function wr(e){if(!!1)return;let t=Wt(e,"stroke");if(!t||t==="none"){Z("Element has no stroke \u2014 path will not be visible.",e);return}let r=(e.getAttribute("fill")??"").trim();r&&!qt.has(r)&&!qt.has(Wt(e,"fill"))&&Z("Element has a fill \u2014 it may obscure the stroke animation.",e)}function vr(e,t,r){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.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 s(){let i=r==="x"?window.scrollX:window.scrollY,u=e-i,m=t-i,c=r==="x";n.innerHTML=`
|
|
2
|
+
<div style="position:absolute;${c?`left:${u}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${u}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
|
+
<div style="position:absolute;${c?`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(n),window.addEventListener("scroll",s,{passive:!0}),s(),{el:n,destroy(){window.removeEventListener("scroll",s),n.remove()}}}var Bt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Gt=/[MmLlHhVvCcSsQqTtAaZz]/g;function Er(e,t,r){if(!!1)return;let n=(e.match(Gt)??[]).join("").toUpperCase(),s=(t.match(Gt)??[]).join("").toUpperCase(),i=(e.match(Bt)??[]).length,u=(t.match(Bt)??[]).length;if(n!==s){Z(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${s||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}i!==u&&Z(`morphTo: coordinate count differs (${i} \u2192 ${u}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r)}function bt(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),s=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,i=>{let u=parseFloat(i),m=n[s++]??u;return String(+(u+(m-u)*r).toFixed(4))})}function at(e,t={}){if(typeof window>"u")return{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...n}=t,s=r?{...nt[r],...n}:n,i=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:u="path, polyline, line, polygon, rect, circle",speed:m=1,fade:c=!1,easing:f="linear",trigger:v={},stagger:M=0,direction:E="forward",once:oe=!1,debug:Te=!1,axis:S="y",scrollContainer:P,autoReverse:d=!1,delay:x=0,strokeColor:T,strokeWidth:I,fillOpacity:J,waypoints:q,velocityScale:se=!1,threshold:le=0,rootMargin:j="0px",repeat:O=0,repeatDelay:Ne=0,morphTo:Y,clip:ye,autoplay:Ae=!1,duration:He=1e3,native:_e=!0,onProgress:de,onStart:K,onComplete:p,onEnter:R,onLeave:Ve,onEnterBack:Ee,onLeaveBack:Me}=s,ie=ye===!0?"left":typeof ye=="string"?ye:!1,he=typeof f=="function"?f:ne[f]??ne.linear,Se=Le(v.start??"top bottom"),ze=Le(v.end??"bottom top"),ce=typeof P=="string"?document.querySelector(P):P??null,ge=Array.isArray(T)?T[0]:null,ee=Array.isArray(T)?T[1]:typeof T=="string"?T:null,_=Array.isArray(I)?I[0]:null,U=Array.isArray(I)?I[1]:typeof I=="number"?I:null,X=Array.isArray(J)?J[0]:null,V=Array.isArray(J)?J[1]:typeof J=="number"?J:null;function Pe(o){let a=o*100;switch(ie){case"right":return`inset(0 0 0 ${100-a}%)`;case"top":return`inset(0 0 ${100-a}% 0)`;case"bottom":return`inset(${100-a}% 0 0 0)`;case"center":return`circle(${o*150}% at 50% 50%)`;default:return`inset(0 ${100-a}% 0 0)`}}let L=ie?[]:Array.from(e.querySelectorAll(u)),$=[],te=[],B=0,ue=0,l=M,h=0,C=!1,F=!1,A=0,G=!1,ae=-1,$e=[],Q=-1,N=!1,me=0,ke=0,Ie,mt=null;function xt(){mt?.destroy(),mt=null}let Oe=new Set,Tt=NaN,Re=!0,Qe=-1,At=performance.now(),We=NaN;function Ze(){return ce?S==="x"?ce.scrollLeft:ce.scrollTop:S==="x"?window.scrollX:window.scrollY}function Mt(){return ce?S==="x"?ce.clientWidth:ce.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function Pt(){let o=rt(e,ce,S);return Fe(o,o.scroll,Mt(),Se,ze)}function er(){let o=ue-B,a=L.length-1,y=ce??document.documentElement,z=S==="x"?"Width":"Height";if(l=M,M>0&&a>0&&o>0){let be=y[`scroll${z}`]-y[`client${z}`]-1-B-o/m;be>=0&&(l=Math.min(M,be/(a*o)))}h=ue+a*l*o}function $t(){({tStart:B,tEnd:ue}=Pt()),er(),Te&&!1&&(xt(),mt=vr(B,ue,S))}function ft(o,a=Pt){Ce(e,{type:"draw",getProgress:()=>o.getProgress(),getTrigger:a});let y=o.destroy;return o.destroy=()=>{y.call(o),De(e)},o}function tr(o,a){if(e.style.setProperty("--scroll-draw-progress",String(o)),ie){let y=a==="reverse"?1-o:o;e.style.clipPath=Pe(y);return}L.forEach((y,z)=>{y.style.strokeDashoffset=a==="reverse"?`${$[z]*o}`:`${$[z]*(1-o)}`,c&&(y.style.opacity=a==="reverse"?`${1-o}`:`${o}`),ge&&ee?y.style.stroke=Ge(ge,ee,o):ee&&(y.style.stroke=ee),_!==null&&U!==null?y.style.strokeWidth=`${_+(U-_)*o}`:U!==null&&(y.style.strokeWidth=`${U}`),X!==null&&V!==null?y.style.fillOpacity=`${X+(V-X)*o}`:V!==null&&(y.style.fillOpacity=`${V}`),Y&&y.tagName.toLowerCase()==="path"&&te[z]&&y.setAttribute("d",bt(te[z],Y,o))})}function Je(){if(e.style.setProperty("--scroll-draw-progress","0"),ie){e.style.clipPath=Pe(0);return}L.forEach((o,a)=>{o.style.strokeDasharray=`${$[a]}`,o.style.strokeDashoffset=E==="reverse"?"0":`${$[a]}`,c?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ge&&(o.style.stroke=ge),_!==null&&(o.style.strokeWidth=`${_}`),X!==null&&(o.style.fillOpacity=`${X}`),Y&&o.tagName.toLowerCase()==="path"&&te[a]&&o.setAttribute("d",te[a])})}if(L.forEach(o=>{wr(o);let a=Be(o);$.push(a);let y=o.tagName.toLowerCase()==="path";y?te.push(o.getAttribute("d")??""):te.push(""),Y&&(y?Er(te[te.length-1],Y,o):Z(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),i?(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=E==="reverse"?`${a}`:"0",c&&(o.style.opacity="1"),ee&&(o.style.stroke=ee),U!==null&&(o.style.strokeWidth=`${U}`),V!==null&&(o.style.fillOpacity=`${V}`),Y&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",Y)):(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=E==="reverse"?"0":`${a}`,c?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ge&&(o.style.stroke=ge),_!==null&&(o.style.strokeWidth=`${_}`),X!==null&&(o.style.fillOpacity=`${X}`))}),ie){if(i)return e.style.clipPath=Pe(1),p?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=Pe(0)}else if(i)return p?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let kt=typeof f=="string"?ot(f):null;function rr(){return!(_e===!1||!br()||!L.length||!kt||ie||S!=="y"||ce||m!==1||M!==0||oe||d||se!==!1||Y||q||O||x>0||de||K||p||R||Ve||Ee||Me||T!=null||I!=null||J!=null||(v.start??"top bottom").trim()!=="top bottom"||(v.end??"bottom top").trim()!=="bottom top")}function nr(){let o=++hr,a=`svg-scroll-draw-${o}`,y=`svg-scroll-draw-host-${o}`,z=`--svg-scroll-draw-${o}`,be=E==="reverse"?"0":"var(--ssd-len)",xe=E==="reverse"?"var(--ssd-len)":"0",ve=`stroke-dashoffset:${be};`,w=`stroke-dashoffset:${xe};`;c&&(ve+=`opacity:${E==="reverse"?1:0};`,w+=`opacity:${E==="reverse"?0:1};`);let k=document.createElement("style");k.setAttribute("data-svg-scroll-draw",""),k.textContent=`@keyframes ${a}{from{${ve}}to{${w}}}.${y}{view-timeline-name:${z};view-timeline-axis:block;}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${kt};animation-fill-mode:both;animation-timeline:${z};animation-range:cover 0% cover 100%;}`,document.head.appendChild(k),e.classList.add(y);function re(g,W){g.style.setProperty("--ssd-len",String($[W])),g.style.strokeDasharray=`${$[W]}`,g.style.strokeDashoffset="",g.style.opacity="",g.style.animationPlayState="",g.classList.add(a)}L.forEach(re);let b=!1,D=-1;function H(){if(D>=0)return D;let g=e.getBoundingClientRect(),{tStart:W,tEnd:we}=Fe({top:g.top,height:g.height},Ze(),Mt(),Se,ze);return he(pe(Ze(),W,we,m))}return{destroy(){e.classList.remove(y),L.forEach(g=>{g.classList.remove(a),g.style.removeProperty("--ssd-len"),g.style.animationPlayState=""}),k.remove()},replay(){b=!1,D=-1,L.forEach(re)},pause(){b=!0,L.forEach(g=>{g.style.animationPlayState="paused"})},resume(){b&&(b=!1,L.forEach(g=>{g.style.animationPlayState="running"}))},seek(g){let W=Math.min(1,Math.max(0,g));D=W,b=!0,L.forEach((we,fe)=>{we.classList.remove(a),we.style.strokeDashoffset=E==="reverse"?`${$[fe]*W}`:`${$[fe]*(1-W)}`,c&&(we.style.opacity=E==="reverse"?`${1-W}`:`${W}`)})},getProgress(){return H()},refresh(){L.forEach((g,W)=>{$[W]=Be(g),g.style.setProperty("--ssd-len",String($[W])),g.style.strokeDasharray=`${$[W]}`})}}}if(rr())return ft(nr());function or(){let o=Math.max(1,He),a=0,y=0,z=!1;function be(b){let D=!0;if(ie){let H=Math.min(1,Math.max(0,b/o)),g=he(H);me=g,e.style.setProperty("--scroll-draw-progress",String(g)),e.style.clipPath=Pe(E==="reverse"?1-g:g),de?.(g),H<1&&(D=!1)}else L.forEach((H,g)=>{let W=g*M*o,we=Math.min(1,Math.max(0,(b-W)/o)),fe=he(we);H.style.strokeDashoffset=E==="reverse"?`${$[g]*fe}`:`${$[g]*(1-fe)}`,c&&(H.style.opacity=E==="reverse"?`${1-fe}`:`${fe}`),ge&&ee?H.style.stroke=Ge(ge,ee,fe):ee&&(H.style.stroke=ee),_!==null&&U!==null?H.style.strokeWidth=`${_+(U-_)*fe}`:U!==null&&(H.style.strokeWidth=`${U}`),X!==null&&V!==null?H.style.fillOpacity=`${X+(V-X)*fe}`:V!==null&&(H.style.fillOpacity=`${V}`),Y&&H.tagName.toLowerCase()==="path"&&te[g]&&H.setAttribute("d",bt(te[g],Y,fe)),g===0&&(me=fe,de?.(fe),e.style.setProperty("--scroll-draw-progress",String(fe))),we<1&&(D=!1)});if(q){let H=Math.min(1,Math.max(0,b/o)),g=he(H);for(let W in q){let we=parseFloat(W);g>=we&&!Oe.has(we)&&(Oe.add(we),q[W]?.())}}return D}function xe(b){if(N)return;let D=b-a;F||(F=!0,K?.());let H=be(D);if(H&&!C){C=!0,be(o*(1+Math.max(0,L.length-1)*M)),p?.(),ke<(O==="infinite"?1/0:O??0)&&(ke++,Ie=setTimeout(()=>{a=performance.now(),F=!1,C=!1,Oe.clear(),Je(),A=requestAnimationFrame(xe)},Ne));return}H||(A=requestAnimationFrame(xe))}function ve(){cancelAnimationFrame(A),clearTimeout(Ie),a=performance.now(),y=0,N=!1,F=!1,C=!1,ke=0,z=!0,me=0,Oe.clear(),Je(),A=requestAnimationFrame(xe)}let w=new IntersectionObserver(b=>{b.forEach(D=>{D.isIntersecting&&!(oe&&C)?ve():!D.isIntersecting&&!oe&&!C&&(cancelAnimationFrame(A),clearTimeout(Ie),z=!1)})},{root:ce??null,threshold:le,rootMargin:j}),k;function re(){clearTimeout(k),k=setTimeout(()=>{L.forEach((b,D)=>{$[D]=Be(b),b.style.strokeDasharray=`${$[D]}`})},150)}return window.addEventListener("resize",re),window.addEventListener("orientationchange",re),x>0?setTimeout(()=>w.observe(e),x):w.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(Ie),w.disconnect(),window.removeEventListener("resize",re),window.removeEventListener("orientationchange",re),clearTimeout(k)},replay(){ke=0,ve()},pause(){N||!z||(N=!0,y=performance.now()-a,cancelAnimationFrame(A))},resume(){N&&(N=!1,z=!0,a=performance.now()-y,A=requestAnimationFrame(xe))},seek(b){let D=Math.min(1,Math.max(0,b));me=D,N=!0,y=D*o,a=performance.now()-y,cancelAnimationFrame(A),be(y)},getProgress(){return me},refresh(){clearTimeout(k),L.forEach((b,D)=>{$[D]=Be(b),b.style.strokeDasharray=`${$[D]}`})}}}if(Ae)return ft(or());$t();function Lt(){if(N||!qe)return;let o=performance.now(),a=Ze();if(!Re&&se===!1&&a===Tt){pt(a);return}Re=!1,Tt=a;let y=m;if(se!==!1){let w=o-At,k=w>0?Math.abs(a-(Qe<0?a:Qe))/w:0;y=m*Math.max(.2,1+k*(typeof se=="number"?se:1)*.04)}Qe=a,At=o;let z=d?Q===-1||a>=Q?"forward":"reverse":E;Q=a;let be=ue-B,xe=!0,ve=be===0?0:(a-B)/be;if(isNaN(We)||(We<=0&&ve>0?R?.():We>0&&ve<=0&&Me?.(),We<1&&ve>=1?Ve?.():We>=1&&ve<1&&Ee?.()),We=ve,ie){let w=he(pe(a,B,ue,y));oe&&!d&&(ae=Math.max(ae,w),w=ae),me=w,e.style.setProperty("--scroll-draw-progress",String(w));let k=z==="reverse"?1-w:w;e.style.clipPath=Pe(k),de?.(w),!F&&pe(a,B,ue,y)>0&&(F=!0,K?.()),w>=1&&!C?(C=!0,p?.(),ke<(O==="infinite"?1/0:O??0)&&(ke++,Ie=setTimeout(()=>{ae=-1,F=!1,C=!1,e.style.clipPath=Pe(0)},Ne))):w<1&&!oe&&(C=!1),pt(a);return}if(L.forEach((w,k)=>{let re=k*l*be,b=he(pe(a,B+re,ue+re,y));oe&&!d&&(b=$e[k]=Math.max($e[k]??ae,b)),w.style.strokeDashoffset=z==="reverse"?`${$[k]*b}`:`${$[k]*(1-b)}`,c&&(w.style.opacity=z==="reverse"?`${1-b}`:`${b}`),ge&&ee?w.style.stroke=Ge(ge,ee,b):ee&&(w.style.stroke=ee),_!==null&&U!==null?w.style.strokeWidth=`${_+(U-_)*b}`:U!==null&&(w.style.strokeWidth=`${U}`),X!==null&&V!==null?w.style.fillOpacity=`${X+(V-X)*b}`:V!==null&&(w.style.fillOpacity=`${V}`),Y&&w.tagName.toLowerCase()==="path"&&te[k]&&w.setAttribute("d",bt(te[k],Y,b)),k===0&&(me=b,de?.(b),e.style.setProperty("--scroll-draw-progress",String(b))),b<1&&(xe=!1)}),q){let w=he(pe(a,B,ue,y));for(let k in q){let re=parseFloat(k);w>=re&&!Oe.has(re)&&(Oe.add(re),q[k]?.())}}!F&&pe(a,B,ue,y)>0&&(F=!0,K?.()),xe&&!C?(C=!0,p?.(),ke<(O==="infinite"?1/0:O??0)&&(ke++,Ie=setTimeout(()=>{ae=-1,$e=[],F=!1,C=!1,Oe.clear(),Je(),Re=!0},Ne))):!xe&&!oe&&(C=!1),pt(a)}function Ct(o){return o>=ue&&o<h}function pt(o){G||Ct(o)?A=requestAnimationFrame(Lt):qe=!1}let qe=!1;function Ke(){qe||(qe=!0,A=requestAnimationFrame(function(){Lt()}))}function et(){qe=!1,cancelAnimationFrame(A)}let dt=new IntersectionObserver(o=>{o.forEach(a=>{G=a.isIntersecting,G&&!N?(Re=!0,Ke()):qe&&!N&&Ct(Ze())||et()})},{root:ce??null,threshold:le,rootMargin:j});function Dt(){L.forEach((o,a)=>{$[a]=Be(o),o.style.strokeDasharray=`${$[a]}`}),$t(),Re=!0}let tt;function Ye(){clearTimeout(tt),tt=setTimeout(Dt,150)}window.addEventListener("resize",Ye),window.addEventListener("orientationchange",Ye);let sr=je([e],Ye);return x>0?setTimeout(()=>dt.observe(e),x):dt.observe(e),ft({destroy(){cancelAnimationFrame(A),clearTimeout(Ie),et(),dt.disconnect(),sr(),window.removeEventListener("resize",Ye),window.removeEventListener("orientationchange",Ye),clearTimeout(tt),xt()},replay(){ae=-1,$e=[],Q=-1,Qe=-1,F=!1,C=!1,ke=0,N=!1,me=0,Oe.clear(),clearTimeout(Ie),Je(),Re=!0,G&&Ke()},pause(){N=!0,et()},resume(){N&&(N=!1,Re=!0,G&&Ke())},seek(o){let a=Math.min(1,Math.max(0,o));me=a,ae=a,$e=[],N=!0,et(),tr(a,E),Re=!0},getProgress(){return me},refresh(){clearTimeout(tt),Dt(),G&&!N&&Ke()}},()=>({tStart:B,tEnd:ue}))}function jt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let n=typeof e=="string"?document.querySelector(e):e;return n?at(n,t):(Z("Container not found:",e),r)}function Sr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Yt(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let s=[],i=[],u=n[2].trim();if(u)for(let m of u.split(/[\s,]+/)){let c=m.match(/^([-+]?[\d.eE]+)(.*)$/);s.push(c?parseFloat(c[1]):0),i.push(c?c[2]:"")}t.push({fn:n[1],nums:s,units:i})}return t}function xr(e,t,r){let n=Yt(e),s=Yt(t);return n.length===0||n.length!==s.length?r<1?e:t:n.map((i,u)=>{let m=s[u];return i.fn!==m.fn||i.nums.length!==m.nums.length?r<1?`${i.fn}(${i.nums.map((c,f)=>`${c}${i.units[f]}`).join(", ")})`:`${m.fn}(${m.nums.map((c,f)=>`${c}${m.units[f]}`).join(", ")})`:`${i.fn}(${i.nums.map((c,f)=>`${c+(m.nums[f]-c)*r}${i.units[f]}`).join(", ")})`}).join(" ")}function Ut(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),s=String(t);if(Sr(n))return Ge(n,s,r);if(n.includes("("))return xr(n,s,r);let i=n.match(/^([-+]?[\d.]+)(.*)$/),u=s.match(/^([-+]?[\d.]+)(.*)$/);if(i&&u){let m=parseFloat(i[1]),c=parseFloat(u[1]);return`${m+(c-m)*r}${i[2]||u[2]}`}return r<1?n:s}function Tr(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Ar=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Mr=0,Xt="--scroll-draw-progress";function Pr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function vt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:s={},easing:i="ease-out",speed:u=1,once:m=!1,axis:c="y",scrollContainer:f,native:v=!0,velocityScale:M=!1,respectReducedMotion:E=!0,triggerElement:oe,onProgress:Te,onComplete:S,onEnter:P,onLeave:d,onEnterBack:x,onLeaveBack:T}=t,I=E&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,J=typeof i=="function"?i:ne[i]??ne["ease-out"],q=Le(s.start??"top bottom"),se=Le(s.end??"bottom top"),le=oe??e,j=typeof f=="string"?document.querySelector(f):f??null,O=Object.entries(n).map(([l,h])=>({prop:Tr(l),from:Array.isArray(h)?h[0]:"",to:Array.isArray(h)?h[1]:h}));function Ne(){let l=window.getComputedStyle(e);for(let h of O)h.from===""&&(h.from=l.getPropertyValue(h.prop).trim()||"0")}function Y(){for(let l of O)e.style.setProperty(l.prop,String(l.to))}let ye=new Map;for(let l of[...O.map(h=>h.prop),Xt])ye.set(l,e.style.getPropertyValue(l));function Ae(){for(let[l,h]of ye)h?e.style.setProperty(l,h):e.style.removeProperty(l)}if(I)return Y(),S?.(),{...r,destroy:Ae,getProgress:()=>1};Ne();let He=typeof i=="string"?ot(i):null;function _e(){if(!v||!Pr()||!He||c!=="y"||j||le!==e||m||u!==1||Te||S||P||d||x||T||M!==!1||(s.start??"top bottom").trim()!=="top bottom"||(s.end??"bottom top").trim()!=="bottom top")return!1;for(let l of O)if(!Ar.has(l.prop))return!1;return!0}function de(){let l=`ssd-a-${++Mr}`,h=O.map(Q=>`${Q.prop}:${Q.from}`).join(";"),C=O.map(Q=>`${Q.prop}:${Q.to}`).join(";"),F=document.createElement("style");F.setAttribute("data-ssd-animate",""),F.textContent=`@keyframes ${l}{from{${h}}to{${C}}}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${He};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(F),e.classList.add(l);let A=()=>c==="x"?window.scrollX:window.scrollY,G=()=>c==="x"?window.innerWidth:window.innerHeight,ae=()=>{let Q=e.getBoundingClientRect();return Fe({top:Q.top,height:Q.height},A(),G(),q,se)};Ce(e,{type:"animate",getProgress:()=>$e.getProgress(),getTrigger:ae});let $e={refresh(){},destroy(){e.classList.remove(l),F.remove(),e.style.animationPlayState="",Ae(),De(e)},replay(){e.classList.remove(l),e.offsetWidth,e.classList.add(l)},pause(){e.style.animationPlayState="paused"},resume(){e.style.animationPlayState=""},seek(Q){let N=Math.min(1,Math.max(0,Q));e.classList.remove(l);for(let me of O)e.style.setProperty(me.prop,Ut(me.from,me.to,N))},getProgress(){let{tStart:Q,tEnd:N}=ae();return J(pe(A(),Q,N,u))}};return $e}if(_e())return de();let K=0,p=0,R=0,Ve=!1,Ee=!1,Me=-1,ie=0,he=!1,Se=NaN,ze=-1,ce=0,ge=()=>j?c==="x"?j.scrollLeft:j.scrollTop:c==="x"?window.scrollX:window.scrollY,ee=()=>j?c==="x"?j.clientWidth:j.clientHeight:c==="x"?window.innerWidth:window.innerHeight,_=le===e?O:[],U=!1;function X(){let l=e.style,h=_.map(G=>l.getPropertyValue(G.prop)),C=l.transition;_.length&&(l.transition="none"),_.forEach(G=>l.setProperty(G.prop,ye.get(G.prop)??""));let F=rt(le,j,c);_.forEach((G,ae)=>l.setProperty(G.prop,h[ae])),_.length&&(e.offsetWidth,l.transition=C);let A=Fe(F,F.scroll,ee(),q,se);U&&Math.abs(A.tStart-K)<1&&Math.abs(A.tEnd-p)<1||(U=!0,K=A.tStart,p=A.tEnd)}function V(l){e.style.setProperty(Xt,String(l));for(let h of O)e.style.setProperty(h.prop,Ut(h.from,h.to,l));Te?.(l)}function Pe(l){if(isNaN(Se)){Se=l;return}Se<=0&&l>0?P?.():Se>0&&l<=0&&T?.(),Se<1&&l>=1?d?.():Se>=1&&l<1&&x?.(),Se=l}function L(){if(!Ve||Ee)return;let l=performance.now(),h=ge(),C=u;if(M!==!1){let G=l-ce,ae=G>0?Math.abs(h-(ze<0?h:ze))/G:0;C=u*Math.max(.2,1+ae*(typeof M=="number"?M:1)*.04)}ze=h,ce=l;let F=p===K?0:(h-K)/(p-K);Pe(F);let A=J(pe(h,K,p,C));m&&(Me=Math.max(Me,A),A=Me),ie=A,V(A),A>=1&&!he?(he=!0,S?.()):A<1&&!m&&(he=!1),R=requestAnimationFrame(L)}X(),p===K&&Z("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let l=J(pe(ge(),K,p,u));m&&l>0&&(Me=l),ie=l,V(l)}let $=new IntersectionObserver(l=>{l.forEach(h=>{Ve=h.isIntersecting,Ve&&!Ee?R=requestAnimationFrame(L):cancelAnimationFrame(R)})},{root:j??null}),te;function B(){clearTimeout(te),te=setTimeout(X,150)}window.addEventListener("resize",B),window.addEventListener("orientationchange",B);let ue=je([le],B);return $.observe(e),Ce(e,{type:"animate",getProgress:()=>ie,getTrigger:()=>({tStart:K,tEnd:p})}),{destroy(){cancelAnimationFrame(R),$.disconnect(),window.removeEventListener("resize",B),window.removeEventListener("orientationchange",B),ue(),clearTimeout(te),Ae(),De(e)},replay(){Me=-1,he=!1,ie=0,Ee=!1,V(0)},pause(){Ee=!0,cancelAnimationFrame(R)},resume(){Ee&&(Ee=!1,Ve&&(R=requestAnimationFrame(L)))},seek(l){let h=Math.min(1,Math.max(0,l));ie=h,Me=h,Ee=!0,cancelAnimationFrame(R),V(h)},getProgress(){return ie},refresh(){X()}}}var lt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Qt(e,t){if(typeof window>"u")return lt;let r=typeof e=="string"?document.querySelector(e):e;return r?vt(r,t):(Z("scrollAnimate: element not found:",e),lt)}function Zt(e,t={}){if(typeof window>"u")return lt;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return Z("scrollParallax: element not found:",e),lt;let{speed:n=.3,axis:s="y",easing:i="linear",trigger:u,onProgress:m}=t,c=-n*100,f=r.style,v=!!r.ownerSVGElement,M=f.getPropertyValue("transform-box");v&&f.setProperty("transform-box","fill-box");let E=vt(r,{props:s==="x"?{transform:["translateX(0%)",`translateX(${c}%)`]}:{transform:["translateY(0%)",`translateY(${c}%)`]},trigger:u??{start:"top bottom",end:"bottom top"},easing:i,native:!1,onProgress:m});return v?{...E,destroy(){E.destroy(),f.setProperty("transform-box",M)}}:E}var Et={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Jt(e,t){if(typeof window>"u")return Et;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return Z("scrollCounter: element not found:",e),Et;let n=r,{from:s=0,to:i,format:u,easing:m="ease-out",trigger:c={},once:f=!0,decimals:v,onComplete:M}=t,E=v!==void 0?p=>p.toFixed(v):u??(p=>String(Math.round(p))),oe=typeof m=="function"?m:ne[m]??ne["ease-out"],Te=Le(c.start??"top 80%"),S=Le(c.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=E(i),M?.(),Et;let d=0,x=0,T=!1,I=0,J=!1,q=!1,se=-1,le=0,j=!1,O=()=>window.scrollY,Ne=()=>window.innerHeight;function Y(){let p=n.getBoundingClientRect(),R=Fe({top:p.top,height:p.height},O(),Ne(),Te,S);T&&Math.abs(R.tStart-d)<1&&Math.abs(R.tEnd-x)<1||(T=!0,d=R.tStart,x=R.tEnd)}function ye(p){n.textContent=E(s+(i-s)*p),n.style.setProperty("--scroll-draw-progress",String(p))}function Ae(){if(!J||q)return;let p=oe(pe(O(),d,x,1));f&&(se=Math.max(se,p),p=se),le=p,ye(p),p>=1&&!j?(j=!0,M?.()):p<1&&!f&&(j=!1),I=requestAnimationFrame(Ae)}Y();{let p=oe(pe(O(),d,x,1));f&&p>0&&(se=p),le=p,ye(p)}let He=new IntersectionObserver(p=>{p.forEach(R=>{J=R.isIntersecting,J&&!q?I=requestAnimationFrame(Ae):cancelAnimationFrame(I)})}),_e;function de(){clearTimeout(_e),_e=setTimeout(Y,150)}window.addEventListener("resize",de),window.addEventListener("orientationchange",de);let K=je([n],de);return He.observe(n),Ce(n,{type:"counter",getProgress:()=>le,getTrigger:()=>({tStart:d,tEnd:x})}),{destroy(){cancelAnimationFrame(I),He.disconnect(),window.removeEventListener("resize",de),window.removeEventListener("orientationchange",de),K(),clearTimeout(_e),De(n)},replay(){se=-1,j=!1,le=0,q=!1,ye(0)},pause(){q=!0,cancelAnimationFrame(I)},resume(){q&&(q=!1,J&&(I=requestAnimationFrame(Ae)))},seek(p){let R=Math.min(1,Math.max(0,p));le=R,se=R,q=!0,cancelAnimationFrame(I),ye(R)},getProgress(){return le}}}var Kt="http://www.w3.org/2000/svg",$r="cinematic-photo",St=e=>e<0?0:e>1?1:e;function ct(e){let t=parseFloat(e);return Number.isFinite(t)?St(t/100):0}function kr(e){return ne[e]??ne.linear}var Lr={destroy:()=>{},getProgress:()=>0},ut=class{constructor(t){if(typeof document>"u"){this.mount=null;return}this.mount=typeof t.wrapper=="string"?document.querySelector(t.wrapper):t.wrapper,this.mount||Z("Cinematic: wrapper not found:",t.wrapper)}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return Lr;r.style.position="relative",r.style.height=t.totalHeight,r.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(n);let s=[];for(let S of t.scenes){if(S.background){let d=document.createElement("img");d.id=$r,d.src=S.background,d.alt="",d.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(d)}let P=S.animations.filter(d=>d.type==="draw");if(P.length){let d=document.createElementNS(Kt,"svg");d.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),d.setAttribute("preserveAspectRatio","xMidYMid meet"),d.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(d);for(let x of P){let T=document.createElementNS(Kt,"path");T.id=x.target.replace(/^#/,""),T.setAttribute("d",x.d),T.setAttribute("fill","none"),T.setAttribute("stroke",x.stroke),T.setAttribute("stroke-width",String(x.strokeWidth)),T.setAttribute("stroke-linecap","round"),T.setAttribute("stroke-linejoin","round");let I=x.length||T.getTotalLength?.()||0;T.style.strokeDasharray=String(I),T.style.strokeDashoffset=String(I),d.appendChild(T),s.push({kind:"draw",el:T,start:ct(x.start),end:ct(x.end),ease:kr(x.easing),length:I})}}for(let d of S.animations){if(d.type!=="fade")continue;let x=n.querySelector(d.target)??document.querySelector(d.target);x&&(x.style.opacity=String(d.from),s.push({kind:"fade",el:x,start:ct(d.start),end:ct(d.end),ease:ne["ease-in-out"]??ne.linear,from:d.from,to:d.to}))}}let i=0,u=()=>{let S=r.offsetHeight-window.innerHeight;return S<=0?r.getBoundingClientRect().top<=0?1:0:St(-r.getBoundingClientRect().top/S)},m=S=>{for(let P of s){let d=P.end-P.start,x=d<=0?S>=P.end?1:0:St((S-P.start)/d),T=P.ease(x);P.kind==="draw"?P.el.style.strokeDashoffset=String(P.length*(1-T)):P.el.style.opacity=String(P.from+(P.to-P.from)*T)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return m(1),{destroy:()=>{},getProgress:()=>1};let c=0,f=!1,v=!1,M=()=>{i=u(),m(i),f&&(c=requestAnimationFrame(M))},E=()=>{f||(f=!0,c=requestAnimationFrame(M))},oe=()=>{f=!1,cancelAnimationFrame(c)},Te=new IntersectionObserver(S=>{for(let P of S)v=P.isIntersecting,v?E():oe()},{threshold:0});return Te.observe(n),i=u(),m(i),Ce(r,{type:"draw",getProgress:()=>i,getTrigger:()=>{let S=r.getBoundingClientRect().top+window.scrollY;return{tStart:S,tEnd:S+Math.max(0,r.offsetHeight-window.innerHeight)}}}),{destroy(){oe(),Te.disconnect(),De(r)},getProgress:()=>i}}};if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){let e=["speed","easing","stagger","direction","selector","fade","once"];class t extends HTMLElement{constructor(){super(...arguments);this.instance=null;this.key=""}connectedCallback(){this.build()}attributeChangedCallback(){this.instance&&this.build()}build(){let s=JSON.stringify(e.map(M=>this.getAttribute(M)));if(this.instance&&s===this.key)return;this.instance?.destroy(),this.key=s;let i={},u=this.getAttribute("speed"),m=this.getAttribute("easing"),c=this.getAttribute("stagger"),f=this.getAttribute("direction"),v=this.getAttribute("selector");u&&(i.speed=parseFloat(u)),m&&(i.easing=m),c&&(i.stagger=parseFloat(c)),f&&(i.direction=f),v&&(i.selector=v),this.hasAttribute("fade")&&(i.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(i.once=this.getAttribute("once")!=="false"),this.instance=at(this,i)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}}t.observedAttributes=e,customElements.define("scroll-draw",t)}return mr(Cr);})();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {b}from'./chunk-
|
|
1
|
+
import {b}from'./chunk-LQBXJRFY.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};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {a,d as d$1,c,b as b$2}from'./chunk-A4JCC3QQ.mjs';import {d}from'./chunk-DM6EDKWH.mjs';import {a as a$1,b as b$1}from'./chunk-BCV4RAIX.mjs';import {b}from'./chunk-LFSU6LR3.mjs';var G={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ne(m,h={}){if(typeof window>"u")return G;let E=typeof m=="string"?document.querySelector(m):m;if(!E||E.tagName.toLowerCase()!=="video")return b("scrollVideo: <video> element not found:",m),G;let t=E,{trigger:P={},easing:b$3="linear",once:z=false,axis:u="y",preload:W="auto",triggerElement:X,onReady:C,onComplete:Y,onProgress:j}=h,I=X??t,V=window.matchMedia("(prefers-reduced-motion: reduce)").matches,J=typeof b$3=="function"?b$3:d[b$3]??d.linear,K=a(P.start??"top top"),Q=a(P.end??"bottom top");t.pause(),t.hasAttribute("preload")||(t.preload=W);let M=h.from??0,T=h.to,f=0,g=0,o=0,a$2=false,n=false,s=-1,l=0,p=false,i=false,R=()=>u==="x"?window.scrollX:window.scrollY,U=()=>u==="x"?window.innerWidth:window.innerHeight;function A(){let e=I.getBoundingClientRect(),r=u==="x"?e.left:e.top,d=u==="x"?e.width:e.height,O=c({top:r,height:d},R(),U(),K,Q);f=O.tStart,g=O.tEnd,i&&g===f&&b("scrollVideo: zero-length trigger window, so it never scrubs. In a sticky stage, set triggerElement.",t);}let w=NaN;function v(e){if(!i)return;let r=T??t.duration??0,d=M+(r-M)*e;d!==w&&(w=d,t.currentTime=d),t.style.setProperty("--scroll-draw-progress",String(e)),j?.(e);}function y(){if(!a$2||n||!i||V)return;let e=J(b$2(R(),f,g,1));z&&(s=Math.max(s,e),e=s),l=e,v(e),e>=1&&!p?(p=true,Y?.()):e<1&&!z&&(p=false),o=requestAnimationFrame(y);}function S(){if(i=true,T===void 0&&(T=t.duration),V){v(1),C?.();return}A(),C?.(),a$2&&!n&&(o=requestAnimationFrame(y));}t.readyState>=1?S():t.addEventListener("loadedmetadata",S,{once:true}),i||A();let q=new IntersectionObserver(e=>{e.forEach(r=>{a$2=r.isIntersecting,a$2&&!n&&i?o=requestAnimationFrame(y):cancelAnimationFrame(o);});}),x;function c$1(){clearTimeout(x),x=setTimeout(A,150);}window.addEventListener("resize",c$1),window.addEventListener("orientationchange",c$1);let Z=d$1([I],c$1);return q.observe(t),a$1(t,{type:"video",getProgress:()=>l,getTrigger:()=>({tStart:f,tEnd:g})}),{destroy(){cancelAnimationFrame(o),q.disconnect(),t.removeEventListener("loadedmetadata",S),window.removeEventListener("resize",c$1),window.removeEventListener("orientationchange",c$1),Z(),clearTimeout(x),b$1(t);},replay(){s=-1,p=false,l=0,n=false,w=NaN,v(0);},pause(){n=true,cancelAnimationFrame(o);},resume(){n&&(n=false,a$2&&i&&(o=requestAnimationFrame(y)));},seek(e){let r=Math.min(1,Math.max(0,e));l=r,s=r,n=true,cancelAnimationFrame(o),w=NaN,v(r);},getProgress(){return l}}}export{ne as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import {a as a$1}from'./chunk-4DOJSIEQ.mjs';function w(t="top bottom"){let e=t.trim();if(/^\d+(\.\d+)?%$/.test(e))return {element:"top",viewport:e};let[n="top",o="bottom"]=e.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function b(t,e,n,o){switch(o){case "top":return t+n;case "center":return t+n+e/2;case "bottom":return t+n+e;default:return t+n}}function l(t,e){if(/^\d+(\.\d+)?%$/.test(t))return e*(parseFloat(t)/100);switch(t){case "top":return 0;case "center":return e/2;case "bottom":return e;default:return e}}function v(t,e,n,o){return n===e?0:a$1((t-e)/(n-e)*o,0,1)}function E(t,e,n,o,r){let u=b(t.top,t.height,e,o.element)-l(o.viewport,n),i=b(t.top,t.height,e,r.element)-l(r.viewport,n);return {tStart:u,tEnd:i}}var s,c=new Set,d=new WeakMap,m=new Map,a=t=>{let e=t.getBoundingClientRect();return e.width+" "+e.height};function p(t){let e=new Set;for(let n of t)for(;n&&n!==document.body;n=n.parentElement)for(let o=n;o;o=o.previousElementSibling)e.add(o);return e}function x(t,e){if(typeof ResizeObserver>"u"||typeof document>"u")return ()=>{};let n=()=>e();s??(s=new ResizeObserver(r=>{let u=false;for(let{target:i}of r)d.get(i)!==a(i)&&(u=true),d.set(i,"");u&&c.forEach(i=>i());})),c.add(n);let o=p(t);return [document.body,document.documentElement].forEach(r=>r&&o.add(r)),o.forEach(r=>{d.has(r)||d.set(r,a(r)),m.set(r,(m.get(r)??0)+1),s.observe(r);}),()=>{c.delete(n)&&(o.forEach(r=>{let u=(m.get(r)??1)-1;if(u)return void m.set(r,u);m.delete(r),s?.unobserve(r);}),c.size||(s?.disconnect(),s=void 0));}}export{w as a,v as b,E as c,x as d};
|