@brytdesigns/web-component-parallax 1.2.17 → 1.2.19

package/dist/esm/index.js

@@ -2,7 +2,9 @@ import { createWithElementContext, customShadowlessElement, correctElementType,
 import { splitProps, createEffect, batch, onCleanup, mergeProps, createMemo } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { createContext, consume, provide } from 'component-register';
-import { motionValue, scroll, frame, animate, transform, transformValue, styleEffect } from 'motion';
+import { motionValue, scroll, transformValue, transform, frame, animate, styleEffect } from 'motion';
+import { awaitAllAnimations } from '@brytdesigns/web-component-core/animation';
+import { abortablePromise } from '@brytdesigns/web-component-core/promise';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -118,48 +120,29 @@ function getLastTruthyIndex(values) {
 }
 
 // src/hooks/useParallaxStickyLayer.ts
-var HANDOFF_EASE = "easeOut";
-var ENTER_HYSTERESIS = 1e-3;
-var EXIT_HYSTERESIS = 5e-3;
-var HANDOFF_MIN_DELTA_PX = 0.75;
-var EXIT_WAIT_TIMEOUT_MS = 500;
-var PREDICT_LOOKAHEAD_MS = 28;
-var PREDICT_ENTER_BAND = 6e-3;
-var PREDICT_EXIT_BAND = 0.01;
-var PREDICT_MIN_VELOCITY = 4e-4;
-var LOW_VELOCITY_NO_TWEEN = 1e-3;
-var HIGH_VELOCITY_SKIP_HANDOFF = 0.01;
-var MAX_PREDICT_LOOKAHEAD_MS = 60;
-var MAX_HANDOFF_DELTA_PX = 56;
-function supportsStickyPosition() {
-  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") {
-    return false;
-  }
-  return CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky");
-}
 function initializeParallaxStickyLayerContext(props) {
   const [_internal, _state] = splitProps(props, ["root", "start", "end"]);
   const parallax = useParallax(_internal.root);
-  const stickySupported = supportsStickyPosition();
   const progress = motionValue(-1);
-  const rawScrollProgress = motionValue(-1);
   const inRange = motionValue(false);
   const belowRange = motionValue(false);
   const aboveRange = motionValue(false);
-  const normStartValue = motionValue(0);
-  const normEndValue = motionValue(1);
-  const mode = motionValue("absolute-below");
-  const handoffOffsetY = motionValue(0);
-  const activeContentAnimations = /* @__PURE__ */ new Set();
-  let handoffAnimation = null;
-  let exitWaitRaf = null;
-  let exitWaitTimeout = null;
-  let pendingExitVersion = 0;
-  let pendingExitMode = null;
-  let lastScrollSampleValue = 0;
-  let lastScrollSampleTime = 0;
-  let hasScrollSample = false;
-  let latestScrollVelocity = 0;
+  const position = transformValue(
+    () => inRange.get() ? "sticky" : "absolute"
+  );
+  const transform$1 = transformValue(() => {
+    const isInRange2 = inRange.get();
+    const isBelowRange = belowRange.get();
+    const isAboveRange = aboveRange.get();
+    if (isInRange2) return "none";
+    if (isBelowRange) return `translate(0px, ${(_internal.start - 1) * 100}vh)`;
+    if (isAboveRange) return `translate(0px, ${(_internal.end - 1) * 100}vh)`;
+  });
+  const animations = motionValue([]);
+  const styles = transformValue(() => ({
+    position: position.get(),
+    transform: transform$1.get()
+  }));
   _internal.root.style.top = "0px";
   _internal.root.style.right = "0px";
   _internal.root.style.bottom = "0px";
@@ -170,315 +153,51 @@ function initializeParallaxStickyLayerContext(props) {
   if (window.getComputedStyle(_internal.root).display === "inline") {
     _internal.root.style.display = "block";
   }
-  function updateStyles() {
-    if (!stickySupported) {
-      const normStart = normStartValue.get();
-      const normEnd = normEndValue.get();
-      const raw = rawScrollProgress.get();
-      const span = Math.max(normEnd - normStart, Number.EPSILON);
-      const t = Math.min(Math.max((raw - normStart) / span, 0), 1);
-      const pageY = _internal.start - 1 + t * (_internal.end - _internal.start);
-      _internal.root.style.position = "absolute";
-      _internal.root.style.transform = `translate(0px, ${pageY * 100}vh)`;
-      return;
-    }
-    const currentMode = mode.get();
-    const offset = handoffOffsetY.get();
-    const hasOffset = Math.abs(offset) >= 0.1;
-    if (currentMode === "sticky") {
-      _internal.root.style.position = "sticky";
-      _internal.root.style.transform = hasOffset ? `translate(0px, ${offset}px)` : "none";
-      return;
-    }
-    const baseTransform = currentMode === "absolute-below" ? `translate(0px, ${(_internal.start - 1) * 100}vh)` : `translate(0px, ${(_internal.end - 1) * 100}vh)`;
-    _internal.root.style.position = "absolute";
-    _internal.root.style.transform = hasOffset ? `${baseTransform} translate(0px, ${offset}px)` : baseTransform;
-  }
-  function renderStyles() {
-    frame.render(updateStyles);
-  }
-  function stopHandoffAnimation() {
-    handoffAnimation?.stop();
-    handoffAnimation = null;
-    handoffOffsetY.set(0);
-  }
-  function clearExitWaitHandles() {
-    if (exitWaitRaf !== null) {
-      window.cancelAnimationFrame(exitWaitRaf);
-      exitWaitRaf = null;
-    }
-    if (exitWaitTimeout !== null) {
-      window.clearTimeout(exitWaitTimeout);
-      exitWaitTimeout = null;
-    }
-  }
-  function pruneFinishedAnimations() {
-    for (const animation of activeContentAnimations) {
-      if (animation.state !== "running") {
-        activeContentAnimations.delete(animation);
-      }
-    }
-  }
-  function hasActiveContentAnimations() {
-    pruneFinishedAnimations();
-    return activeContentAnimations.size > 0;
-  }
-  function registerContentAnimation(animation) {
-    activeContentAnimations.add(animation);
-    animation.then(
-      () => {
-        activeContentAnimations.delete(animation);
-      },
-      () => {
-        activeContentAnimations.delete(animation);
-      }
-    );
-  }
-  function getHandoffDuration(deltaY, velocity) {
-    const speed = Math.abs(velocity);
-    if (speed <= LOW_VELOCITY_NO_TWEEN) return 0;
-    const byDistance = Math.min(0.12, Math.max(0.05, Math.abs(deltaY) / 1400));
-    const speedScale = Math.min(speed / 0.01, 1);
-    return Math.max(0.04, byDistance - speedScale * 0.02);
-  }
-  function settleHandoffOverFrames(deltaY, frameCount) {
-    handoffOffsetY.set(deltaY);
-    updateStyles();
-    let remainingFrames = Math.max(frameCount, 1);
-    const settle = () => {
-      remainingFrames -= 1;
-      if (remainingFrames <= 0) {
-        handoffOffsetY.set(0);
-        updateStyles();
-        return;
-      }
-      frame.render(settle);
-    };
-    frame.render(settle);
-  }
-  function cancelPendingExit() {
-    pendingExitVersion += 1;
-    pendingExitMode = null;
-    clearExitWaitHandles();
-  }
-  function commitModeImmediately(nextMode) {
-    stopHandoffAnimation();
-    mode.set(nextMode);
-    updateStyles();
-  }
-  function waitForAnimations(nextMode) {
-    if (pendingExitMode === nextMode && (exitWaitRaf !== null || exitWaitTimeout !== null)) {
-      return;
-    }
-    cancelPendingExit();
-    pendingExitMode = nextMode;
-    const version = pendingExitVersion;
-    const completeExit = () => {
-      if (version !== pendingExitVersion) return;
-      clearExitWaitHandles();
-      pendingExitMode = null;
-      const latest = Math.min(Math.max(rawScrollProgress.get(), 0), 1);
-      const stableMode = getTargetMode(
-        latest,
-        normStartValue.get(),
-        normEndValue.get()
-      );
-      if (stableMode !== nextMode) return;
-      commitModeImmediately(nextMode);
-    };
-    if (!hasActiveContentAnimations()) {
-      completeExit();
-      return;
-    }
-    const tick = () => {
-      if (version !== pendingExitVersion) return;
-      if (!hasActiveContentAnimations()) {
-        completeExit();
-        return;
-      }
-      exitWaitRaf = window.requestAnimationFrame(tick);
-    };
-    exitWaitTimeout = window.setTimeout(() => {
-      completeExit();
-    }, EXIT_WAIT_TIMEOUT_MS);
-    exitWaitRaf = window.requestAnimationFrame(tick);
-  }
-  function getTargetMode(value, normStart, normEnd) {
-    if (!stickySupported) {
-      if (value <= normStart) return "absolute-below";
-      if (value >= normEnd) return "absolute-above";
-      return "absolute-below";
-    }
-    const current = mode.get();
-    if (current === "sticky") {
-      if (value < normStart - EXIT_HYSTERESIS) return "absolute-below";
-      if (value > normEnd + EXIT_HYSTERESIS) return "absolute-above";
-      return "sticky";
-    }
-    if (current === "absolute-below") {
-      if (value >= normStart + ENTER_HYSTERESIS) return "sticky";
-      return "absolute-below";
-    }
-    if (value <= normEnd - ENTER_HYSTERESIS) return "sticky";
-    return "absolute-above";
-  }
-  function getModeDecisionValue(value, normStart, normEnd, allowPrediction) {
-    const now = performance.now();
-    let velocity = 0;
-    if (hasScrollSample) {
-      const elapsed = Math.max(now - lastScrollSampleTime, 1);
-      velocity = (value - lastScrollSampleValue) / elapsed;
-    }
-    lastScrollSampleValue = value;
-    lastScrollSampleTime = now;
-    hasScrollSample = true;
-    latestScrollVelocity = velocity;
-    if (!allowPrediction || Math.abs(velocity) < PREDICT_MIN_VELOCITY) {
-      return value;
-    }
-    const speed = Math.abs(velocity);
-    const speedScale = Math.min(speed / HIGH_VELOCITY_SKIP_HANDOFF, 1);
-    const lookaheadMs = PREDICT_LOOKAHEAD_MS + speedScale * (MAX_PREDICT_LOOKAHEAD_MS - PREDICT_LOOKAHEAD_MS);
-    const predicted = Math.min(Math.max(value + velocity * lookaheadMs, 0), 1);
-    const currentMode = mode.get();
-    if (currentMode === "absolute-below") {
-      const entryEdge = normStart + ENTER_HYSTERESIS;
-      const nearStart = Math.abs(value - entryEdge) <= PREDICT_ENTER_BAND;
-      if (velocity > 0 && nearStart && value < entryEdge && predicted >= entryEdge) {
-        return entryEdge;
-      }
-    }
-    if (currentMode === "absolute-above") {
-      const entryEdge = normEnd - ENTER_HYSTERESIS;
-      const nearEnd = Math.abs(value - entryEdge) <= PREDICT_ENTER_BAND;
-      if (velocity < 0 && nearEnd && value > entryEdge && predicted <= entryEdge) {
-        return entryEdge;
-      }
-    }
-    if (currentMode === "sticky") {
-      const exitTopEdge = normStart - EXIT_HYSTERESIS;
-      const exitBottomEdge = normEnd + EXIT_HYSTERESIS;
-      const nearTop = Math.abs(value - exitTopEdge) <= PREDICT_EXIT_BAND;
-      if (velocity < 0 && nearTop && value > exitTopEdge && predicted <= exitTopEdge) {
-        return exitTopEdge;
-      }
-      const nearBottom = Math.abs(value - exitBottomEdge) <= PREDICT_EXIT_BAND;
-      if (velocity > 0 && nearBottom && value < exitBottomEdge && predicted >= exitBottomEdge) {
-        return exitBottomEdge;
-      }
-    }
-    return value;
-  }
-  function applyModeWithHandoff(nextMode) {
-    if (!stickySupported) {
-      stopHandoffAnimation();
-      mode.set(nextMode);
-      renderStyles();
-      return;
-    }
-    stopHandoffAnimation();
-    const prevRect = _internal.root.getBoundingClientRect();
-    mode.set(nextMode);
-    updateStyles();
-    const nextRect = _internal.root.getBoundingClientRect();
-    const deltaY = prevRect.top - nextRect.top;
-    if (Math.abs(deltaY) <= HANDOFF_MIN_DELTA_PX) {
-      handoffOffsetY.set(0);
-      renderStyles();
-      return;
-    }
-    if (Math.abs(latestScrollVelocity) >= HIGH_VELOCITY_SKIP_HANDOFF || Math.abs(deltaY) >= MAX_HANDOFF_DELTA_PX) {
-      settleHandoffOverFrames(deltaY, 2);
-      return;
-    }
-    handoffOffsetY.set(deltaY);
-    updateStyles();
-    const duration = getHandoffDuration(deltaY, latestScrollVelocity);
-    if (duration <= 0) {
-      settleHandoffOverFrames(deltaY, 1);
-      return;
-    }
-    handoffAnimation = animate([
-      [handoffOffsetY, 0, { duration, ease: HANDOFF_EASE }]
-    ]);
-    handoffAnimation.then(() => {
-      if (!handoffAnimation) return;
-      handoffAnimation = null;
-      handoffOffsetY.set(0);
-      renderStyles();
-    });
-  }
-  function syncFromScroll(value, allowHandoff) {
-    const clamped = Math.min(Math.max(value, 0), 1);
-    rawScrollProgress.set(clamped);
-    const normStart = normStartValue.get();
-    const normEnd = normEndValue.get();
-    const range = [normStart, normEnd];
-    const span = Math.max(normEnd - normStart, Number.EPSILON);
-    const normalizedProgress = Math.min(
-      Math.max((clamped - normStart) / span, 0),
-      1
-    );
-    inRange.set(isInRange({ range, value: clamped }));
-    belowRange.set(clamped <= normStart);
-    aboveRange.set(clamped >= normEnd);
-    progress.set(normalizedProgress);
-    const decisionValue = getModeDecisionValue(
-      clamped,
-      normStart,
-      normEnd,
-      allowHandoff
-    );
-    const nextMode = getTargetMode(decisionValue, normStart, normEnd);
-    const currentMode = mode.get();
-    if (currentMode === "sticky" && nextMode !== "sticky" && allowHandoff) {
-      waitForAnimations(nextMode);
-      updateStyles();
-      return;
-    }
-    cancelPendingExit();
-    if (nextMode === currentMode) {
-      if (!allowHandoff) {
-        stopHandoffAnimation();
-        updateStyles();
-      }
-      return;
-    }
-    if (allowHandoff) {
-      applyModeWithHandoff(nextMode);
-      return;
-    }
-    commitModeImmediately(nextMode);
-  }
   createEffect(() => {
     const range = [_internal.start, _internal.end];
     const maxPages = parallax.maxPages;
     const normalizedRange = normalizeTuple(range, maxPages);
     const [normStart, normEnd] = normalizedRange;
-    normStartValue.set(normStart);
-    normEndValue.set(normEnd);
-    const initialValue = parallax.scrollYProgress.get();
-    syncFromScroll(initialValue, false);
-    renderStyles();
+    const transformer = transform(normalizedRange, [0, 1]);
     const unsubscribe = parallax.scrollYProgress.on("change", (value) => {
-      syncFromScroll(value, true);
+      inRange.set(isInRange({ range: normalizedRange, value }));
+      belowRange.set(value <= normStart);
+      aboveRange.set(value >= normEnd);
+      progress.set(transformer(value));
     });
     return onCleanup(() => {
       unsubscribe();
     });
   });
-  const unsubHandoffOffset = handoffOffsetY.on("change", (_) => {
+  function updateStyles() {
+    const s = styles.get();
+    _internal.root.style.position = s.position;
+    _internal.root.style.transform = s.transform;
+  }
+  function renderStyles() {
+    frame.render(updateStyles);
+  }
+  function waitForAnimations() {
+    const a = animations.get();
+    const controller = new AbortController();
+    abortablePromise(awaitAllAnimations(a), controller.signal).then(() => {
+      animations.set([]);
+      renderStyles();
+    });
+  }
+  const unsubStyles = styles.on("change", (_) => {
+    if (progress.get() === 1 || progress.get() === 0)
+      return waitForAnimations();
+    animations.set([]);
     renderStyles();
   });
   function _animate(...args) {
     const animation = animate(...args);
-    registerContentAnimation(animation);
+    animations.set([...animations.get(), animation]);
     return animation;
   }
   onCleanup(() => {
-    cancelPendingExit();
-    stopHandoffAnimation();
-    unsubHandoffOffset();
+    unsubStyles();
   });
   return [progress, { animate: _animate }];
 }
@@ -681,6 +400,7 @@ ${messages.join("\n")}`
     const active = activeProps();
     const { range, ...props2 } = active;
     const valueSubscribers = [];
+    let disposed = false;
     const progressValue = Object.keys(PROP_DEFAULTS).reduce(
       (values, key) => {
         const fallback = Reflect.get(PROP_DEFAULTS, key);
@@ -714,11 +434,16 @@ ${messages.join("\n")}`
       () => `translate(${animated.x?.get()}, ${animated.y?.get()}) scale(${animated.scale?.get()}) rotate(${animated.rotate?.get()}deg)`
     );
     function animateValues() {
+      if (disposed) return;
       const sequence = Object.keys(animated).map((key) => {
-        let v = progressValue[key]?.get?.();
-        if (typeof v === "undefined") return null;
+        const subject = animated[key];
+        const v = progressValue[key]?.get?.();
+        if (!subject) return null;
+        if (typeof v === "undefined" || v === null) return null;
+        if (typeof v !== "string" && typeof v !== "number") return null;
         return [animated[key], v, { at: "<" }];
       }).filter((v) => v !== null);
+      if (sequence.length === 0) return;
       animate2(sequence);
     }
     function scheduleAnimation() {
@@ -738,9 +463,12 @@ ${messages.join("\n")}`
       ...styledValues
     });
     return onCleanup(() => {
+      disposed = true;
       unstyle();
       unsub();
-      valueSubscribers.forEach((unsub2) => unsub2());
+      valueSubscribers.forEach((unsub2) => {
+        unsub2();
+      });
       Object.values(animated).forEach((value) => {
         value.destroy();
       });