svg-scroll-draw 2.23.0 → 2.23.3
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 +16 -13
- package/dist/angular/index.cjs +3 -3
- package/dist/angular/index.mjs +1 -1
- package/dist/astro/index.cjs +3 -3
- package/dist/astro/index.mjs +1 -1
- package/dist/cdn/svg-scroll-draw.dev.global.js +77 -118
- package/dist/cdn/svg-scroll-draw.global.js +2 -2
- package/dist/chunk-23EALNDF.mjs +3 -0
- package/dist/{chunk-DY5JCXVR.mjs → chunk-4H2SGMAQ.mjs} +1 -1
- package/dist/{chunk-VMUJMXKO.mjs → chunk-4I7MLTP5.mjs} +1 -1
- package/dist/{chunk-OTDD2ROH.mjs → chunk-BLY6F6EC.mjs} +1 -1
- package/dist/{chunk-GVBO5GRD.mjs → chunk-ETACBG7W.mjs} +1 -1
- package/dist/chunk-GMBIGV3M.mjs +1 -0
- package/dist/chunk-LGJQWZHH.mjs +1 -0
- package/dist/chunk-UPWWULKI.mjs +1 -0
- package/dist/chunk-V4L3ELVC.mjs +1 -0
- package/dist/group/index.cjs +3 -3
- package/dist/group/index.d.mts +4 -2
- package/dist/group/index.d.ts +4 -2
- package/dist/group/index.mjs +1 -1
- package/dist/horizontal/index.cjs +1 -1
- package/dist/horizontal/index.mjs +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.d.mts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.mjs +1 -1
- package/dist/nuxt/index.cjs +3 -3
- package/dist/nuxt/index.mjs +1 -1
- package/dist/progress/index.cjs +1 -1
- package/dist/progress/index.mjs +1 -1
- package/dist/react/index.cjs +3 -3
- package/dist/react/index.mjs +1 -1
- package/dist/reveal/index.cjs +1 -1
- package/dist/reveal/index.mjs +1 -1
- package/dist/solid/index.cjs +2 -2
- package/dist/solid/index.mjs +1 -1
- package/dist/svelte/index.cjs +2 -2
- package/dist/svelte/index.mjs +1 -1
- package/dist/text/index.cjs +1 -1
- package/dist/text/index.mjs +1 -1
- package/dist/timeline/index.cjs +1 -1
- package/dist/timeline/index.mjs +1 -1
- package/dist/video/index.cjs +1 -1
- package/dist/video/index.mjs +1 -1
- package/dist/vue/index.cjs +3 -3
- 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 +1 -1
- package/dist/chunk-HX4SP5WN.mjs +0 -3
- package/dist/chunk-KV3WCPQ5.mjs +0 -1
- package/dist/chunk-LTCJVVSC.mjs +0 -1
- package/dist/chunk-WXUOF4NM.mjs +0 -1
- package/dist/chunk-YWKPTYSG.mjs +0 -1
|
@@ -150,7 +150,7 @@ var SvgScrollDraw = (() => {
|
|
|
150
150
|
const rect = el.getBoundingClientRect();
|
|
151
151
|
const size = axis === "x" ? rect.width : rect.height;
|
|
152
152
|
if (scrollEl) {
|
|
153
|
-
const top = axis === "x" ? rect.left - scrollEl.getBoundingClientRect().left + scrollEl.scrollLeft : rect.top - scrollEl.getBoundingClientRect().top + scrollEl.scrollTop;
|
|
153
|
+
const top = axis === "x" ? rect.left - scrollEl.getBoundingClientRect().left - scrollEl.clientLeft + scrollEl.scrollLeft : rect.top - scrollEl.getBoundingClientRect().top - scrollEl.clientTop + scrollEl.scrollTop;
|
|
154
154
|
return { top, height: size, scroll: 0 };
|
|
155
155
|
}
|
|
156
156
|
return {
|
|
@@ -536,8 +536,8 @@ var SvgScrollDraw = (() => {
|
|
|
536
536
|
} = options;
|
|
537
537
|
const clipDirection = clip === true ? "left" : typeof clip === "string" ? clip : false;
|
|
538
538
|
const easeFn = typeof easing === "function" ? easing : EASINGS[easing] ?? EASINGS.linear;
|
|
539
|
-
const startConfig = parseTrigger(trigger.start
|
|
540
|
-
const endConfig = parseTrigger(trigger.end
|
|
539
|
+
const startConfig = parseTrigger(trigger.start || "top bottom");
|
|
540
|
+
const endConfig = parseTrigger(trigger.end || "bottom top");
|
|
541
541
|
const scrollEl = typeof scrollContainer === "string" ? document.querySelector(scrollContainer) : scrollContainer ?? null;
|
|
542
542
|
const colorFrom = Array.isArray(strokeColor) ? strokeColor[0] : null;
|
|
543
543
|
const colorTo = Array.isArray(strokeColor) ? strokeColor[1] : typeof strokeColor === "string" ? strokeColor : null;
|
|
@@ -630,6 +630,9 @@ var SvgScrollDraw = (() => {
|
|
|
630
630
|
};
|
|
631
631
|
return inst;
|
|
632
632
|
}
|
|
633
|
+
function latch(i, raw) {
|
|
634
|
+
return once && !autoReverse ? Math.max(frozenAlpha, easeFn(frozenPath[i] = Math.max(frozenPath[i] ?? 0, raw))) : easeFn(raw);
|
|
635
|
+
}
|
|
633
636
|
function applyAlpha(alpha, dir) {
|
|
634
637
|
container.style.setProperty("--scroll-draw-progress", String(alpha));
|
|
635
638
|
if (clipDirection) {
|
|
@@ -637,28 +640,28 @@ var SvgScrollDraw = (() => {
|
|
|
637
640
|
container.style.clipPath = computeClipPath(a);
|
|
638
641
|
return;
|
|
639
642
|
}
|
|
640
|
-
paths.forEach((el, i) =>
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
643
|
+
paths.forEach((el, i) => paint(el, i, alpha, dir));
|
|
644
|
+
}
|
|
645
|
+
function paint(el, i, alpha, dir) {
|
|
646
|
+
el.style.strokeDashoffset = dir === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
|
|
647
|
+
if (fade) el.style.opacity = dir === "reverse" ? `${1 - alpha}` : `${alpha}`;
|
|
648
|
+
if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
|
|
649
|
+
else if (colorTo) el.style.stroke = colorTo;
|
|
650
|
+
if (widthFrom !== null && widthTo !== null)
|
|
651
|
+
el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
|
|
652
|
+
else if (widthTo !== null)
|
|
653
|
+
el.style.strokeWidth = `${widthTo}`;
|
|
654
|
+
if (fillOpacityFrom !== null && fillOpacityTo !== null)
|
|
655
|
+
el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
|
|
656
|
+
else if (fillOpacityTo !== null)
|
|
657
|
+
el.style.fillOpacity = `${fillOpacityTo}`;
|
|
658
|
+
if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
|
|
659
|
+
el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
|
|
657
660
|
}
|
|
658
661
|
function resetPaths() {
|
|
659
662
|
container.style.setProperty("--scroll-draw-progress", "0");
|
|
660
663
|
if (clipDirection) {
|
|
661
|
-
container.style.clipPath = computeClipPath(0);
|
|
664
|
+
container.style.clipPath = computeClipPath(direction === "reverse" ? 1 : 0);
|
|
662
665
|
return;
|
|
663
666
|
}
|
|
664
667
|
paths.forEach((el, i) => {
|
|
@@ -705,19 +708,8 @@ var SvgScrollDraw = (() => {
|
|
|
705
708
|
if (fillOpacityFrom !== null) el.style.fillOpacity = `${fillOpacityFrom}`;
|
|
706
709
|
}
|
|
707
710
|
});
|
|
708
|
-
if (
|
|
709
|
-
if (
|
|
710
|
-
container.style.clipPath = computeClipPath(1);
|
|
711
|
-
onComplete?.();
|
|
712
|
-
return { destroy: () => {
|
|
713
|
-
}, replay: () => {
|
|
714
|
-
}, pause: () => {
|
|
715
|
-
}, resume: () => {
|
|
716
|
-
}, seek: () => {
|
|
717
|
-
}, getProgress: () => 1 };
|
|
718
|
-
}
|
|
719
|
-
container.style.clipPath = computeClipPath(0);
|
|
720
|
-
} else if (prefersReduced) {
|
|
711
|
+
if (prefersReduced) {
|
|
712
|
+
if (clipDirection) container.style.clipPath = computeClipPath(1);
|
|
721
713
|
onComplete?.();
|
|
722
714
|
return { destroy: () => {
|
|
723
715
|
}, replay: () => {
|
|
@@ -726,9 +718,12 @@ var SvgScrollDraw = (() => {
|
|
|
726
718
|
}, seek: () => {
|
|
727
719
|
}, getProgress: () => 1 };
|
|
728
720
|
}
|
|
721
|
+
if (clipDirection) container.style.clipPath = computeClipPath(direction === "reverse" ? 1 : 0);
|
|
729
722
|
const cssTiming = typeof easing === "string" ? cssTimingFor(easing) : null;
|
|
730
723
|
function nativeEligible() {
|
|
731
724
|
if (native === false) return false;
|
|
725
|
+
if (autoplay) return false;
|
|
726
|
+
if (debug) return false;
|
|
732
727
|
if (!supportsNativeTimeline()) return false;
|
|
733
728
|
if (!paths.length) return false;
|
|
734
729
|
if (!cssTiming) return false;
|
|
@@ -746,8 +741,8 @@ var SvgScrollDraw = (() => {
|
|
|
746
741
|
if (delay > 0) return false;
|
|
747
742
|
if (onProgress || onStart || onComplete || onEnter || onLeave || onEnterBack || onLeaveBack) return false;
|
|
748
743
|
if (strokeColor != null || strokeWidth != null || fillOpacity != null) return false;
|
|
749
|
-
if ((trigger.start
|
|
750
|
-
if ((trigger.end
|
|
744
|
+
if ((trigger.start || "top bottom").trim() !== "top bottom") return false;
|
|
745
|
+
if ((trigger.end || "bottom top").trim() !== "bottom top") return false;
|
|
751
746
|
return true;
|
|
752
747
|
}
|
|
753
748
|
function buildNative() {
|
|
@@ -852,11 +847,13 @@ var SvgScrollDraw = (() => {
|
|
|
852
847
|
if (nativeEligible()) return tracked(buildNative());
|
|
853
848
|
function buildAutoplay() {
|
|
854
849
|
const effectiveDuration = Math.max(1, duration);
|
|
850
|
+
const runMs = clipDirection ? effectiveDuration : effectiveDuration * (1 + Math.max(0, paths.length - 1) * stagger);
|
|
855
851
|
let startTime = 0;
|
|
856
852
|
let pausedElapsed = 0;
|
|
857
853
|
let running = false;
|
|
858
854
|
function applyAutoAlpha(elapsed) {
|
|
859
855
|
let allDone = true;
|
|
856
|
+
const runRaw = Math.min(1, Math.max(0, elapsed / runMs));
|
|
860
857
|
if (clipDirection) {
|
|
861
858
|
const raw = Math.min(1, Math.max(0, elapsed / effectiveDuration));
|
|
862
859
|
const alpha = easeFn(raw);
|
|
@@ -869,32 +866,16 @@ var SvgScrollDraw = (() => {
|
|
|
869
866
|
paths.forEach((el, i) => {
|
|
870
867
|
const staggerMs = i * stagger * effectiveDuration;
|
|
871
868
|
const raw = Math.min(1, Math.max(0, (elapsed - staggerMs) / effectiveDuration));
|
|
872
|
-
|
|
873
|
-
el.style.strokeDashoffset = direction === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
|
|
874
|
-
if (fade) el.style.opacity = direction === "reverse" ? `${1 - alpha}` : `${alpha}`;
|
|
875
|
-
if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
|
|
876
|
-
else if (colorTo) el.style.stroke = colorTo;
|
|
877
|
-
if (widthFrom !== null && widthTo !== null)
|
|
878
|
-
el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
|
|
879
|
-
else if (widthTo !== null)
|
|
880
|
-
el.style.strokeWidth = `${widthTo}`;
|
|
881
|
-
if (fillOpacityFrom !== null && fillOpacityTo !== null)
|
|
882
|
-
el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
|
|
883
|
-
else if (fillOpacityTo !== null)
|
|
884
|
-
el.style.fillOpacity = `${fillOpacityTo}`;
|
|
885
|
-
if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
|
|
886
|
-
el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
|
|
887
|
-
if (i === 0) {
|
|
888
|
-
currentAlpha = alpha;
|
|
889
|
-
onProgress?.(alpha);
|
|
890
|
-
container.style.setProperty("--scroll-draw-progress", String(alpha));
|
|
891
|
-
}
|
|
869
|
+
paint(el, i, easeFn(raw), direction);
|
|
892
870
|
if (raw < 1) allDone = false;
|
|
893
871
|
});
|
|
872
|
+
const runAlpha = easeFn(runRaw);
|
|
873
|
+
currentAlpha = runAlpha;
|
|
874
|
+
onProgress?.(runAlpha);
|
|
875
|
+
container.style.setProperty("--scroll-draw-progress", String(runAlpha));
|
|
894
876
|
}
|
|
895
877
|
if (waypoints) {
|
|
896
|
-
const
|
|
897
|
-
const globalAlpha = easeFn(globalRaw);
|
|
878
|
+
const globalAlpha = easeFn(runRaw);
|
|
898
879
|
for (const key in waypoints) {
|
|
899
880
|
const t = parseFloat(key);
|
|
900
881
|
if (globalAlpha >= t && !firedWaypoints.has(t)) {
|
|
@@ -915,7 +896,7 @@ var SvgScrollDraw = (() => {
|
|
|
915
896
|
const done = applyAutoAlpha(elapsed);
|
|
916
897
|
if (done && !completed) {
|
|
917
898
|
completed = true;
|
|
918
|
-
applyAutoAlpha(
|
|
899
|
+
applyAutoAlpha(runMs);
|
|
919
900
|
onComplete?.();
|
|
920
901
|
const maxRepeats = repeat === "infinite" ? Infinity : repeat ?? 0;
|
|
921
902
|
if (repeatCount < maxRepeats) {
|
|
@@ -1006,7 +987,7 @@ var SvgScrollDraw = (() => {
|
|
|
1006
987
|
const clamped = Math.min(1, Math.max(0, p));
|
|
1007
988
|
currentAlpha = clamped;
|
|
1008
989
|
paused = true;
|
|
1009
|
-
pausedElapsed = clamped *
|
|
990
|
+
pausedElapsed = clamped * runMs;
|
|
1010
991
|
startTime = performance.now() - pausedElapsed;
|
|
1011
992
|
cancelAnimationFrame(rafId);
|
|
1012
993
|
applyAutoAlpha(pausedElapsed);
|
|
@@ -1058,11 +1039,7 @@ var SvgScrollDraw = (() => {
|
|
|
1058
1039
|
}
|
|
1059
1040
|
prevRawProgress = rawProgress;
|
|
1060
1041
|
if (clipDirection) {
|
|
1061
|
-
|
|
1062
|
-
if (once && !autoReverse) {
|
|
1063
|
-
frozenAlpha = Math.max(frozenAlpha, alpha);
|
|
1064
|
-
alpha = frozenAlpha;
|
|
1065
|
-
}
|
|
1042
|
+
const alpha = latch(0, computeProgress(currentScroll, tStart, tEnd, effectiveSpeed));
|
|
1066
1043
|
currentAlpha = alpha;
|
|
1067
1044
|
container.style.setProperty("--scroll-draw-progress", String(alpha));
|
|
1068
1045
|
const visual = effectiveDir === "reverse" ? 1 - alpha : alpha;
|
|
@@ -1080,9 +1057,10 @@ var SvgScrollDraw = (() => {
|
|
|
1080
1057
|
repeatCount++;
|
|
1081
1058
|
repeatTimer = setTimeout(() => {
|
|
1082
1059
|
frozenAlpha = -1;
|
|
1060
|
+
frozenPath = [];
|
|
1083
1061
|
started = false;
|
|
1084
1062
|
completed = false;
|
|
1085
|
-
|
|
1063
|
+
resetPaths();
|
|
1086
1064
|
}, repeatDelay);
|
|
1087
1065
|
}
|
|
1088
1066
|
} else if (alpha < 1 && !once) {
|
|
@@ -1093,24 +1071,8 @@ var SvgScrollDraw = (() => {
|
|
|
1093
1071
|
}
|
|
1094
1072
|
paths.forEach((el, i) => {
|
|
1095
1073
|
const offset = i * staggerFit * range;
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
alpha = frozenPath[i] = Math.max(frozenPath[i] ?? frozenAlpha, alpha);
|
|
1099
|
-
}
|
|
1100
|
-
el.style.strokeDashoffset = effectiveDir === "reverse" ? `${lengths[i] * alpha}` : `${lengths[i] * (1 - alpha)}`;
|
|
1101
|
-
if (fade) el.style.opacity = effectiveDir === "reverse" ? `${1 - alpha}` : `${alpha}`;
|
|
1102
|
-
if (colorFrom && colorTo) el.style.stroke = lerpColor(colorFrom, colorTo, alpha);
|
|
1103
|
-
else if (colorTo) el.style.stroke = colorTo;
|
|
1104
|
-
if (widthFrom !== null && widthTo !== null)
|
|
1105
|
-
el.style.strokeWidth = `${widthFrom + (widthTo - widthFrom) * alpha}`;
|
|
1106
|
-
else if (widthTo !== null)
|
|
1107
|
-
el.style.strokeWidth = `${widthTo}`;
|
|
1108
|
-
if (fillOpacityFrom !== null && fillOpacityTo !== null)
|
|
1109
|
-
el.style.fillOpacity = `${fillOpacityFrom + (fillOpacityTo - fillOpacityFrom) * alpha}`;
|
|
1110
|
-
else if (fillOpacityTo !== null)
|
|
1111
|
-
el.style.fillOpacity = `${fillOpacityTo}`;
|
|
1112
|
-
if (morphTo && el.tagName.toLowerCase() === "path" && originalDs[i])
|
|
1113
|
-
el.setAttribute("d", morphPath(originalDs[i], morphTo, alpha));
|
|
1074
|
+
const alpha = latch(i, computeProgress(currentScroll, tStart + offset, tEnd + offset, effectiveSpeed));
|
|
1075
|
+
paint(el, i, alpha, effectiveDir);
|
|
1114
1076
|
if (i === 0) {
|
|
1115
1077
|
currentAlpha = alpha;
|
|
1116
1078
|
onProgress?.(alpha);
|
|
@@ -1398,8 +1360,8 @@ var SvgScrollDraw = (() => {
|
|
|
1398
1360
|
onLeaveBack
|
|
1399
1361
|
} = options;
|
|
1400
1362
|
const easeFn = typeof easing === "function" ? easing : EASINGS[easing] ?? EASINGS["ease-out"];
|
|
1401
|
-
const startConfig = parseTrigger(trigger.start
|
|
1402
|
-
const endConfig = parseTrigger(trigger.end
|
|
1363
|
+
const startConfig = parseTrigger(trigger.start || "top bottom");
|
|
1364
|
+
const endConfig = parseTrigger(trigger.end || "bottom top");
|
|
1403
1365
|
const triggerEl = triggerElement ?? el;
|
|
1404
1366
|
const scrollEl = typeof scrollContainer === "string" ? document.querySelector(scrollContainer) : scrollContainer ?? null;
|
|
1405
1367
|
const entries = Object.entries(props).map(([key, val]) => ({
|
|
@@ -1436,6 +1398,14 @@ var SvgScrollDraw = (() => {
|
|
|
1436
1398
|
return { ...NOOP, destroy: restoreInline, getProgress: () => 1 };
|
|
1437
1399
|
}
|
|
1438
1400
|
resolveFromValues();
|
|
1401
|
+
const scrollPos = () => {
|
|
1402
|
+
if (scrollEl) return axis === "x" ? scrollEl.scrollLeft : scrollEl.scrollTop;
|
|
1403
|
+
return axis === "x" ? window.scrollX : window.scrollY;
|
|
1404
|
+
};
|
|
1405
|
+
const vpSize = () => {
|
|
1406
|
+
if (scrollEl) return axis === "x" ? scrollEl.clientWidth : scrollEl.clientHeight;
|
|
1407
|
+
return axis === "x" ? window.innerWidth : window.innerHeight;
|
|
1408
|
+
};
|
|
1439
1409
|
const cssTiming = typeof easing === "string" ? cssTimingFor(easing) : null;
|
|
1440
1410
|
function nativeEligible() {
|
|
1441
1411
|
if (!native) return false;
|
|
@@ -1448,8 +1418,8 @@ var SvgScrollDraw = (() => {
|
|
|
1448
1418
|
if (speed !== 1) return false;
|
|
1449
1419
|
if (onProgress || onComplete || onEnter || onLeave || onEnterBack || onLeaveBack) return false;
|
|
1450
1420
|
if (velocityScale !== false) return false;
|
|
1451
|
-
if ((trigger.start
|
|
1452
|
-
if ((trigger.end
|
|
1421
|
+
if ((trigger.start || "top bottom").trim() !== "top bottom") return false;
|
|
1422
|
+
if ((trigger.end || "bottom top").trim() !== "bottom top") return false;
|
|
1453
1423
|
for (const entry of entries) {
|
|
1454
1424
|
if (!NATIVE_SAFE_PROPS.has(entry.prop)) return false;
|
|
1455
1425
|
}
|
|
@@ -1464,11 +1434,9 @@ var SvgScrollDraw = (() => {
|
|
|
1464
1434
|
style.textContent = `@keyframes ${cls}{from{${fromBody}}to{${toBody}}}.${cls}{animation-name:${cls};animation-duration:auto;animation-timing-function:${cssTiming};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`;
|
|
1465
1435
|
document.head.appendChild(style);
|
|
1466
1436
|
el.classList.add(cls);
|
|
1467
|
-
const scrollPos2 = () => axis === "x" ? window.scrollX : window.scrollY;
|
|
1468
|
-
const vpSize2 = () => axis === "x" ? window.innerWidth : window.innerHeight;
|
|
1469
1437
|
const liveTriggers = () => {
|
|
1470
1438
|
const rect = el.getBoundingClientRect();
|
|
1471
|
-
return computeTriggers({ top: rect.top, height: rect.height },
|
|
1439
|
+
return computeTriggers({ top: rect.top, height: rect.height }, scrollPos(), vpSize(), startConfig, endConfig);
|
|
1472
1440
|
};
|
|
1473
1441
|
_register(el, {
|
|
1474
1442
|
type: "animate",
|
|
@@ -1506,7 +1474,7 @@ var SvgScrollDraw = (() => {
|
|
|
1506
1474
|
},
|
|
1507
1475
|
getProgress() {
|
|
1508
1476
|
const { tStart: tStart2, tEnd: tEnd2 } = liveTriggers();
|
|
1509
|
-
return easeFn(computeProgress(
|
|
1477
|
+
return easeFn(computeProgress(scrollPos(), tStart2, tEnd2, speed));
|
|
1510
1478
|
}
|
|
1511
1479
|
};
|
|
1512
1480
|
return instance;
|
|
@@ -1518,19 +1486,12 @@ var SvgScrollDraw = (() => {
|
|
|
1518
1486
|
let isVisible = false;
|
|
1519
1487
|
let paused = false;
|
|
1520
1488
|
let frozenAlpha = -1;
|
|
1489
|
+
let frozenRaw = 0;
|
|
1521
1490
|
let currentAlpha = 0;
|
|
1522
1491
|
let completed = false;
|
|
1523
1492
|
let prevRawProgress = NaN;
|
|
1524
1493
|
let prevVelScroll = -1;
|
|
1525
1494
|
let prevVelTime = 0;
|
|
1526
|
-
const scrollPos = () => {
|
|
1527
|
-
if (scrollEl) return axis === "x" ? scrollEl.scrollLeft : scrollEl.scrollTop;
|
|
1528
|
-
return axis === "x" ? window.scrollX : window.scrollY;
|
|
1529
|
-
};
|
|
1530
|
-
const vpSize = () => {
|
|
1531
|
-
if (scrollEl) return axis === "x" ? scrollEl.clientWidth : scrollEl.clientHeight;
|
|
1532
|
-
return axis === "x" ? window.innerWidth : window.innerHeight;
|
|
1533
|
-
};
|
|
1534
1495
|
const moving = triggerEl === el ? entries : [];
|
|
1535
1496
|
let measured = false;
|
|
1536
1497
|
function cacheTriggers() {
|
|
@@ -1584,11 +1545,8 @@ var SvgScrollDraw = (() => {
|
|
|
1584
1545
|
prevVelTime = now;
|
|
1585
1546
|
const raw = tEnd === tStart ? 0 : (currentScroll - tStart) / (tEnd - tStart);
|
|
1586
1547
|
fireScrollCallbacks(raw);
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
frozenAlpha = Math.max(frozenAlpha, alpha);
|
|
1590
|
-
alpha = frozenAlpha;
|
|
1591
|
-
}
|
|
1548
|
+
const progress = computeProgress(currentScroll, tStart, tEnd, effectiveSpeed);
|
|
1549
|
+
const alpha = once ? Math.max(frozenAlpha, easeFn(frozenRaw = Math.max(frozenRaw, progress))) : easeFn(progress);
|
|
1592
1550
|
currentAlpha = alpha;
|
|
1593
1551
|
applyAlpha(alpha);
|
|
1594
1552
|
if (alpha >= 1 && !completed) {
|
|
@@ -1607,10 +1565,9 @@ var SvgScrollDraw = (() => {
|
|
|
1607
1565
|
);
|
|
1608
1566
|
}
|
|
1609
1567
|
{
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
currentAlpha
|
|
1613
|
-
applyAlpha(initAlpha);
|
|
1568
|
+
frozenRaw = computeProgress(scrollPos(), tStart, tEnd, speed);
|
|
1569
|
+
currentAlpha = easeFn(frozenRaw);
|
|
1570
|
+
applyAlpha(currentAlpha);
|
|
1614
1571
|
}
|
|
1615
1572
|
const observer2 = new IntersectionObserver(
|
|
1616
1573
|
(ioEntries) => {
|
|
@@ -1649,6 +1606,7 @@ var SvgScrollDraw = (() => {
|
|
|
1649
1606
|
},
|
|
1650
1607
|
replay() {
|
|
1651
1608
|
frozenAlpha = -1;
|
|
1609
|
+
frozenRaw = 0;
|
|
1652
1610
|
completed = false;
|
|
1653
1611
|
currentAlpha = 0;
|
|
1654
1612
|
paused = false;
|
|
@@ -1667,6 +1625,7 @@ var SvgScrollDraw = (() => {
|
|
|
1667
1625
|
const clamped = Math.min(1, Math.max(0, p));
|
|
1668
1626
|
currentAlpha = clamped;
|
|
1669
1627
|
frozenAlpha = clamped;
|
|
1628
|
+
frozenRaw = 0;
|
|
1670
1629
|
paused = true;
|
|
1671
1630
|
cancelAnimationFrame(rafId);
|
|
1672
1631
|
applyAlpha(clamped);
|
|
@@ -1766,8 +1725,8 @@ var SvgScrollDraw = (() => {
|
|
|
1766
1725
|
} = options;
|
|
1767
1726
|
const fmt = decimals !== void 0 ? (n) => n.toFixed(decimals) : format ?? ((n) => String(Math.round(n)));
|
|
1768
1727
|
const easeFn = typeof easing === "function" ? easing : EASINGS[easing] ?? EASINGS["ease-out"];
|
|
1769
|
-
const startConfig = parseTrigger(trigger.start
|
|
1770
|
-
const endConfig = parseTrigger(trigger.end
|
|
1728
|
+
const startConfig = parseTrigger(trigger.start || "top 80%");
|
|
1729
|
+
const endConfig = parseTrigger(trigger.end || "top 20%");
|
|
1771
1730
|
if (prefersReduced) {
|
|
1772
1731
|
el.textContent = fmt(to);
|
|
1773
1732
|
onComplete?.();
|
|
@@ -1780,6 +1739,7 @@ var SvgScrollDraw = (() => {
|
|
|
1780
1739
|
let isVisible = false;
|
|
1781
1740
|
let paused = false;
|
|
1782
1741
|
let frozenAlpha = -1;
|
|
1742
|
+
let frozenRaw = 0;
|
|
1783
1743
|
let currentAlpha = 0;
|
|
1784
1744
|
let completed = false;
|
|
1785
1745
|
const scrollPos = () => window.scrollY;
|
|
@@ -1804,11 +1764,8 @@ var SvgScrollDraw = (() => {
|
|
|
1804
1764
|
}
|
|
1805
1765
|
function update() {
|
|
1806
1766
|
if (!isVisible || paused) return;
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
frozenAlpha = Math.max(frozenAlpha, alpha);
|
|
1810
|
-
alpha = frozenAlpha;
|
|
1811
|
-
}
|
|
1767
|
+
const progress = computeProgress(scrollPos(), tStart, tEnd, 1);
|
|
1768
|
+
const alpha = once ? Math.max(frozenAlpha, easeFn(frozenRaw = Math.max(frozenRaw, progress))) : easeFn(progress);
|
|
1812
1769
|
currentAlpha = alpha;
|
|
1813
1770
|
applyAlpha(alpha);
|
|
1814
1771
|
if (alpha >= 1 && !completed) {
|
|
@@ -1821,8 +1778,8 @@ var SvgScrollDraw = (() => {
|
|
|
1821
1778
|
}
|
|
1822
1779
|
cacheTriggers();
|
|
1823
1780
|
{
|
|
1824
|
-
|
|
1825
|
-
|
|
1781
|
+
frozenRaw = computeProgress(scrollPos(), tStart, tEnd, 1);
|
|
1782
|
+
const initAlpha = easeFn(frozenRaw);
|
|
1826
1783
|
currentAlpha = initAlpha;
|
|
1827
1784
|
applyAlpha(initAlpha);
|
|
1828
1785
|
}
|
|
@@ -1861,6 +1818,7 @@ var SvgScrollDraw = (() => {
|
|
|
1861
1818
|
},
|
|
1862
1819
|
replay() {
|
|
1863
1820
|
frozenAlpha = -1;
|
|
1821
|
+
frozenRaw = 0;
|
|
1864
1822
|
completed = false;
|
|
1865
1823
|
currentAlpha = 0;
|
|
1866
1824
|
paused = false;
|
|
@@ -1879,6 +1837,7 @@ var SvgScrollDraw = (() => {
|
|
|
1879
1837
|
const clamped = Math.min(1, Math.max(0, p));
|
|
1880
1838
|
currentAlpha = clamped;
|
|
1881
1839
|
frozenAlpha = clamped;
|
|
1840
|
+
frozenRaw = 0;
|
|
1882
1841
|
paused = true;
|
|
1883
1842
|
cancelAnimationFrame(rafId);
|
|
1884
1843
|
applyAlpha(clamped);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";var SvgScrollDraw=(()=>{var
|
|
1
|
+
"use strict";var SvgScrollDraw=(()=>{var vt=Object.defineProperty;var dr=Object.getOwnPropertyDescriptor;var gr=Object.getOwnPropertyNames;var yr=Object.prototype.hasOwnProperty;var hr=(e,t)=>{for(var r in t)vt(e,r,{get:t[r],enumerable:!0})},br=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of gr(t))!yr.call(e,s)&&s!==r&&vt(e,s,{get:()=>t[s],enumerable:!(n=dr(t,s))||n.enumerable});return e};var wr=e=>br(vt({},"__esModule",{value:!0}),e);var qr={};hr(qr,{Cinematic:()=>ft,PRESETS:()=>ot,createBounce:()=>Et,createElastic:()=>St,createSpring:()=>Ht,scrollAnimate:()=>nr,scrollCounter:()=>sr,scrollDraw:()=>Zt,scrollParallax:()=>or});function Ht({tension:e=2.5,friction:t=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,t)}function Et({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,c=[];for(let f=0;f<r;f++){let v=Math.pow(s,f);c.push(v),i+=v}let m=[0],u=0;for(let f=0;f<r;f++)u+=c[f]/i,m.push(u);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 A=(f-m[v])/(m[v+1]-m[v]);if(v===0)return A*(2-A);let b=1-Math.pow(n,v);return b+(1-b)*(2*A-1)*(2*A-1)}return 1}}function St({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 Z={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:Et(),elastic:St()};function _t(e,t,r){return Math.min(r,Math.max(t,e))}function Pe(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 Vt(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 zt(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 re(e,t,r,n){return r===t?0:_t((e-t)/(r-t)*n,0,1)}function Ne(e,t,r,n,s){let i=Vt(e.top,e.height,t,n.element)-zt(n.viewport,r),c=Vt(e.top,e.height,t,s.element)-zt(s.viewport,r);return{tStart:i,tEnd:c}}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.clientLeft+t.scrollLeft:n.top-t.getBoundingClientRect().top-t.clientTop+t.scrollTop,height:s,scroll:0}:{top:r==="x"?n.left:n.top,height:s,scroll:r==="x"?window.scrollX:window.scrollY}}function We(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 qt(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 nt(e,t,r){let n=qt(e),s=qt(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 ot={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 G(e,...t){}var vr="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Er="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",Wt=33;function Sr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function xr(e){let t=[];for(let r=0;r<Wt;r++){let n=r/(Wt-1);t.push(String(Math.round(e(n)*1e5)/1e5))}return`linear(${t.join(",")})`}function st(e){switch(e){case"linear":return"linear";case"ease-in":return vr;case"ease-out":return Er;case"ease-in-out":return Sr()?xr(Z["ease-in-out"]):null;default:return null}}var Bt=Symbol.for("svg-scroll-draw.registry");function Gt(){let e=globalThis;return e[Bt]||(e[Bt]=new Map)}function ke(e,t){Gt().set(e,t)}function ve(e){Gt().delete(e)}var Ye,it=new Set,at=new WeakMap,Xe=new Map,jt=e=>{let t=e.getBoundingClientRect();return t.width+" "+t.height};function Tr(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 Be(e,t){if(typeof ResizeObserver>"u"||typeof document>"u")return()=>{};let r=()=>t();Ye??(Ye=new ResizeObserver(s=>{let i=!1;for(let{target:c}of s)at.get(c)!==jt(c)&&(i=!0),at.set(c,"");i&&it.forEach(c=>c())})),it.add(r);let n=Tr(e);return[document.body,document.documentElement].forEach(s=>s&&n.add(s)),n.forEach(s=>{at.has(s)||at.set(s,jt(s)),Xe.set(s,(Xe.get(s)??0)+1),Ye.observe(s)}),()=>{it.delete(r)&&(n.forEach(s=>{let i=(Xe.get(s)??1)-1;if(i)return void Xe.set(s,i);Xe.delete(s),Ye?.unobserve(s)}),it.size||(Ye?.disconnect(),Ye=void 0))}}function lt(e){if(typeof window>"u"||typeof window.matchMedia!="function")return()=>{};let t=window.matchMedia("(prefers-reduced-motion: reduce)"),r=s=>e(!!s.matches);if(typeof t.addEventListener=="function")return t.addEventListener("change",r),()=>t.removeEventListener("change",r);let n=t;return n.addListener?.(r),()=>n.removeListener?.(r)}function Ge(e,t){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t(e,!0);let r=t(e,!1),n=lt(i=>{if(!i)return;n();let c=(r.getProgress?.()??0)>=1;r.destroy(),r=t(c?{...e,onComplete:void 0}:e,!0)}),s={};for(let i of Object.keys(r))s[i]=(...c)=>r[i]?.(...c);return s.destroy=()=>{n(),r.destroy()},s}var Ar=0;function Mr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Qt(e,t){let r="";try{r=getComputedStyle(e).getPropertyValue(t).trim()}catch{}return r||(e.getAttribute(t)??"").trim()}var Ut=new Set(["","none","transparent","rgba(0, 0, 0, 0)"]);function Lr(e){if(!!1)return;let t=Qt(e,"stroke");if(!t||t==="none"){G("Element has no stroke \u2014 path will not be visible.",e);return}let r=(e.getAttribute("fill")??"").trim();r&&!Ut.has(r)&&!Ut.has(Qt(e,"fill"))&&G("Element has a fill \u2014 it may obscure the stroke animation.",e)}function Pr(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,c=e-i,m=t-i,u=r==="x";n.innerHTML=`
|
|
2
2
|
<div style="position:absolute;${u?`left:${c}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${c}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;${u?`left:${f}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${f}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 Qt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Yt=/[MmLlHhVvCcSsQqTtAaZz]/g;function Mr(e,r,t){if(!!1)return;let n=(e.match(Yt)??[]).join("").toUpperCase(),s=(r.match(Yt)??[]).join("").toUpperCase(),i=(e.match(Qt)??[]).length,c=(r.match(Qt)??[]).length;if(n!==s){Y(`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.`,t);return}i!==c&&Y(`morphTo: coordinate count differs (${i} \u2192 ${c}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,t)}function St(e,r,t){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),s=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,i=>{let c=parseFloat(i),f=n[s++]??c;return String(+(c+(f-c)*t).toFixed(4))})}function ct(e,r={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:Ge(r,(t,n)=>Lr(e,t,n))}function Lr(e,r,t){let{preset:n,...s}=r,i=n?{...ot[n],...s}:s,{selector:c="path, polyline, line, polygon, rect, circle",speed:f=1,fade:u=!1,easing:p="linear",trigger:S={},stagger:P=0,direction:x="forward",once:U=!1,debug:pe=!1,axis:F="y",scrollContainer:T,autoReverse:M=!1,delay:d=0,strokeColor:E,strokeWidth:w,fillOpacity:I,waypoints:z,velocityScale:N=!1,threshold:X=0,rootMargin:_e="0px",repeat:le=0,repeatDelay:ce=0,morphTo:H,clip:xe,autoplay:Ne=!1,duration:Te=1e3,native:ie=!0,onProgress:g,onStart:k,onComplete:de,onEnter:be,onLeave:Ae,onEnterBack:Me,onLeaveBack:He}=i,Z=xe===!0?"left":typeof xe=="string"?xe:!1,ge=typeof p=="function"?p:te[p]??te.linear,je=$e(S.start??"top bottom"),Qe=$e(S.end??"bottom top"),ae=typeof T=="string"?document.querySelector(T):T??null,J=Array.isArray(E)?E[0]:null,j=Array.isArray(E)?E[1]:typeof E=="string"?E:null,Q=Array.isArray(w)?w[0]:null,W=Array.isArray(w)?w[1]:typeof w=="number"?w:null,re=Array.isArray(I)?I[0]:null,G=Array.isArray(I)?I[1]:typeof I=="number"?I:null;function we(o){let l=o*100;switch(Z){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 D=Z?[]:Array.from(e.querySelectorAll(c)),L=[],ne=[],a=0,m=0,ye=P,ue=0,A=!1,C=!1,_=0,Ce=!1,R=-1,Le=[],De=-1,K=!1,ve=0,Pe=0,Oe,pt=null;function Lt(){pt?.destroy(),pt=null}let Ie=new Set,Pt=NaN,Re=!0,Je=-1,$t=performance.now(),Ve=NaN;function Ye(){return ae?F==="x"?ae.scrollLeft:ae.scrollTop:F==="x"?window.scrollX:window.scrollY}function kt(){return ae?F==="x"?ae.clientWidth:ae.clientHeight:F==="x"?window.innerWidth:window.innerHeight}function Ct(){let o=nt(e,ae,F);return Fe(o,o.scroll,kt(),je,Qe)}function sr(){let o=m-a,l=D.length-1,h=ae??document.documentElement,q=F==="x"?"Width":"Height";if(ye=P,P>0&&l>0&&o>0){let me=h[`scroll${q}`]-h[`client${q}`]-1-a-o/f;me>=0&&(ye=Math.min(P,me/(l*o)))}ue=m+l*ye*o}function Dt(){({tStart:a,tEnd:m}=Ct()),sr(),pe&&!1&&(Lt(),pt=Ar(a,m,F))}function dt(o,l=Ct){ke(e,{type:"draw",getProgress:()=>o.getProgress(),getTrigger:l});let h=o.destroy;return o.destroy=()=>{h.call(o),Se(e)},o}function ir(o,l){if(e.style.setProperty("--scroll-draw-progress",String(o)),Z){let h=l==="reverse"?1-o:o;e.style.clipPath=we(h);return}D.forEach((h,q)=>{h.style.strokeDashoffset=l==="reverse"?`${L[q]*o}`:`${L[q]*(1-o)}`,u&&(h.style.opacity=l==="reverse"?`${1-o}`:`${o}`),J&&j?h.style.stroke=qe(J,j,o):j&&(h.style.stroke=j),Q!==null&&W!==null?h.style.strokeWidth=`${Q+(W-Q)*o}`:W!==null&&(h.style.strokeWidth=`${W}`),re!==null&&G!==null?h.style.fillOpacity=`${re+(G-re)*o}`:G!==null&&(h.style.fillOpacity=`${G}`),H&&h.tagName.toLowerCase()==="path"&&ne[q]&&h.setAttribute("d",St(ne[q],H,o))})}function Ke(){if(e.style.setProperty("--scroll-draw-progress","0"),Z){e.style.clipPath=we(0);return}D.forEach((o,l)=>{o.style.strokeDasharray=`${L[l]}`,o.style.strokeDashoffset=x==="reverse"?"0":`${L[l]}`,u?o.style.opacity=x==="reverse"?"1":"0":o.style.opacity="",J&&(o.style.stroke=J),Q!==null&&(o.style.strokeWidth=`${Q}`),re!==null&&(o.style.fillOpacity=`${re}`),H&&o.tagName.toLowerCase()==="path"&&ne[l]&&o.setAttribute("d",ne[l])})}if(D.forEach(o=>{Tr(o);let l=We(o);L.push(l);let h=o.tagName.toLowerCase()==="path";h?ne.push(o.getAttribute("d")??""):ne.push(""),H&&(h?Mr(ne[ne.length-1],H,o):Y(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),t?(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=x==="reverse"?`${l}`:"0",u&&(o.style.opacity="1"),j&&(o.style.stroke=j),W!==null&&(o.style.strokeWidth=`${W}`),G!==null&&(o.style.fillOpacity=`${G}`),H&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",H)):(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=x==="reverse"?"0":`${l}`,u?o.style.opacity=x==="reverse"?"1":"0":o.style.opacity="",J&&(o.style.stroke=J),Q!==null&&(o.style.strokeWidth=`${Q}`),re!==null&&(o.style.fillOpacity=`${re}`))}),Z){if(t)return e.style.clipPath=we(1),de?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=we(0)}else if(t)return de?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let Ot=typeof p=="string"?st(p):null;function ar(){return!(ie===!1||!xr()||!D.length||!Ot||Z||F!=="y"||ae||f!==1||P!==0||U||M||N!==!1||H||z||le||d>0||g||k||de||be||Ae||Me||He||E!=null||w!=null||I!=null||(S.start??"top bottom").trim()!=="top bottom"||(S.end??"bottom top").trim()!=="bottom top")}function lr(){let o=++Sr,l=`svg-scroll-draw-${o}`,h=`svg-scroll-draw-host-${o}`,q=`--svg-scroll-draw-${o}`,me=x==="reverse"?"0":"var(--ssd-len)",Ee=x==="reverse"?"var(--ssd-len)":"0",he=`stroke-dashoffset:${me};`,v=`stroke-dashoffset:${Ee};`;u&&(he+=`opacity:${x==="reverse"?1:0};`,v+=`opacity:${x==="reverse"?0:1};`);let $=document.createElement("style");$.setAttribute("data-svg-scroll-draw",""),$.textContent=`@keyframes ${l}{from{${he}}to{${v}}}.${h}{view-timeline-name:${q};view-timeline-axis:block;}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${Ot};animation-fill-mode:both;animation-timeline:${q};animation-range:cover 0% cover 100%;}`,document.head.appendChild($),e.classList.add(h);function ee(y,B){y.style.setProperty("--ssd-len",String(L[B])),y.style.strokeDasharray=`${L[B]}`,y.style.strokeDashoffset="",y.style.opacity="",y.style.animationPlayState="",y.classList.add(l)}D.forEach(ee);let b=!1,O=-1;function V(){if(O>=0)return O;let y=e.getBoundingClientRect(),{tStart:B,tEnd:fe}=Fe({top:y.top,height:y.height},Ye(),kt(),je,Qe);return ge(se(Ye(),B,fe,f))}return{destroy(){e.classList.remove(h),D.forEach(y=>{y.classList.remove(l),y.style.removeProperty("--ssd-len"),y.style.animationPlayState=""}),$.remove()},replay(){b=!1,O=-1,D.forEach(ee)},pause(){b=!0,D.forEach(y=>{y.style.animationPlayState="paused"})},resume(){b&&(b=!1,D.forEach(y=>{y.style.animationPlayState="running"}))},seek(y){let B=Math.min(1,Math.max(0,y));O=B,b=!0,D.forEach((fe,oe)=>{fe.classList.remove(l),fe.style.strokeDashoffset=x==="reverse"?`${L[oe]*B}`:`${L[oe]*(1-B)}`,u&&(fe.style.opacity=x==="reverse"?`${1-B}`:`${B}`)})},getProgress(){return V()},refresh(){D.forEach((y,B)=>{L[B]=We(y),y.style.setProperty("--ssd-len",String(L[B])),y.style.strokeDasharray=`${L[B]}`})}}}if(ar())return dt(lr());function cr(){let o=Math.max(1,Te),l=0,h=0,q=!1;function me(b){let O=!0;if(Z){let V=Math.min(1,Math.max(0,b/o)),y=ge(V);ve=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=we(x==="reverse"?1-y:y),g?.(y),V<1&&(O=!1)}else D.forEach((V,y)=>{let B=y*P*o,fe=Math.min(1,Math.max(0,(b-B)/o)),oe=ge(fe);V.style.strokeDashoffset=x==="reverse"?`${L[y]*oe}`:`${L[y]*(1-oe)}`,u&&(V.style.opacity=x==="reverse"?`${1-oe}`:`${oe}`),J&&j?V.style.stroke=qe(J,j,oe):j&&(V.style.stroke=j),Q!==null&&W!==null?V.style.strokeWidth=`${Q+(W-Q)*oe}`:W!==null&&(V.style.strokeWidth=`${W}`),re!==null&&G!==null?V.style.fillOpacity=`${re+(G-re)*oe}`:G!==null&&(V.style.fillOpacity=`${G}`),H&&V.tagName.toLowerCase()==="path"&&ne[y]&&V.setAttribute("d",St(ne[y],H,oe)),y===0&&(ve=oe,g?.(oe),e.style.setProperty("--scroll-draw-progress",String(oe))),fe<1&&(O=!1)});if(z){let V=Math.min(1,Math.max(0,b/o)),y=ge(V);for(let B in z){let fe=parseFloat(B);y>=fe&&!Ie.has(fe)&&(Ie.add(fe),z[B]?.())}}return O}function Ee(b){if(K)return;let O=b-l;C||(C=!0,k?.());let V=me(O);if(V&&!A){A=!0,me(o*(1+Math.max(0,D.length-1)*P)),de?.(),Pe<(le==="infinite"?1/0:le??0)&&(Pe++,Oe=setTimeout(()=>{l=performance.now(),C=!1,A=!1,Ie.clear(),Ke(),_=requestAnimationFrame(Ee)},ce));return}V||(_=requestAnimationFrame(Ee))}function he(){cancelAnimationFrame(_),clearTimeout(Oe),l=performance.now(),h=0,K=!1,C=!1,A=!1,Pe=0,q=!0,ve=0,Ie.clear(),Ke(),_=requestAnimationFrame(Ee)}let v=new IntersectionObserver(b=>{b.forEach(O=>{O.isIntersecting&&!(U&&A)?he():!O.isIntersecting&&!U&&!A&&(cancelAnimationFrame(_),clearTimeout(Oe),q=!1)})},{root:ae??null,threshold:X,rootMargin:_e}),$;function ee(){clearTimeout($),$=setTimeout(()=>{D.forEach((b,O)=>{L[O]=We(b),b.style.strokeDasharray=`${L[O]}`})},150)}return window.addEventListener("resize",ee),window.addEventListener("orientationchange",ee),d>0?setTimeout(()=>v.observe(e),d):v.observe(e),{destroy(){cancelAnimationFrame(_),clearTimeout(Oe),v.disconnect(),window.removeEventListener("resize",ee),window.removeEventListener("orientationchange",ee),clearTimeout($)},replay(){Pe=0,he()},pause(){K||!q||(K=!0,h=performance.now()-l,cancelAnimationFrame(_))},resume(){K&&(K=!1,q=!0,l=performance.now()-h,_=requestAnimationFrame(Ee))},seek(b){let O=Math.min(1,Math.max(0,b));ve=O,K=!0,h=O*o,l=performance.now()-h,cancelAnimationFrame(_),me(h)},getProgress(){return ve},refresh(){clearTimeout($),D.forEach((b,O)=>{L[O]=We(b),b.style.strokeDasharray=`${L[O]}`})}}}if(Ne)return dt(cr());Dt();function It(){if(K||!ze)return;let o=performance.now(),l=Ye();if(!Re&&N===!1&&l===Pt){yt(l);return}Re=!1,Pt=l;let h=f;if(N!==!1){let v=o-$t,$=v>0?Math.abs(l-(Je<0?l:Je))/v:0;h=f*Math.max(.2,1+$*(typeof N=="number"?N:1)*.04)}Je=l,$t=o;let q=M?De===-1||l>=De?"forward":"reverse":x;De=l;let me=m-a,Ee=!0,he=me===0?0:(l-a)/me;if(isNaN(Ve)||(Ve<=0&&he>0?be?.():Ve>0&&he<=0&&He?.(),Ve<1&&he>=1?Ae?.():Ve>=1&&he<1&&Me?.()),Ve=he,Z){let v=ge(se(l,a,m,h));U&&!M&&(R=Math.max(R,v),v=R),ve=v,e.style.setProperty("--scroll-draw-progress",String(v));let $=q==="reverse"?1-v:v;e.style.clipPath=we($),g?.(v),!C&&se(l,a,m,h)>0&&(C=!0,k?.()),v>=1&&!A?(A=!0,de?.(),Pe<(le==="infinite"?1/0:le??0)&&(Pe++,Oe=setTimeout(()=>{R=-1,C=!1,A=!1,e.style.clipPath=we(0)},ce))):v<1&&!U&&(A=!1),yt(l);return}if(D.forEach((v,$)=>{let ee=$*ye*me,b=ge(se(l,a+ee,m+ee,h));U&&!M&&(b=Le[$]=Math.max(Le[$]??R,b)),v.style.strokeDashoffset=q==="reverse"?`${L[$]*b}`:`${L[$]*(1-b)}`,u&&(v.style.opacity=q==="reverse"?`${1-b}`:`${b}`),J&&j?v.style.stroke=qe(J,j,b):j&&(v.style.stroke=j),Q!==null&&W!==null?v.style.strokeWidth=`${Q+(W-Q)*b}`:W!==null&&(v.style.strokeWidth=`${W}`),re!==null&&G!==null?v.style.fillOpacity=`${re+(G-re)*b}`:G!==null&&(v.style.fillOpacity=`${G}`),H&&v.tagName.toLowerCase()==="path"&&ne[$]&&v.setAttribute("d",St(ne[$],H,b)),$===0&&(ve=b,g?.(b),e.style.setProperty("--scroll-draw-progress",String(b))),b<1&&(Ee=!1)}),z){let v=ge(se(l,a,m,h));for(let $ in z){let ee=parseFloat($);v>=ee&&!Ie.has(ee)&&(Ie.add(ee),z[$]?.())}}!C&&se(l,a,m,h)>0&&(C=!0,k?.()),Ee&&!A?(A=!0,de?.(),Pe<(le==="infinite"?1/0:le??0)&&(Pe++,Oe=setTimeout(()=>{R=-1,Le=[],C=!1,A=!1,Ie.clear(),Ke(),Re=!0},ce))):!Ee&&!U&&(A=!1),yt(l)}function gt(o){return o>=m&&o<ue}function yt(o){Ce||gt(o)?_=requestAnimationFrame(It):ze=!1}function ht(){return Ce||gt(Ye())}let ze=!1;function et(){ze||(ze=!0,_=requestAnimationFrame(function(){It()}))}function tt(){ze=!1,cancelAnimationFrame(_)}let bt=new IntersectionObserver(o=>{o.forEach(l=>{Ce=l.isIntersecting,Ce&&!K?(Re=!0,et()):ze&&!K&>(Ye())||tt()})},{root:ae??null,threshold:X,rootMargin:_e});function Rt(){D.forEach((o,l)=>{L[l]=We(o),o.style.strokeDasharray=`${L[l]}`}),Dt(),Re=!0}let rt;function Ue(){clearTimeout(rt),rt=setTimeout(Rt,150)}window.addEventListener("resize",Ue),window.addEventListener("orientationchange",Ue);let ur=Be([e],Ue);return d>0?setTimeout(()=>bt.observe(e),d):bt.observe(e),dt({destroy(){cancelAnimationFrame(_),clearTimeout(Oe),tt(),bt.disconnect(),ur(),window.removeEventListener("resize",Ue),window.removeEventListener("orientationchange",Ue),clearTimeout(rt),Lt()},replay(){R=-1,Le=[],De=-1,Je=-1,C=!1,A=!1,Pe=0,K=!1,ve=0,Ie.clear(),clearTimeout(Oe),Ke(),Re=!0,ht()&&et()},pause(){K=!0,tt()},resume(){K&&(K=!1,Re=!0,ht()&&et())},seek(o){let l=Math.min(1,Math.max(0,o));ve=l,R=l,Le=[],K=!0,tt(),ir(l,x),Re=!0},getProgress(){return ve},refresh(){clearTimeout(rt),Rt(),ht()&&!K&&et()}},()=>({tStart:a,tEnd:m}))}function Ut(e,r){let t={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return t;let n=typeof e=="string"?document.querySelector(e):e;return n?ct(n,r):(Y("Container not found:",e),t)}function Pr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Xt(e){let r=[],t=/([\w]+)\(([^)]*)\)/g,n;for(;(n=t.exec(e))!==null;){let s=[],i=[],c=n[2].trim();if(c)for(let f of c.split(/[\s,]+/)){let u=f.match(/^([-+]?[\d.eE]+)(.*)$/);s.push(u?parseFloat(u[1]):0),i.push(u?u[2]:"")}r.push({fn:n[1],nums:s,units:i})}return r}function $r(e,r,t){let n=Xt(e),s=Xt(r);return n.length===0||n.length!==s.length?t<1?e:r:n.map((i,c)=>{let f=s[c];return i.fn!==f.fn||i.nums.length!==f.nums.length?t<1?`${i.fn}(${i.nums.map((u,p)=>`${u}${i.units[p]}`).join(", ")})`:`${f.fn}(${f.nums.map((u,p)=>`${u}${f.units[p]}`).join(", ")})`:`${i.fn}(${i.nums.map((u,p)=>`${u+(f.nums[p]-u)*t}${i.units[p]}`).join(", ")})`}).join(" ")}function Zt(e,r,t){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*t);let n=String(e),s=String(r);if(Pr(n))return qe(n,s,t);if(n.includes("("))return $r(n,s,t);let i=n.match(/^([-+]?[\d.]+)(.*)$/),c=s.match(/^([-+]?[\d.]+)(.*)$/);if(i&&c){let f=parseFloat(i[1]),u=parseFloat(c[1]);return`${f+(u-f)*t}${i[2]||c[2]}`}return t<1?n:s}function kr(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var Cr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Dr=0,Jt="--scroll-draw-progress";function Or(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var er={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Tt(e,r){return typeof window>"u"?er:r.respectReducedMotion===!1?Kt(e,r,!1):Ge(r,(t,n)=>Kt(e,t,n))}function Kt(e,r,t){let{props:n,trigger:s={},easing:i="ease-out",speed:c=1,once:f=!1,axis:u="y",scrollContainer:p,native:S=!0,velocityScale:P=!1,triggerElement:x,onProgress:U,onComplete:pe,onEnter:F,onLeave:T,onEnterBack:M,onLeaveBack:d}=r,E=typeof i=="function"?i:te[i]??te["ease-out"],w=$e(s.start??"top bottom"),I=$e(s.end??"bottom top"),z=x??e,N=typeof p=="string"?document.querySelector(p):p??null,X=Object.entries(n).map(([a,m])=>({prop:kr(a),from:Array.isArray(m)?m[0]:"",to:Array.isArray(m)?m[1]:m}));function _e(){let a=window.getComputedStyle(e);for(let m of X)m.from===""&&(m.from=a.getPropertyValue(m.prop).trim()||"0")}function le(){for(let a of X)e.style.setProperty(a.prop,String(a.to))}let ce=new Map;for(let a of[...X.map(m=>m.prop),Jt])ce.set(a,e.style.getPropertyValue(a));function H(){for(let[a,m]of ce)m?e.style.setProperty(a,m):e.style.removeProperty(a)}if(t)return le(),pe?.(),{...er,destroy:H,getProgress:()=>1};_e();let xe=typeof i=="string"?st(i):null;function Ne(){if(!S||!Or()||!xe||u!=="y"||N||z!==e||f||c!==1||U||pe||F||T||M||d||P!==!1||(s.start??"top bottom").trim()!=="top bottom"||(s.end??"bottom top").trim()!=="bottom top")return!1;for(let a of X)if(!Cr.has(a.prop))return!1;return!0}function Te(){let a=`ssd-a-${++Dr}`,m=X.map(R=>`${R.prop}:${R.from}`).join(";"),ye=X.map(R=>`${R.prop}:${R.to}`).join(";"),ue=document.createElement("style");ue.setAttribute("data-ssd-animate",""),ue.textContent=`@keyframes ${a}{from{${m}}to{${ye}}}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${xe};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(ue),e.classList.add(a);let A=()=>u==="x"?window.scrollX:window.scrollY,C=()=>u==="x"?window.innerWidth:window.innerHeight,_=()=>{let R=e.getBoundingClientRect();return Fe({top:R.top,height:R.height},A(),C(),w,I)};ke(e,{type:"animate",getProgress:()=>Ce.getProgress(),getTrigger:_});let Ce={refresh(){},destroy(){e.classList.remove(a),ue.remove(),e.style.animationPlayState="",H(),Se(e)},replay(){e.classList.remove(a),e.offsetWidth,e.classList.add(a)},pause(){e.style.animationPlayState="paused"},resume(){e.style.animationPlayState=""},seek(R){let Le=Math.min(1,Math.max(0,R));e.classList.remove(a);for(let De of X)e.style.setProperty(De.prop,Zt(De.from,De.to,Le))},getProgress(){let{tStart:R,tEnd:Le}=_();return E(se(A(),R,Le,c))}};return Ce}if(Ne())return Te();let ie=0,g=0,k=0,de=!1,be=!1,Ae=-1,Me=0,He=!1,Z=NaN,ge=-1,je=0,Qe=()=>N?u==="x"?N.scrollLeft:N.scrollTop:u==="x"?window.scrollX:window.scrollY,ae=()=>N?u==="x"?N.clientWidth:N.clientHeight:u==="x"?window.innerWidth:window.innerHeight,J=z===e?X:[],j=!1;function Q(){let a=e.style,m=J.map(C=>a.getPropertyValue(C.prop)),ye=a.transition;J.length&&(a.transition="none"),J.forEach(C=>a.setProperty(C.prop,ce.get(C.prop)??""));let ue=nt(z,N,u);J.forEach((C,_)=>a.setProperty(C.prop,m[_])),J.length&&(e.offsetWidth,a.transition=ye);let A=Fe(ue,ue.scroll,ae(),w,I);j&&Math.abs(A.tStart-ie)<1&&Math.abs(A.tEnd-g)<1||(j=!0,ie=A.tStart,g=A.tEnd)}function W(a){e.style.setProperty(Jt,String(a));for(let m of X)e.style.setProperty(m.prop,Zt(m.from,m.to,a));U?.(a)}function re(a){if(isNaN(Z)){Z=a;return}Z<=0&&a>0?F?.():Z>0&&a<=0&&d?.(),Z<1&&a>=1?T?.():Z>=1&&a<1&&M?.(),Z=a}function G(){if(!de||be)return;let a=performance.now(),m=Qe(),ye=c;if(P!==!1){let C=a-je,_=C>0?Math.abs(m-(ge<0?m:ge))/C:0;ye=c*Math.max(.2,1+_*(typeof P=="number"?P:1)*.04)}ge=m,je=a;let ue=g===ie?0:(m-ie)/(g-ie);re(ue);let A=E(se(m,ie,g,ye));f&&(Ae=Math.max(Ae,A),A=Ae),Me=A,W(A),A>=1&&!He?(He=!0,pe?.()):A<1&&!f&&(He=!1),k=requestAnimationFrame(G)}Q(),g===ie&&Y("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 a=E(se(Qe(),ie,g,c));f&&a>0&&(Ae=a),Me=a,W(a)}let we=new IntersectionObserver(a=>{a.forEach(m=>{de=m.isIntersecting,de&&!be?k=requestAnimationFrame(G):cancelAnimationFrame(k)})},{root:N??null}),D;function L(){clearTimeout(D),D=setTimeout(Q,150)}window.addEventListener("resize",L),window.addEventListener("orientationchange",L);let ne=Be([z],L);return we.observe(e),ke(e,{type:"animate",getProgress:()=>Me,getTrigger:()=>({tStart:ie,tEnd:g})}),{destroy(){cancelAnimationFrame(k),we.disconnect(),window.removeEventListener("resize",L),window.removeEventListener("orientationchange",L),ne(),clearTimeout(D),H(),Se(e)},replay(){Ae=-1,He=!1,Me=0,be=!1,W(0)},pause(){be=!0,cancelAnimationFrame(k)},resume(){be&&(be=!1,de&&(k=requestAnimationFrame(G)))},seek(a){let m=Math.min(1,Math.max(0,a));Me=m,Ae=m,be=!0,cancelAnimationFrame(k),W(m)},getProgress(){return Me},refresh(){Q()}}}var ut={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function tr(e,r){if(typeof window>"u")return ut;let t=typeof e=="string"?document.querySelector(e):e;return t?Tt(t,r):(Y("scrollAnimate: element not found:",e),ut)}function rr(e,r={}){if(typeof window>"u")return ut;let t=typeof e=="string"?document.querySelector(e):e;if(!t)return Y("scrollParallax: element not found:",e),ut;let{speed:n=.3,axis:s="y",easing:i="linear",trigger:c,onProgress:f}=r,u=-n*100,p=t.style,S=!!t.ownerSVGElement,P=p.getPropertyValue("transform-box");S&&p.setProperty("transform-box","fill-box");let x=Tt(t,{props:s==="x"?{transform:["translateX(0%)",`translateX(${u}%)`]}:{transform:["translateY(0%)",`translateY(${u}%)`]},trigger:c??{start:"top bottom",end:"bottom top"},easing:i,native:!1,onProgress:f});return S?{...x,destroy(){x.destroy(),p.setProperty("transform-box",P)}}:x}var At={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function nr(e,r){if(typeof window>"u")return At;let t=typeof e=="string"?document.querySelector(e):e;return t?Ge(r,(n,s)=>Ir(t,n,s)):(Y("scrollCounter: element not found:",e),At)}function Ir(e,r,t){let{from:n=0,to:s,format:i,easing:c="ease-out",trigger:f={},once:u=!0,decimals:p,onComplete:S}=r,P=p!==void 0?g=>g.toFixed(p):i??(g=>String(Math.round(g))),x=typeof c=="function"?c:te[c]??te["ease-out"],U=$e(f.start??"top 80%"),pe=$e(f.end??"top 20%");if(t)return e.textContent=P(s),S?.(),{...At,getProgress:()=>1};let F=0,T=0,M=!1,d=0,E=!1,w=!1,I=-1,z=0,N=!1,X=()=>window.scrollY,_e=()=>window.innerHeight;function le(){let g=e.getBoundingClientRect(),k=Fe({top:g.top,height:g.height},X(),_e(),U,pe);M&&Math.abs(k.tStart-F)<1&&Math.abs(k.tEnd-T)<1||(M=!0,F=k.tStart,T=k.tEnd)}function ce(g){e.textContent=P(n+(s-n)*g),e.style.setProperty("--scroll-draw-progress",String(g))}function H(){if(!E||w)return;let g=x(se(X(),F,T,1));u&&(I=Math.max(I,g),g=I),z=g,ce(g),g>=1&&!N?(N=!0,S?.()):g<1&&!u&&(N=!1),d=requestAnimationFrame(H)}le();{let g=x(se(X(),F,T,1));u&&g>0&&(I=g),z=g,ce(g)}let xe=new IntersectionObserver(g=>{g.forEach(k=>{E=k.isIntersecting,E&&!w?d=requestAnimationFrame(H):cancelAnimationFrame(d)})}),Ne;function Te(){clearTimeout(Ne),Ne=setTimeout(le,150)}window.addEventListener("resize",Te),window.addEventListener("orientationchange",Te);let ie=Be([e],Te);return xe.observe(e),ke(e,{type:"counter",getProgress:()=>z,getTrigger:()=>({tStart:F,tEnd:T})}),{destroy(){cancelAnimationFrame(d),xe.disconnect(),window.removeEventListener("resize",Te),window.removeEventListener("orientationchange",Te),ie(),clearTimeout(Ne),Se(e)},replay(){I=-1,N=!1,z=0,w=!1,ce(0)},pause(){w=!0,cancelAnimationFrame(d)},resume(){w&&(w=!1,E&&(d=requestAnimationFrame(H)))},seek(g){let k=Math.min(1,Math.max(0,g));z=k,I=k,w=!0,cancelAnimationFrame(d),ce(k)},getProgress(){return z}}}var or="http://www.w3.org/2000/svg",Rr="cinematic-photo",Mt=e=>e<0?0:e>1?1:e;function mt(e){let r=parseFloat(e);return Number.isFinite(r)?Mt(r/100):0}function Fr(e){return te[e]??te.linear}var Nr={destroy:()=>{},getProgress:()=>0},ft=class{constructor(r){if(typeof document>"u"){this.mount=null;return}this.mount=typeof r.wrapper=="string"?document.querySelector(r.wrapper):r.wrapper,this.mount||Y("Cinematic: wrapper not found:",r.wrapper)}loadStory(r){let t=this.mount;if(typeof window>"u"||!t)return Nr;t.style.position="relative",t.style.height=r.totalHeight,t.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;",t.appendChild(n);let s=[];for(let T of r.scenes){if(T.background){let d=document.createElement("img");d.id=Rr,d.src=T.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 M=T.animations.filter(d=>d.type==="draw");if(M.length){let d=document.createElementNS(or,"svg");d.setAttribute("viewBox",`0 0 ${r.canvas.width} ${r.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 E of M){let w=document.createElementNS(or,"path");w.id=E.target.replace(/^#/,""),w.setAttribute("d",E.d),w.setAttribute("fill","none"),w.setAttribute("stroke",E.stroke),w.setAttribute("stroke-width",String(E.strokeWidth)),w.setAttribute("stroke-linecap","round"),w.setAttribute("stroke-linejoin","round");let I=E.length||w.getTotalLength?.()||0;w.style.strokeDasharray=String(I),w.style.strokeDashoffset=String(I),d.appendChild(w),s.push({kind:"draw",el:w,start:mt(E.start),end:mt(E.end),ease:Fr(E.easing),length:I})}}for(let d of T.animations){if(d.type!=="fade")continue;let E=n.querySelector(d.target)??document.querySelector(d.target);E&&(E.style.opacity=String(d.from),s.push({kind:"fade",el:E,start:mt(d.start),end:mt(d.end),ease:te["ease-in-out"]??te.linear,from:d.from,to:d.to}))}}let i=0,c=()=>{let T=t.offsetHeight-window.innerHeight;return T<=0?t.getBoundingClientRect().top<=0?1:0:Mt(-t.getBoundingClientRect().top/T)},f=T=>{for(let M of s){let d=M.end-M.start,E=d<=0?T>=M.end?1:0:Mt((T-M.start)/d),w=M.ease(E);M.kind==="draw"?M.el.style.strokeDashoffset=String(M.length*(1-w)):M.el.style.opacity=String(M.from+(M.to-M.from)*w)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return f(1),{destroy:()=>{},getProgress:()=>1};let u=0,p=!1,S=!1,P=()=>{i=c(),f(i),p&&(u=requestAnimationFrame(P))},x=()=>{p||(p=!0,u=requestAnimationFrame(P))},U=()=>{p=!1,cancelAnimationFrame(u)},pe=new IntersectionObserver(T=>{for(let M of T)S=M.isIntersecting,S?x():U()},{threshold:0});pe.observe(n),i=c(),f(i),ke(t,{type:"draw",getProgress:()=>i,getTrigger:()=>{let T=t.getBoundingClientRect().top+window.scrollY;return{tStart:T,tEnd:T+Math.max(0,t.offsetHeight-window.innerHeight)}}});let F=lt(T=>{T&&(F(),U(),pe.disconnect(),Se(t),i=1,f(1))});return{destroy(){F(),U(),pe.disconnect(),Se(t)},getProgress:()=>i}}};if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){let e=["speed","easing","stagger","direction","selector","fade","once"];class r 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(P=>this.getAttribute(P)));if(this.instance&&s===this.key)return;this.instance?.destroy(),this.key=s;let i={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),u=this.getAttribute("stagger"),p=this.getAttribute("direction"),S=this.getAttribute("selector");c&&(i.speed=parseFloat(c)),f&&(i.easing=f),u&&(i.stagger=parseFloat(u)),p&&(i.direction=p),S&&(i.selector=S),this.hasAttribute("fade")&&(i.fade=this.getAttribute("fade")!=="false"),this.hasAttribute("once")&&(i.once=this.getAttribute("once")!=="false"),this.instance=ct(this,i)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}}r.observedAttributes=e,customElements.define("scroll-draw",r)}return yr(Hr);})();
|
|
3
|
+
<div style="position:absolute;${u?`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 Yt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Xt=/[MmLlHhVvCcSsQqTtAaZz]/g;function kr(e,t,r){if(!!1)return;let n=(e.match(Xt)??[]).join("").toUpperCase(),s=(t.match(Xt)??[]).join("").toUpperCase(),i=(e.match(Yt)??[]).length,c=(t.match(Yt)??[]).length;if(n!==s){G(`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!==c&&G(`morphTo: coordinate count differs (${i} \u2192 ${c}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r)}function $r(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 c=parseFloat(i),m=n[s++]??c;return String(+(c+(m-c)*r).toFixed(4))})}function ct(e,t={}){return typeof window>"u"?{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0}:Ge(t,(r,n)=>Cr(e,r,n))}function Cr(e,t,r){let{preset:n,...s}=t,i=n?{...ot[n],...s}:s,{selector:c="path, polyline, line, polygon, rect, circle",speed:m=1,fade:u=!1,easing:f="linear",trigger:v={},stagger:A=0,direction:b="forward",once:J=!1,debug:se=!1,axis:R="y",scrollContainer:E,autoReverse:M=!1,delay:p=0,strokeColor:w,strokeWidth:y,fillOpacity:z,waypoints:_,velocityScale:k=!1,threshold:q=0,rootMargin:$e="0px",repeat:ce=0,repeatDelay:fe=0,morphTo:W,clip:ie,autoplay:Ce=!1,duration:De=1e3,native:Ee=!0,onProgress:Se,onStart:h,onComplete:S,onEnter:pe,onLeave:He,onEnterBack:de,onLeaveBack:Ve}=i,B=ie===!0?"left":typeof ie=="string"?ie:!1,j=typeof f=="function"?f:Z[f]??Z.linear,_e=Pe(v.start||"top bottom"),ge=Pe(v.end||"bottom top"),K=typeof E=="string"?document.querySelector(E):E??null,xe=Array.isArray(w)?w[0]:null,ae=Array.isArray(w)?w[1]:typeof w=="string"?w:null,ye=Array.isArray(y)?y[0]:null,he=Array.isArray(y)?y[1]:typeof y=="number"?y:null,le=Array.isArray(z)?z[0]:null,Ie=Array.isArray(z)?z[1]:typeof z=="number"?z:null;function be(o){let a=o*100;switch(B){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 I=B?[]:Array.from(e.querySelectorAll(c)),$=[],ee=[],te=0,l=0,d=A,Te=0,L=!1,C=!1,T=0,D=!1,ue=-1,me=[],Ze=-1,Q=!1,we=0,Ae=0,Oe,pt=null;function Lt(){pt?.destroy(),pt=null}let Re=new Set,Pt=NaN,Fe=!0,Je=-1,kt=performance.now(),ze=NaN;function je(){return K?R==="x"?K.scrollLeft:K.scrollTop:R==="x"?window.scrollX:window.scrollY}function $t(){return K?R==="x"?K.clientWidth:K.clientHeight:R==="x"?window.innerWidth:window.innerHeight}function Ct(){let o=rt(e,K,R);return Ne(o,o.scroll,$t(),_e,ge)}function ar(){let o=l-te,a=I.length-1,g=K??document.documentElement,F=R==="x"?"Width":"Height";if(d=A,A>0&&a>0&&o>0){let ne=g[`scroll${F}`]-g[`client${F}`]-1-te-o/m;ne>=0&&(d=Math.min(A,ne/(a*o)))}Te=l+a*d*o}function Dt(){({tStart:te,tEnd:l}=Ct()),ar(),se&&!1&&(Lt(),pt=Pr(te,l,R))}function dt(o,a=Ct){ke(e,{type:"draw",getProgress:()=>o.getProgress(),getTrigger:a});let g=o.destroy;return o.destroy=()=>{g.call(o),ve(e)},o}function It(o,a){return J&&!M?Math.max(ue,j(me[o]=Math.max(me[o]??0,a))):j(a)}function lr(o,a){if(e.style.setProperty("--scroll-draw-progress",String(o)),B){let g=a==="reverse"?1-o:o;e.style.clipPath=be(g);return}I.forEach((g,F)=>gt(g,F,o,a))}function gt(o,a,g,F){o.style.strokeDashoffset=F==="reverse"?`${$[a]*g}`:`${$[a]*(1-g)}`,u&&(o.style.opacity=F==="reverse"?`${1-g}`:`${g}`),xe&&ae?o.style.stroke=nt(xe,ae,g):ae&&(o.style.stroke=ae),ye!==null&&he!==null?o.style.strokeWidth=`${ye+(he-ye)*g}`:he!==null&&(o.style.strokeWidth=`${he}`),le!==null&&Ie!==null?o.style.fillOpacity=`${le+(Ie-le)*g}`:Ie!==null&&(o.style.fillOpacity=`${Ie}`),W&&o.tagName.toLowerCase()==="path"&&ee[a]&&o.setAttribute("d",$r(ee[a],W,g))}function Qe(){if(e.style.setProperty("--scroll-draw-progress","0"),B){e.style.clipPath=be(b==="reverse"?1:0);return}I.forEach((o,a)=>{o.style.strokeDasharray=`${$[a]}`,o.style.strokeDashoffset=b==="reverse"?"0":`${$[a]}`,u?o.style.opacity=b==="reverse"?"1":"0":o.style.opacity="",xe&&(o.style.stroke=xe),ye!==null&&(o.style.strokeWidth=`${ye}`),le!==null&&(o.style.fillOpacity=`${le}`),W&&o.tagName.toLowerCase()==="path"&&ee[a]&&o.setAttribute("d",ee[a])})}if(I.forEach(o=>{Lr(o);let a=We(o);$.push(a);let g=o.tagName.toLowerCase()==="path";g?ee.push(o.getAttribute("d")??""):ee.push(""),W&&(g?kr(ee[ee.length-1],W,o):G(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),r?(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=b==="reverse"?`${a}`:"0",u&&(o.style.opacity="1"),ae&&(o.style.stroke=ae),he!==null&&(o.style.strokeWidth=`${he}`),Ie!==null&&(o.style.fillOpacity=`${Ie}`),W&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",W)):(o.style.strokeDasharray=`${a}`,o.style.strokeDashoffset=b==="reverse"?"0":`${a}`,u?o.style.opacity=b==="reverse"?"1":"0":o.style.opacity="",xe&&(o.style.stroke=xe),ye!==null&&(o.style.strokeWidth=`${ye}`),le!==null&&(o.style.fillOpacity=`${le}`))}),r)return B&&(e.style.clipPath=be(1)),S?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};B&&(e.style.clipPath=be(b==="reverse"?1:0));let Ot=typeof f=="string"?st(f):null;function cr(){return!(Ee===!1||Ce||se||!Mr()||!I.length||!Ot||B||R!=="y"||K||m!==1||A!==0||J||M||k!==!1||W||_||ce||p>0||Se||h||S||pe||He||de||Ve||w!=null||y!=null||z!=null||(v.start||"top bottom").trim()!=="top bottom"||(v.end||"bottom top").trim()!=="bottom top")}function ur(){let o=++Ar,a=`svg-scroll-draw-${o}`,g=`svg-scroll-draw-host-${o}`,F=`--svg-scroll-draw-${o}`,ne=b==="reverse"?"0":"var(--ssd-len)",Me=b==="reverse"?"var(--ssd-len)":"0",oe=`stroke-dashoffset:${ne};`,O=`stroke-dashoffset:${Me};`;u&&(oe+=`opacity:${b==="reverse"?1:0};`,O+=`opacity:${b==="reverse"?0:1};`);let N=document.createElement("style");N.setAttribute("data-svg-scroll-draw",""),N.textContent=`@keyframes ${a}{from{${oe}}to{${O}}}.${g}{view-timeline-name:${F};view-timeline-axis:block;}.${a}{animation-name:${a};animation-duration:auto;animation-timing-function:${Ot};animation-fill-mode:both;animation-timeline:${F};animation-range:cover 0% cover 100%;}`,document.head.appendChild(N),e.classList.add(g);function U(x,P){x.style.setProperty("--ssd-len",String($[P])),x.style.strokeDasharray=`${$[P]}`,x.style.strokeDashoffset="",x.style.opacity="",x.style.animationPlayState="",x.classList.add(a)}I.forEach(U);let Y=!1,H=-1;function V(){if(H>=0)return H;let x=e.getBoundingClientRect(),{tStart:P,tEnd:X}=Ne({top:x.top,height:x.height},je(),$t(),_e,ge);return j(re(je(),P,X,m))}return{destroy(){e.classList.remove(g),I.forEach(x=>{x.classList.remove(a),x.style.removeProperty("--ssd-len"),x.style.animationPlayState=""}),N.remove()},replay(){Y=!1,H=-1,I.forEach(U)},pause(){Y=!0,I.forEach(x=>{x.style.animationPlayState="paused"})},resume(){Y&&(Y=!1,I.forEach(x=>{x.style.animationPlayState="running"}))},seek(x){let P=Math.min(1,Math.max(0,x));H=P,Y=!0,I.forEach((X,Le)=>{X.classList.remove(a),X.style.strokeDashoffset=b==="reverse"?`${$[Le]*P}`:`${$[Le]*(1-P)}`,u&&(X.style.opacity=b==="reverse"?`${1-P}`:`${P}`)})},getProgress(){return V()},refresh(){I.forEach((x,P)=>{$[P]=We(x),x.style.setProperty("--ssd-len",String($[P])),x.style.strokeDasharray=`${$[P]}`})}}}if(cr())return dt(ur());function mr(){let o=Math.max(1,De),a=B?o:o*(1+Math.max(0,I.length-1)*A),g=0,F=0,ne=!1;function Me(H){let V=!0,x=Math.min(1,Math.max(0,H/a));if(B){let P=Math.min(1,Math.max(0,H/o)),X=j(P);we=X,e.style.setProperty("--scroll-draw-progress",String(X)),e.style.clipPath=be(b==="reverse"?1-X:X),Se?.(X),P<1&&(V=!1)}else{I.forEach((X,Le)=>{let pr=Le*A*o,Nt=Math.min(1,Math.max(0,(H-pr)/o));gt(X,Le,j(Nt),b),Nt<1&&(V=!1)});let P=j(x);we=P,Se?.(P),e.style.setProperty("--scroll-draw-progress",String(P))}if(_){let P=j(x);for(let X in _){let Le=parseFloat(X);P>=Le&&!Re.has(Le)&&(Re.add(Le),_[X]?.())}}return V}function oe(H){if(Q)return;let V=H-g;C||(C=!0,h?.());let x=Me(V);if(x&&!L){L=!0,Me(a),S?.(),Ae<(ce==="infinite"?1/0:ce??0)&&(Ae++,Oe=setTimeout(()=>{g=performance.now(),C=!1,L=!1,Re.clear(),Qe(),T=requestAnimationFrame(oe)},fe));return}x||(T=requestAnimationFrame(oe))}function O(){cancelAnimationFrame(T),clearTimeout(Oe),g=performance.now(),F=0,Q=!1,C=!1,L=!1,Ae=0,ne=!0,we=0,Re.clear(),Qe(),T=requestAnimationFrame(oe)}let N=new IntersectionObserver(H=>{H.forEach(V=>{V.isIntersecting&&!(J&&L)?O():!V.isIntersecting&&!J&&!L&&(cancelAnimationFrame(T),clearTimeout(Oe),ne=!1)})},{root:K??null,threshold:q,rootMargin:$e}),U;function Y(){clearTimeout(U),U=setTimeout(()=>{I.forEach((H,V)=>{$[V]=We(H),H.style.strokeDasharray=`${$[V]}`})},150)}return window.addEventListener("resize",Y),window.addEventListener("orientationchange",Y),p>0?setTimeout(()=>N.observe(e),p):N.observe(e),{destroy(){cancelAnimationFrame(T),clearTimeout(Oe),N.disconnect(),window.removeEventListener("resize",Y),window.removeEventListener("orientationchange",Y),clearTimeout(U)},replay(){Ae=0,O()},pause(){Q||!ne||(Q=!0,F=performance.now()-g,cancelAnimationFrame(T))},resume(){Q&&(Q=!1,ne=!0,g=performance.now()-F,T=requestAnimationFrame(oe))},seek(H){let V=Math.min(1,Math.max(0,H));we=V,Q=!0,F=V*a,g=performance.now()-F,cancelAnimationFrame(T),Me(F)},getProgress(){return we},refresh(){clearTimeout(U),I.forEach((H,V)=>{$[V]=We(H),H.style.strokeDasharray=`${$[V]}`})}}}if(Ce)return dt(mr());Dt();function Rt(){if(Q||!qe)return;let o=performance.now(),a=je();if(!Fe&&k===!1&&a===Pt){ht(a);return}Fe=!1,Pt=a;let g=m;if(k!==!1){let O=o-kt,N=O>0?Math.abs(a-(Je<0?a:Je))/O:0;g=m*Math.max(.2,1+N*(typeof k=="number"?k:1)*.04)}Je=a,kt=o;let F=M?Ze===-1||a>=Ze?"forward":"reverse":b;Ze=a;let ne=l-te,Me=!0,oe=ne===0?0:(a-te)/ne;if(isNaN(ze)||(ze<=0&&oe>0?pe?.():ze>0&&oe<=0&&Ve?.(),ze<1&&oe>=1?He?.():ze>=1&&oe<1&&de?.()),ze=oe,B){let O=It(0,re(a,te,l,g));we=O,e.style.setProperty("--scroll-draw-progress",String(O));let N=F==="reverse"?1-O:O;e.style.clipPath=be(N),Se?.(O),!C&&re(a,te,l,g)>0&&(C=!0,h?.()),O>=1&&!L?(L=!0,S?.(),Ae<(ce==="infinite"?1/0:ce??0)&&(Ae++,Oe=setTimeout(()=>{ue=-1,me=[],C=!1,L=!1,Qe()},fe))):O<1&&!J&&(L=!1),ht(a);return}if(I.forEach((O,N)=>{let U=N*d*ne,Y=It(N,re(a,te+U,l+U,g));gt(O,N,Y,F),N===0&&(we=Y,Se?.(Y),e.style.setProperty("--scroll-draw-progress",String(Y))),Y<1&&(Me=!1)}),_){let O=j(re(a,te,l,g));for(let N in _){let U=parseFloat(N);O>=U&&!Re.has(U)&&(Re.add(U),_[N]?.())}}!C&&re(a,te,l,g)>0&&(C=!0,h?.()),Me&&!L?(L=!0,S?.(),Ae<(ce==="infinite"?1/0:ce??0)&&(Ae++,Oe=setTimeout(()=>{ue=-1,me=[],C=!1,L=!1,Re.clear(),Qe(),Fe=!0},fe))):!Me&&!J&&(L=!1),ht(a)}function yt(o){return o>=l&&o<Te}function ht(o){D||yt(o)?T=requestAnimationFrame(Rt):qe=!1}function bt(){return D||yt(je())}let qe=!1;function Ke(){qe||(qe=!0,T=requestAnimationFrame(function(){Rt()}))}function et(){qe=!1,cancelAnimationFrame(T)}let wt=new IntersectionObserver(o=>{o.forEach(a=>{D=a.isIntersecting,D&&!Q?(Fe=!0,Ke()):qe&&!Q&&yt(je())||et()})},{root:K??null,threshold:q,rootMargin:$e});function Ft(){I.forEach((o,a)=>{$[a]=We(o),o.style.strokeDasharray=`${$[a]}`}),Dt(),Fe=!0}let tt;function Ue(){clearTimeout(tt),tt=setTimeout(Ft,150)}window.addEventListener("resize",Ue),window.addEventListener("orientationchange",Ue);let fr=Be([e],Ue);return p>0?setTimeout(()=>wt.observe(e),p):wt.observe(e),dt({destroy(){cancelAnimationFrame(T),clearTimeout(Oe),et(),wt.disconnect(),fr(),window.removeEventListener("resize",Ue),window.removeEventListener("orientationchange",Ue),clearTimeout(tt),Lt()},replay(){ue=-1,me=[],Ze=-1,Je=-1,C=!1,L=!1,Ae=0,Q=!1,we=0,Re.clear(),clearTimeout(Oe),Qe(),Fe=!0,bt()&&Ke()},pause(){Q=!0,et()},resume(){Q&&(Q=!1,Fe=!0,bt()&&Ke())},seek(o){let a=Math.min(1,Math.max(0,o));we=a,ue=a,me=[],Q=!0,et(),lr(a,b),Fe=!0},getProgress(){return we},refresh(){clearTimeout(tt),Ft(),bt()&&!Q&&Ke()}},()=>({tStart:te,tEnd:l}))}function Zt(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?ct(n,t):(G("Container not found:",e),r)}function Dr(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Jt(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let s=[],i=[],c=n[2].trim();if(c)for(let m of c.split(/[\s,]+/)){let u=m.match(/^([-+]?[\d.eE]+)(.*)$/);s.push(u?parseFloat(u[1]):0),i.push(u?u[2]:"")}t.push({fn:n[1],nums:s,units:i})}return t}function Ir(e,t,r){let n=Jt(e),s=Jt(t);return n.length===0||n.length!==s.length?r<1?e:t:n.map((i,c)=>{let m=s[c];return i.fn!==m.fn||i.nums.length!==m.nums.length?r<1?`${i.fn}(${i.nums.map((u,f)=>`${u}${i.units[f]}`).join(", ")})`:`${m.fn}(${m.nums.map((u,f)=>`${u}${m.units[f]}`).join(", ")})`:`${i.fn}(${i.nums.map((u,f)=>`${u+(m.nums[f]-u)*r}${i.units[f]}`).join(", ")})`}).join(" ")}function Kt(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),s=String(t);if(Dr(n))return nt(n,s,r);if(n.includes("("))return Ir(n,s,r);let i=n.match(/^([-+]?[\d.]+)(.*)$/),c=s.match(/^([-+]?[\d.]+)(.*)$/);if(i&&c){let m=parseFloat(i[1]),u=parseFloat(c[1]);return`${m+(u-m)*r}${i[2]||c[2]}`}return r<1?n:s}function Or(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var Rr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Fr=0,er="--scroll-draw-progress";function Nr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}var rr={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Tt(e,t){return typeof window>"u"?rr:t.respectReducedMotion===!1?tr(e,t,!1):Ge(t,(r,n)=>tr(e,r,n))}function tr(e,t,r){let{props:n,trigger:s={},easing:i="ease-out",speed:c=1,once:m=!1,axis:u="y",scrollContainer:f,native:v=!0,velocityScale:A=!1,triggerElement:b,onProgress:J,onComplete:se,onEnter:R,onLeave:E,onEnterBack:M,onLeaveBack:p}=t,w=typeof i=="function"?i:Z[i]??Z["ease-out"],y=Pe(s.start||"top bottom"),z=Pe(s.end||"bottom top"),_=b??e,k=typeof f=="string"?document.querySelector(f):f??null,q=Object.entries(n).map(([l,d])=>({prop:Or(l),from:Array.isArray(d)?d[0]:"",to:Array.isArray(d)?d[1]:d}));function $e(){let l=window.getComputedStyle(e);for(let d of q)d.from===""&&(d.from=l.getPropertyValue(d.prop).trim()||"0")}function ce(){for(let l of q)e.style.setProperty(l.prop,String(l.to))}let fe=new Map;for(let l of[...q.map(d=>d.prop),er])fe.set(l,e.style.getPropertyValue(l));function W(){for(let[l,d]of fe)d?e.style.setProperty(l,d):e.style.removeProperty(l)}if(r)return ce(),se?.(),{...rr,destroy:W,getProgress:()=>1};$e();let ie=()=>k?u==="x"?k.scrollLeft:k.scrollTop:u==="x"?window.scrollX:window.scrollY,Ce=()=>k?u==="x"?k.clientWidth:k.clientHeight:u==="x"?window.innerWidth:window.innerHeight,De=typeof i=="string"?st(i):null;function Ee(){if(!v||!Nr()||!De||u!=="y"||k||_!==e||m||c!==1||J||se||R||E||M||p||A!==!1||(s.start||"top bottom").trim()!=="top bottom"||(s.end||"bottom top").trim()!=="bottom top")return!1;for(let l of q)if(!Rr.has(l.prop))return!1;return!0}function Se(){let l=`ssd-a-${++Fr}`,d=q.map(D=>`${D.prop}:${D.from}`).join(";"),Te=q.map(D=>`${D.prop}:${D.to}`).join(";"),L=document.createElement("style");L.setAttribute("data-ssd-animate",""),L.textContent=`@keyframes ${l}{from{${d}}to{${Te}}}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${De};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L),e.classList.add(l);let C=()=>{let D=e.getBoundingClientRect();return Ne({top:D.top,height:D.height},ie(),Ce(),y,z)};ke(e,{type:"animate",getProgress:()=>T.getProgress(),getTrigger:C});let T={refresh(){},destroy(){e.classList.remove(l),L.remove(),e.style.animationPlayState="",W(),ve(e)},replay(){e.classList.remove(l),e.offsetWidth,e.classList.add(l)},pause(){e.style.animationPlayState="paused"},resume(){e.style.animationPlayState=""},seek(D){let ue=Math.min(1,Math.max(0,D));e.classList.remove(l);for(let me of q)e.style.setProperty(me.prop,Kt(me.from,me.to,ue))},getProgress(){let{tStart:D,tEnd:ue}=C();return w(re(ie(),D,ue,c))}};return T}if(Ee())return Se();let h=0,S=0,pe=0,He=!1,de=!1,Ve=-1,B=0,j=0,_e=!1,ge=NaN,K=-1,xe=0,ae=_===e?q:[],ye=!1;function he(){let l=e.style,d=ae.map(T=>l.getPropertyValue(T.prop)),Te=l.transition;ae.length&&(l.transition="none"),ae.forEach(T=>l.setProperty(T.prop,fe.get(T.prop)??""));let L=rt(_,k,u);ae.forEach((T,D)=>l.setProperty(T.prop,d[D])),ae.length&&(e.offsetWidth,l.transition=Te);let C=Ne(L,L.scroll,Ce(),y,z);ye&&Math.abs(C.tStart-h)<1&&Math.abs(C.tEnd-S)<1||(ye=!0,h=C.tStart,S=C.tEnd)}function le(l){e.style.setProperty(er,String(l));for(let d of q)e.style.setProperty(d.prop,Kt(d.from,d.to,l));J?.(l)}function Ie(l){if(isNaN(ge)){ge=l;return}ge<=0&&l>0?R?.():ge>0&&l<=0&&p?.(),ge<1&&l>=1?E?.():ge>=1&&l<1&&M?.(),ge=l}function be(){if(!He||de)return;let l=performance.now(),d=ie(),Te=c;if(A!==!1){let D=l-xe,ue=D>0?Math.abs(d-(K<0?d:K))/D:0;Te=c*Math.max(.2,1+ue*(typeof A=="number"?A:1)*.04)}K=d,xe=l;let L=S===h?0:(d-h)/(S-h);Ie(L);let C=re(d,h,S,Te),T=m?Math.max(Ve,w(B=Math.max(B,C))):w(C);j=T,le(T),T>=1&&!_e?(_e=!0,se?.()):T<1&&!m&&(_e=!1),pe=requestAnimationFrame(be)}he(),S===h&&G("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),B=re(ie(),h,S,c),j=w(B),le(j);let I=new IntersectionObserver(l=>{l.forEach(d=>{He=d.isIntersecting,He&&!de?pe=requestAnimationFrame(be):cancelAnimationFrame(pe)})},{root:k??null}),$;function ee(){clearTimeout($),$=setTimeout(he,150)}window.addEventListener("resize",ee),window.addEventListener("orientationchange",ee);let te=Be([_],ee);return I.observe(e),ke(e,{type:"animate",getProgress:()=>j,getTrigger:()=>({tStart:h,tEnd:S})}),{destroy(){cancelAnimationFrame(pe),I.disconnect(),window.removeEventListener("resize",ee),window.removeEventListener("orientationchange",ee),te(),clearTimeout($),W(),ve(e)},replay(){Ve=-1,B=0,_e=!1,j=0,de=!1,le(0)},pause(){de=!0,cancelAnimationFrame(pe)},resume(){de&&(de=!1,He&&(pe=requestAnimationFrame(be)))},seek(l){let d=Math.min(1,Math.max(0,l));j=d,Ve=d,B=0,de=!0,cancelAnimationFrame(pe),le(d)},getProgress(){return j},refresh(){he()}}}var ut={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function nr(e,t){if(typeof window>"u")return ut;let r=typeof e=="string"?document.querySelector(e):e;return r?Tt(r,t):(G("scrollAnimate: element not found:",e),ut)}function or(e,t={}){if(typeof window>"u")return ut;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return G("scrollParallax: element not found:",e),ut;let{speed:n=.3,axis:s="y",easing:i="linear",trigger:c,onProgress:m}=t,u=-n*100,f=r.style,v=!!r.ownerSVGElement,A=f.getPropertyValue("transform-box");v&&f.setProperty("transform-box","fill-box");let b=Tt(r,{props:s==="x"?{transform:["translateX(0%)",`translateX(${u}%)`]}:{transform:["translateY(0%)",`translateY(${u}%)`]},trigger:c??{start:"top bottom",end:"bottom top"},easing:i,native:!1,onProgress:m});return v?{...b,destroy(){b.destroy(),f.setProperty("transform-box",A)}}:b}var At={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function sr(e,t){if(typeof window>"u")return At;let r=typeof e=="string"?document.querySelector(e):e;return r?Ge(t,(n,s)=>Hr(r,n,s)):(G("scrollCounter: element not found:",e),At)}function Hr(e,t,r){let{from:n=0,to:s,format:i,easing:c="ease-out",trigger:m={},once:u=!0,decimals:f,onComplete:v}=t,A=f!==void 0?h=>h.toFixed(f):i??(h=>String(Math.round(h))),b=typeof c=="function"?c:Z[c]??Z["ease-out"],J=Pe(m.start||"top 80%"),se=Pe(m.end||"top 20%");if(r)return e.textContent=A(s),v?.(),{...At,getProgress:()=>1};let R=0,E=0,M=!1,p=0,w=!1,y=!1,z=-1,_=0,k=0,q=!1,$e=()=>window.scrollY,ce=()=>window.innerHeight;function fe(){let h=e.getBoundingClientRect(),S=Ne({top:h.top,height:h.height},$e(),ce(),J,se);M&&Math.abs(S.tStart-R)<1&&Math.abs(S.tEnd-E)<1||(M=!0,R=S.tStart,E=S.tEnd)}function W(h){e.textContent=A(n+(s-n)*h),e.style.setProperty("--scroll-draw-progress",String(h))}function ie(){if(!w||y)return;let h=re($e(),R,E,1),S=u?Math.max(z,b(_=Math.max(_,h))):b(h);k=S,W(S),S>=1&&!q?(q=!0,v?.()):S<1&&!u&&(q=!1),p=requestAnimationFrame(ie)}fe();{_=re($e(),R,E,1);let h=b(_);k=h,W(h)}let Ce=new IntersectionObserver(h=>{h.forEach(S=>{w=S.isIntersecting,w&&!y?p=requestAnimationFrame(ie):cancelAnimationFrame(p)})}),De;function Ee(){clearTimeout(De),De=setTimeout(fe,150)}window.addEventListener("resize",Ee),window.addEventListener("orientationchange",Ee);let Se=Be([e],Ee);return Ce.observe(e),ke(e,{type:"counter",getProgress:()=>k,getTrigger:()=>({tStart:R,tEnd:E})}),{destroy(){cancelAnimationFrame(p),Ce.disconnect(),window.removeEventListener("resize",Ee),window.removeEventListener("orientationchange",Ee),Se(),clearTimeout(De),ve(e)},replay(){z=-1,_=0,q=!1,k=0,y=!1,W(0)},pause(){y=!0,cancelAnimationFrame(p)},resume(){y&&(y=!1,w&&(p=requestAnimationFrame(ie)))},seek(h){let S=Math.min(1,Math.max(0,h));k=S,z=S,_=0,y=!0,cancelAnimationFrame(p),W(S)},getProgress(){return k}}}var ir="http://www.w3.org/2000/svg",_r="cinematic-photo",Mt=e=>e<0?0:e>1?1:e;function mt(e){let t=parseFloat(e);return Number.isFinite(t)?Mt(t/100):0}function Vr(e){return Z[e]??Z.linear}var zr={destroy:()=>{},getProgress:()=>0},ft=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||G("Cinematic: wrapper not found:",t.wrapper)}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return zr;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 E of t.scenes){if(E.background){let p=document.createElement("img");p.id=_r,p.src=E.background,p.alt="",p.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(p)}let M=E.animations.filter(p=>p.type==="draw");if(M.length){let p=document.createElementNS(ir,"svg");p.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),p.setAttribute("preserveAspectRatio","xMidYMid meet"),p.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(p);for(let w of M){let y=document.createElementNS(ir,"path");y.id=w.target.replace(/^#/,""),y.setAttribute("d",w.d),y.setAttribute("fill","none"),y.setAttribute("stroke",w.stroke),y.setAttribute("stroke-width",String(w.strokeWidth)),y.setAttribute("stroke-linecap","round"),y.setAttribute("stroke-linejoin","round");let z=w.length||y.getTotalLength?.()||0;y.style.strokeDasharray=String(z),y.style.strokeDashoffset=String(z),p.appendChild(y),s.push({kind:"draw",el:y,start:mt(w.start),end:mt(w.end),ease:Vr(w.easing),length:z})}}for(let p of E.animations){if(p.type!=="fade")continue;let w=n.querySelector(p.target)??document.querySelector(p.target);w&&(w.style.opacity=String(p.from),s.push({kind:"fade",el:w,start:mt(p.start),end:mt(p.end),ease:Z["ease-in-out"]??Z.linear,from:p.from,to:p.to}))}}let i=0,c=()=>{let E=r.offsetHeight-window.innerHeight;return E<=0?r.getBoundingClientRect().top<=0?1:0:Mt(-r.getBoundingClientRect().top/E)},m=E=>{for(let M of s){let p=M.end-M.start,w=p<=0?E>=M.end?1:0:Mt((E-M.start)/p),y=M.ease(w);M.kind==="draw"?M.el.style.strokeDashoffset=String(M.length*(1-y)):M.el.style.opacity=String(M.from+(M.to-M.from)*y)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return m(1),{destroy:()=>{},getProgress:()=>1};let u=0,f=!1,v=!1,A=()=>{i=c(),m(i),f&&(u=requestAnimationFrame(A))},b=()=>{f||(f=!0,u=requestAnimationFrame(A))},J=()=>{f=!1,cancelAnimationFrame(u)},se=new IntersectionObserver(E=>{for(let M of E)v=M.isIntersecting,v?b():J()},{threshold:0});se.observe(n),i=c(),m(i),ke(r,{type:"draw",getProgress:()=>i,getTrigger:()=>{let E=r.getBoundingClientRect().top+window.scrollY;return{tStart:E,tEnd:E+Math.max(0,r.offsetHeight-window.innerHeight)}}});let R=lt(E=>{E&&(R(),J(),se.disconnect(),ve(r),i=1,m(1))});return{destroy(){R(),J(),se.disconnect(),ve(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(A=>this.getAttribute(A)));if(this.instance&&s===this.key)return;this.instance?.destroy(),this.key=s;let i={},c=this.getAttribute("speed"),m=this.getAttribute("easing"),u=this.getAttribute("stagger"),f=this.getAttribute("direction"),v=this.getAttribute("selector");c&&(i.speed=parseFloat(c)),m&&(i.easing=m),u&&(i.stagger=parseFloat(u)),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=ct(this,i)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}}t.observedAttributes=e,customElements.define("scroll-draw",t)}return wr(qr);})();
|