@immersive-scroll/web - npm Package Compare versions

Comparing version 0.1.0 to 0.1.2

dist/index.cjs

@@ -13,2 +13,5 @@ 'use strict';
   const content = document.createElement("div");
+  viewport.dataset.immersiveViewport = "true";
+  overlay.dataset.immersiveOverlay = "true";
+  content.dataset.immersiveContent = "true";
   canvas.setAttribute("aria-hidden", "true");
@@ -19,6 +22,8 @@ canvas.style.position = "absolute";
   canvas.style.height = "100%";
-  viewport.style.position = "sticky";
-  viewport.style.top = "0";
+  viewport.style.position = "fixed";
+  viewport.style.inset = "0";
+  viewport.style.zIndex = "0";
   viewport.style.minHeight = "100vh";
   viewport.style.overflow = "hidden";
+  viewport.style.isolation = "isolate";
   overlay.style.position = "absolute";
@@ -31,2 +36,3 @@ overlay.style.inset = "0";
   container.style.overflow = "hidden";
+  container.style.isolation = "isolate";
   viewport.appendChild(canvas);
@@ -61,40 +67,23 @@ viewport.appendChild(overlay);
   void engine.init();
-  let animationFrameId = 0;
-  let scrollIdleTimeout = 0;
-  let lastScrollY = window.scrollY;
-  let lastTimestamp = performance.now();
-  const syncScrollState = () => {
-    animationFrameId = 0;
-    const currentScrollY = window.scrollY;
-    const currentTimestamp = performance.now();
-    const containerRect = container.getBoundingClientRect();
-    const containerTop = currentScrollY + containerRect.top;
-    const containerHeight = containerRect.height;
-    const componentScrollRange = containerHeight - window.innerHeight;
-    const globalScrollRange = Math.max(
-      document.documentElement.scrollHeight - window.innerHeight,
-      1
-    );
-    const progress = componentScrollRange > 1 ? core.clamp((currentScrollY - containerTop) / componentScrollRange, 0, 1) : core.clamp(currentScrollY / globalScrollRange, 0, 1);
-    const deltaY = currentScrollY - lastScrollY;
-    const deltaTime = Math.max(currentTimestamp - lastTimestamp, 16);
-    const velocity = deltaY / deltaTime;
-    lastScrollY = currentScrollY;
-    lastTimestamp = currentTimestamp;
-    void engine.updateProgress(progress);
-    engine.updateScroll(currentScrollY, velocity);
-    window.clearTimeout(scrollIdleTimeout);
-    scrollIdleTimeout = window.setTimeout(() => {
-      engine.endScroll(window.scrollY);
-    }, 96);
-  };
-  const queueScrollSync = () => {
-    if (animationFrameId !== 0) {
-      return;
+  const normalizedConfig = engine.config;
+  const scrollSync = core.createWindowScrollSync({
+    callbacks: {
+      updateProgress(progress) {
+        return engine.updateProgress(progress);
+      },
+      updateScroll(scrollY, velocity) {
+        engine.updateScroll(scrollY, velocity);
+      },
+      endScroll(scrollY) {
+        engine.endScroll(scrollY);
+      }
+    },
+    resolveProgress(scrollY) {
+      return core.resolveProgressFromScrollY(scrollY, container);
+    },
+    getScrollConfig() {
+      return normalizedConfig.scroll;
     }
-    animationFrameId = window.requestAnimationFrame(syncScrollState);
-  };
-  window.addEventListener("scroll", queueScrollSync, { passive: true });
-  window.addEventListener("resize", queueScrollSync);
-  queueScrollSync();
+  });
+  scrollSync.syncNow();
   return {
@@ -106,6 +95,3 @@ engine,
     destroy() {
-      window.removeEventListener("scroll", queueScrollSync);
-      window.removeEventListener("resize", queueScrollSync);
-      window.cancelAnimationFrame(animationFrameId);
-      window.clearTimeout(scrollIdleTimeout);
+      scrollSync.destroy();
       void engine.destroy();
@@ -112,0 +98,0 @@ canvas.remove();

dist/index.cjs.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../src/dom/createContainerStructure.ts","../src/api/createImmersiveInstance.ts","../src/api/destroyImmersiveInstance.ts","../src/custom-element/ImmersiveScrollElement.ts","../src/custom-element/registerImmersiveCustomElement.ts"],"names":["createImmersiveEngine","clamp"],"mappings":"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","file":"index.cjs","sourcesContent":["export function createContainerStructure(container: HTMLElement) {\n  const viewport = document.createElement('div');\n  const canvas = document.createElement('canvas');\n  const overlay = document.createElement('div');\n  const content = document.createElement('div');\n\n  canvas.setAttribute('aria-hidden', 'true');\n  canvas.style.position = 'absolute';\n  canvas.style.inset = '0';\n  canvas.style.width = '100%';\n  canvas.style.height = '100%';\n\n  viewport.style.position = 'sticky';\n  viewport.style.top = '0';\n  viewport.style.minHeight = '100vh';\n  viewport.style.overflow = 'hidden';\n\n  overlay.style.position = 'absolute';\n  overlay.style.inset = '0';\n  overlay.style.zIndex = '1';\n\n  content.style.position = 'relative';\n  content.style.zIndex = '2';\n\n  container.style.position = 'relative';\n  container.style.overflow = 'hidden';\n  viewport.appendChild(canvas);\n  viewport.appendChild(overlay);\n  container.appendChild(viewport);\n  container.appendChild(content);\n\n  return { viewport, canvas, overlay, content };\n}\n","import { createImmersiveEngine } from '@immersive-scroll/core';\nimport { clamp } from '@immersive-scroll/core';\nimport { createContainerStructure } from '../dom/createContainerStructure';\nimport type { CreateImmersiveInstanceOptions } from './types';\n\nexport function createImmersiveInstance({\n  container,\n  config,\n  framesPath = null,\n  manifestPath = null,\n  video = null,\n  plugins = []\n}: CreateImmersiveInstanceOptions) {\n  const { viewport, canvas, overlay, content } =\n    createContainerStructure(container);\n\n  const engine = createImmersiveEngine({\n    config: {\n      ...config,\n      framesPath,\n      manifestPath,\n      video\n    },\n    container: viewport,\n    targets: { canvas },\n    plugins\n  });\n\n  void engine.init();\n\n  let animationFrameId = 0;\n  let scrollIdleTimeout = 0;\n  let lastScrollY = window.scrollY;\n  let lastTimestamp = performance.now();\n\n  const syncScrollState = () => {\n    animationFrameId = 0;\n\n    const currentScrollY = window.scrollY;\n    const currentTimestamp = performance.now();\n    const containerRect = container.getBoundingClientRect();\n    const containerTop = currentScrollY + containerRect.top;\n    const containerHeight = containerRect.height;\n    const componentScrollRange = containerHeight - window.innerHeight;\n    const globalScrollRange = Math.max(\n      document.documentElement.scrollHeight - window.innerHeight,\n      1\n    );\n    const progress =\n      componentScrollRange > 1\n        ? clamp((currentScrollY - containerTop) / componentScrollRange, 0, 1)\n        : clamp(currentScrollY / globalScrollRange, 0, 1);\n    const deltaY = currentScrollY - lastScrollY;\n    const deltaTime = Math.max(currentTimestamp - lastTimestamp, 16);\n    const velocity = deltaY / deltaTime;\n\n    lastScrollY = currentScrollY;\n    lastTimestamp = currentTimestamp;\n\n    void engine.updateProgress(progress);\n    engine.updateScroll(currentScrollY, velocity);\n\n    window.clearTimeout(scrollIdleTimeout);\n    scrollIdleTimeout = window.setTimeout(() => {\n      engine.endScroll(window.scrollY);\n    }, 96);\n  };\n\n  const queueScrollSync = () => {\n    if (animationFrameId !== 0) {\n      return;\n    }\n\n    animationFrameId = window.requestAnimationFrame(syncScrollState);\n  };\n\n  window.addEventListener('scroll', queueScrollSync, { passive: true });\n  window.addEventListener('resize', queueScrollSync);\n  queueScrollSync();\n\n  return {\n    engine,\n    canvas,\n    overlay,\n    content,\n    destroy() {\n      window.removeEventListener('scroll', queueScrollSync);\n      window.removeEventListener('resize', queueScrollSync);\n      window.cancelAnimationFrame(animationFrameId);\n      window.clearTimeout(scrollIdleTimeout);\n      void engine.destroy();\n      canvas.remove();\n      overlay.remove();\n      content.remove();\n    }\n  };\n}\n","export function destroyImmersiveInstance(instance: { destroy(): void }) {\n  instance.destroy();\n}\n","import { createImmersiveInstance } from '../api/createImmersiveInstance';\n\nexport class ImmersiveScrollElement extends HTMLElement {\n  private instance: ReturnType<typeof createImmersiveInstance> | null = null;\n\n  connectedCallback() {\n    this.instance = createImmersiveInstance({\n      container: this,\n      framesPath: this.getAttribute('frames-path'),\n      manifestPath: this.getAttribute('manifest-path'),\n      video: this.getAttribute('video')\n    });\n  }\n\n  disconnectedCallback() {\n    this.instance?.destroy();\n    this.instance = null;\n  }\n}\n","import { ImmersiveScrollElement } from './ImmersiveScrollElement';\n\nexport function registerImmersiveCustomElement(tagName = 'immersive-scroll') {\n  if (!customElements.get(tagName)) {\n    customElements.define(tagName, ImmersiveScrollElement);\n  }\n}\n"]}
+{"version":3,"sources":["../src/dom/createContainerStructure.ts","../src/api/createImmersiveInstance.ts","../src/api/destroyImmersiveInstance.ts","../src/custom-element/ImmersiveScrollElement.ts","../src/custom-element/registerImmersiveCustomElement.ts"],"names":["createImmersiveEngine","createWindowScrollSync","resolveProgressFromScrollY"],"mappings":";;;;;;;AAAO,SAAS,yBAAyB,SAAA,EAAwB;AAC/D,EAAA,MAAM,QAAA,GAAW,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC7C,EAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA;AAC9C,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC5C,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAE5C,EAAA,QAAA,CAAS,QAAQ,iBAAA,GAAoB,MAAA;AACrC,EAAA,OAAA,CAAQ,QAAQ,gBAAA,GAAmB,MAAA;AACnC,EAAA,OAAA,CAAQ,QAAQ,gBAAA,GAAmB,MAAA;AAEnC,EAAA,MAAA,CAAO,YAAA,CAAa,eAAe,MAAM,CAAA;AACzC,EAAA,MAAA,CAAO,MAAM,QAAA,GAAW,UAAA;AACxB,EAAA,MAAA,CAAO,MAAM,KAAA,GAAQ,GAAA;AACrB,EAAA,MAAA,CAAO,MAAM,KAAA,GAAQ,MAAA;AACrB,EAAA,MAAA,CAAO,MAAM,MAAA,GAAS,MAAA;AAEtB,EAAA,QAAA,CAAS,MAAM,QAAA,GAAW,OAAA;AAC1B,EAAA,QAAA,CAAS,MAAM,KAAA,GAAQ,GAAA;AACvB,EAAA,QAAA,CAAS,MAAM,MAAA,GAAS,GAAA;AACxB,EAAA,QAAA,CAAS,MAAM,SAAA,GAAY,OAAA;AAC3B,EAAA,QAAA,CAAS,MAAM,QAAA,GAAW,QAAA;AAC1B,EAAA,QAAA,CAAS,MAAM,SAAA,GAAY,SAAA;AAE3B,EAAA,OAAA,CAAQ,MAAM,QAAA,GAAW,UAAA;AACzB,EAAA,OAAA,CAAQ,MAAM,KAAA,GAAQ,GAAA;AACtB,EAAA,OAAA,CAAQ,MAAM,MAAA,GAAS,GAAA;AAEvB,EAAA,OAAA,CAAQ,MAAM,QAAA,GAAW,UAAA;AACzB,EAAA,OAAA,CAAQ,MAAM,MAAA,GAAS,GAAA;AAEvB,EAAA,SAAA,CAAU,MAAM,QAAA,GAAW,UAAA;AAC3B,EAAA,SAAA,CAAU,MAAM,QAAA,GAAW,QAAA;AAC3B,EAAA,SAAA,CAAU,MAAM,SAAA,GAAY,SAAA;AAC5B,EAAA,QAAA,CAAS,YAAY,MAAM,CAAA;AAC3B,EAAA,QAAA,CAAS,YAAY,OAAO,CAAA;AAC5B,EAAA,SAAA,CAAU,YAAY,QAAQ,CAAA;AAC9B,EAAA,SAAA,CAAU,YAAY,OAAO,CAAA;AAE7B,EAAA,OAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,OAAA,EAAS,OAAA,EAAQ;AAC9C;;;AC/BO,SAAS,uBAAA,CAAwB;AAAA,EACtC,SAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,YAAA,GAAe,IAAA;AAAA,EACf,KAAA,GAAQ,IAAA;AAAA,EACR,UAAU;AACZ,CAAA,EAAmC;AACjC,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,SAAS,OAAA,EAAQ,GACzC,yBAAyB,SAAS,CAAA;AAEpC,EAAA,MAAM,SAASA,0BAAA,CAAsB;AAAA,IACnC,MAAA,EAAQ;AAAA,MACN,GAAG,MAAA;AAAA,MACH,UAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,QAAA;AAAA,IACX,OAAA,EAAS,EAAE,MAAA,EAAO;AAAA,IAClB;AAAA,GACD,CAAA;AAED,EAAA,KAAK,OAAO,IAAA,EAAK;AACjB,EAAA,MAAM,mBAAmB,MAAA,CAAO,MAAA;AAChC,EAAA,MAAM,aAAaC,2BAAA,CAAuB;AAAA,IACxC,SAAA,EAAW;AAAA,MACT,eAAe,QAAA,EAAU;AACvB,QAAA,OAAO,MAAA,CAAO,eAAe,QAAQ,CAAA;AAAA,MACvC,CAAA;AAAA,MACA,YAAA,CAAa,SAAS,QAAA,EAAU;AAC9B,QAAA,MAAA,CAAO,YAAA,CAAa,SAAS,QAAQ,CAAA;AAAA,MACvC,CAAA;AAAA,MACA,UAAU,OAAA,EAAS;AACjB,QAAA,MAAA,CAAO,UAAU,OAAO,CAAA;AAAA,MAC1B;AAAA,KACF;AAAA,IACA,gBAAgB,OAAA,EAAS;AACvB,MAAA,OAAOC,+BAAA,CAA2B,SAAS,SAAS,CAAA;AAAA,IACtD,CAAA;AAAA,IACA,eAAA,GAAkB;AAChB,MAAA,OAAO,gBAAA,CAAiB,MAAA;AAAA,IAC1B;AAAA,GACD,CAAA;AAED,EAAA,UAAA,CAAW,OAAA,EAAQ;AAEnB,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA,GAAU;AACR,MAAA,UAAA,CAAW,OAAA,EAAQ;AACnB,MAAA,KAAK,OAAO,OAAA,EAAQ;AACpB,MAAA,MAAA,CAAO,MAAA,EAAO;AACd,MAAA,OAAA,CAAQ,MAAA,EAAO;AACf,MAAA,OAAA,CAAQ,MAAA,EAAO;AAAA,IACjB;AAAA,GACF;AACF;;;ACpEO,SAAS,yBAAyB,QAAA,EAA+B;AACtE,EAAA,QAAA,CAAS,OAAA,EAAQ;AACnB;;;ACAO,IAAM,sBAAA,GAAN,cAAqC,WAAA,CAAY;AAAA,EAC9C,QAAA,GAA8D,IAAA;AAAA,EAEtE,iBAAA,GAAoB;AAClB,IAAA,IAAA,CAAK,WAAW,uBAAA,CAAwB;AAAA,MACtC,SAAA,EAAW,IAAA;AAAA,MACX,UAAA,EAAY,IAAA,CAAK,YAAA,CAAa,aAAa,CAAA;AAAA,MAC3C,YAAA,EAAc,IAAA,CAAK,YAAA,CAAa,eAAe,CAAA;AAAA,MAC/C,KAAA,EAAO,IAAA,CAAK,YAAA,CAAa,OAAO;AAAA,KACjC,CAAA;AAAA,EACH;AAAA,EAEA,oBAAA,GAAuB;AACrB,IAAA,IAAA,CAAK,UAAU,OAAA,EAAQ;AACvB,IAAA,IAAA,CAAK,QAAA,GAAW,IAAA;AAAA,EAClB;AACF;;;AChBO,SAAS,8BAAA,CAA+B,UAAU,kBAAA,EAAoB;AAC3E,EAAA,IAAI,CAAC,cAAA,CAAe,GAAA,CAAI,OAAO,CAAA,EAAG;AAChC,IAAA,cAAA,CAAe,MAAA,CAAO,SAAS,sBAAsB,CAAA;AAAA,EACvD;AACF","file":"index.cjs","sourcesContent":["export function createContainerStructure(container: HTMLElement) {\n  const viewport = document.createElement('div');\n  const canvas = document.createElement('canvas');\n  const overlay = document.createElement('div');\n  const content = document.createElement('div');\n\n  viewport.dataset.immersiveViewport = 'true';\n  overlay.dataset.immersiveOverlay = 'true';\n  content.dataset.immersiveContent = 'true';\n\n  canvas.setAttribute('aria-hidden', 'true');\n  canvas.style.position = 'absolute';\n  canvas.style.inset = '0';\n  canvas.style.width = '100%';\n  canvas.style.height = '100%';\n\n  viewport.style.position = 'fixed';\n  viewport.style.inset = '0';\n  viewport.style.zIndex = '0';\n  viewport.style.minHeight = '100vh';\n  viewport.style.overflow = 'hidden';\n  viewport.style.isolation = 'isolate';\n\n  overlay.style.position = 'absolute';\n  overlay.style.inset = '0';\n  overlay.style.zIndex = '1';\n\n  content.style.position = 'relative';\n  content.style.zIndex = '2';\n\n  container.style.position = 'relative';\n  container.style.overflow = 'hidden';\n  container.style.isolation = 'isolate';\n  viewport.appendChild(canvas);\n  viewport.appendChild(overlay);\n  container.appendChild(viewport);\n  container.appendChild(content);\n\n  return { viewport, canvas, overlay, content };\n}\n","import {\n  createImmersiveEngine,\n  createWindowScrollSync,\n  resolveProgressFromScrollY\n} from '@immersive-scroll/core';\nimport { createContainerStructure } from '../dom/createContainerStructure';\nimport type { CreateImmersiveInstanceOptions } from './types';\n\nexport function createImmersiveInstance({\n  container,\n  config,\n  framesPath = null,\n  manifestPath = null,\n  video = null,\n  plugins = []\n}: CreateImmersiveInstanceOptions) {\n  const { viewport, canvas, overlay, content } =\n    createContainerStructure(container);\n\n  const engine = createImmersiveEngine({\n    config: {\n      ...config,\n      framesPath,\n      manifestPath,\n      video\n    },\n    container: viewport,\n    targets: { canvas },\n    plugins\n  });\n\n  void engine.init();\n  const normalizedConfig = engine.config;\n  const scrollSync = createWindowScrollSync({\n    callbacks: {\n      updateProgress(progress) {\n        return engine.updateProgress(progress);\n      },\n      updateScroll(scrollY, velocity) {\n        engine.updateScroll(scrollY, velocity);\n      },\n      endScroll(scrollY) {\n        engine.endScroll(scrollY);\n      }\n    },\n    resolveProgress(scrollY) {\n      return resolveProgressFromScrollY(scrollY, container);\n    },\n    getScrollConfig() {\n      return normalizedConfig.scroll;\n    }\n  });\n\n  scrollSync.syncNow();\n\n  return {\n    engine,\n    canvas,\n    overlay,\n    content,\n    destroy() {\n      scrollSync.destroy();\n      void engine.destroy();\n      canvas.remove();\n      overlay.remove();\n      content.remove();\n    }\n  };\n}\n","export function destroyImmersiveInstance(instance: { destroy(): void }) {\n  instance.destroy();\n}\n","import { createImmersiveInstance } from '../api/createImmersiveInstance';\n\nexport class ImmersiveScrollElement extends HTMLElement {\n  private instance: ReturnType<typeof createImmersiveInstance> | null = null;\n\n  connectedCallback() {\n    this.instance = createImmersiveInstance({\n      container: this,\n      framesPath: this.getAttribute('frames-path'),\n      manifestPath: this.getAttribute('manifest-path'),\n      video: this.getAttribute('video')\n    });\n  }\n\n  disconnectedCallback() {\n    this.instance?.destroy();\n    this.instance = null;\n  }\n}\n","import { ImmersiveScrollElement } from './ImmersiveScrollElement';\n\nexport function registerImmersiveCustomElement(tagName = 'immersive-scroll') {\n  if (!customElements.get(tagName)) {\n    customElements.define(tagName, ImmersiveScrollElement);\n  }\n}\n"]}

dist/index.js

@@ -1,2 +0,2 @@
-import { createImmersiveEngine, clamp } from '@immersive-scroll/core';
+import { createImmersiveEngine, createWindowScrollSync, resolveProgressFromScrollY } from '@immersive-scroll/core';
 
@@ -11,2 +11,5 @@ // src/api/createImmersiveInstance.ts
   const content = document.createElement("div");
+  viewport.dataset.immersiveViewport = "true";
+  overlay.dataset.immersiveOverlay = "true";
+  content.dataset.immersiveContent = "true";
   canvas.setAttribute("aria-hidden", "true");
@@ -17,6 +20,8 @@ canvas.style.position = "absolute";
   canvas.style.height = "100%";
-  viewport.style.position = "sticky";
-  viewport.style.top = "0";
+  viewport.style.position = "fixed";
+  viewport.style.inset = "0";
+  viewport.style.zIndex = "0";
   viewport.style.minHeight = "100vh";
   viewport.style.overflow = "hidden";
+  viewport.style.isolation = "isolate";
   overlay.style.position = "absolute";
@@ -29,2 +34,3 @@ overlay.style.inset = "0";
   container.style.overflow = "hidden";
+  container.style.isolation = "isolate";
   viewport.appendChild(canvas);
@@ -59,40 +65,23 @@ viewport.appendChild(overlay);
   void engine.init();
-  let animationFrameId = 0;
-  let scrollIdleTimeout = 0;
-  let lastScrollY = window.scrollY;
-  let lastTimestamp = performance.now();
-  const syncScrollState = () => {
-    animationFrameId = 0;
-    const currentScrollY = window.scrollY;
-    const currentTimestamp = performance.now();
-    const containerRect = container.getBoundingClientRect();
-    const containerTop = currentScrollY + containerRect.top;
-    const containerHeight = containerRect.height;
-    const componentScrollRange = containerHeight - window.innerHeight;
-    const globalScrollRange = Math.max(
-      document.documentElement.scrollHeight - window.innerHeight,
-      1
-    );
-    const progress = componentScrollRange > 1 ? clamp((currentScrollY - containerTop) / componentScrollRange, 0, 1) : clamp(currentScrollY / globalScrollRange, 0, 1);
-    const deltaY = currentScrollY - lastScrollY;
-    const deltaTime = Math.max(currentTimestamp - lastTimestamp, 16);
-    const velocity = deltaY / deltaTime;
-    lastScrollY = currentScrollY;
-    lastTimestamp = currentTimestamp;
-    void engine.updateProgress(progress);
-    engine.updateScroll(currentScrollY, velocity);
-    window.clearTimeout(scrollIdleTimeout);
-    scrollIdleTimeout = window.setTimeout(() => {
-      engine.endScroll(window.scrollY);
-    }, 96);
-  };
-  const queueScrollSync = () => {
-    if (animationFrameId !== 0) {
-      return;
+  const normalizedConfig = engine.config;
+  const scrollSync = createWindowScrollSync({
+    callbacks: {
+      updateProgress(progress) {
+        return engine.updateProgress(progress);
+      },
+      updateScroll(scrollY, velocity) {
+        engine.updateScroll(scrollY, velocity);
+      },
+      endScroll(scrollY) {
+        engine.endScroll(scrollY);
+      }
+    },
+    resolveProgress(scrollY) {
+      return resolveProgressFromScrollY(scrollY, container);
+    },
+    getScrollConfig() {
+      return normalizedConfig.scroll;
     }
-    animationFrameId = window.requestAnimationFrame(syncScrollState);
-  };
-  window.addEventListener("scroll", queueScrollSync, { passive: true });
-  window.addEventListener("resize", queueScrollSync);
-  queueScrollSync();
+  });
+  scrollSync.syncNow();
   return {
@@ -104,6 +93,3 @@ engine,
     destroy() {
-      window.removeEventListener("scroll", queueScrollSync);
-      window.removeEventListener("resize", queueScrollSync);
-      window.cancelAnimationFrame(animationFrameId);
-      window.clearTimeout(scrollIdleTimeout);
+      scrollSync.destroy();
       void engine.destroy();
@@ -110,0 +96,0 @@ canvas.remove();

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../src/dom/createContainerStructure.ts","../src/api/createImmersiveInstance.ts","../src/api/destroyImmersiveInstance.ts","../src/custom-element/ImmersiveScrollElement.ts","../src/custom-element/registerImmersiveCustomElement.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["export function createContainerStructure(container: HTMLElement) {\n  const viewport = document.createElement('div');\n  const canvas = document.createElement('canvas');\n  const overlay = document.createElement('div');\n  const content = document.createElement('div');\n\n  canvas.setAttribute('aria-hidden', 'true');\n  canvas.style.position = 'absolute';\n  canvas.style.inset = '0';\n  canvas.style.width = '100%';\n  canvas.style.height = '100%';\n\n  viewport.style.position = 'sticky';\n  viewport.style.top = '0';\n  viewport.style.minHeight = '100vh';\n  viewport.style.overflow = 'hidden';\n\n  overlay.style.position = 'absolute';\n  overlay.style.inset = '0';\n  overlay.style.zIndex = '1';\n\n  content.style.position = 'relative';\n  content.style.zIndex = '2';\n\n  container.style.position = 'relative';\n  container.style.overflow = 'hidden';\n  viewport.appendChild(canvas);\n  viewport.appendChild(overlay);\n  container.appendChild(viewport);\n  container.appendChild(content);\n\n  return { viewport, canvas, overlay, content };\n}\n","import { createImmersiveEngine } from '@immersive-scroll/core';\nimport { clamp } from '@immersive-scroll/core';\nimport { createContainerStructure } from '../dom/createContainerStructure';\nimport type { CreateImmersiveInstanceOptions } from './types';\n\nexport function createImmersiveInstance({\n  container,\n  config,\n  framesPath = null,\n  manifestPath = null,\n  video = null,\n  plugins = []\n}: CreateImmersiveInstanceOptions) {\n  const { viewport, canvas, overlay, content } =\n    createContainerStructure(container);\n\n  const engine = createImmersiveEngine({\n    config: {\n      ...config,\n      framesPath,\n      manifestPath,\n      video\n    },\n    container: viewport,\n    targets: { canvas },\n    plugins\n  });\n\n  void engine.init();\n\n  let animationFrameId = 0;\n  let scrollIdleTimeout = 0;\n  let lastScrollY = window.scrollY;\n  let lastTimestamp = performance.now();\n\n  const syncScrollState = () => {\n    animationFrameId = 0;\n\n    const currentScrollY = window.scrollY;\n    const currentTimestamp = performance.now();\n    const containerRect = container.getBoundingClientRect();\n    const containerTop = currentScrollY + containerRect.top;\n    const containerHeight = containerRect.height;\n    const componentScrollRange = containerHeight - window.innerHeight;\n    const globalScrollRange = Math.max(\n      document.documentElement.scrollHeight - window.innerHeight,\n      1\n    );\n    const progress =\n      componentScrollRange > 1\n        ? clamp((currentScrollY - containerTop) / componentScrollRange, 0, 1)\n        : clamp(currentScrollY / globalScrollRange, 0, 1);\n    const deltaY = currentScrollY - lastScrollY;\n    const deltaTime = Math.max(currentTimestamp - lastTimestamp, 16);\n    const velocity = deltaY / deltaTime;\n\n    lastScrollY = currentScrollY;\n    lastTimestamp = currentTimestamp;\n\n    void engine.updateProgress(progress);\n    engine.updateScroll(currentScrollY, velocity);\n\n    window.clearTimeout(scrollIdleTimeout);\n    scrollIdleTimeout = window.setTimeout(() => {\n      engine.endScroll(window.scrollY);\n    }, 96);\n  };\n\n  const queueScrollSync = () => {\n    if (animationFrameId !== 0) {\n      return;\n    }\n\n    animationFrameId = window.requestAnimationFrame(syncScrollState);\n  };\n\n  window.addEventListener('scroll', queueScrollSync, { passive: true });\n  window.addEventListener('resize', queueScrollSync);\n  queueScrollSync();\n\n  return {\n    engine,\n    canvas,\n    overlay,\n    content,\n    destroy() {\n      window.removeEventListener('scroll', queueScrollSync);\n      window.removeEventListener('resize', queueScrollSync);\n      window.cancelAnimationFrame(animationFrameId);\n      window.clearTimeout(scrollIdleTimeout);\n      void engine.destroy();\n      canvas.remove();\n      overlay.remove();\n      content.remove();\n    }\n  };\n}\n","export function destroyImmersiveInstance(instance: { destroy(): void }) {\n  instance.destroy();\n}\n","import { createImmersiveInstance } from '../api/createImmersiveInstance';\n\nexport class ImmersiveScrollElement extends HTMLElement {\n  private instance: ReturnType<typeof createImmersiveInstance> | null = null;\n\n  connectedCallback() {\n    this.instance = createImmersiveInstance({\n      container: this,\n      framesPath: this.getAttribute('frames-path'),\n      manifestPath: this.getAttribute('manifest-path'),\n      video: this.getAttribute('video')\n    });\n  }\n\n  disconnectedCallback() {\n    this.instance?.destroy();\n    this.instance = null;\n  }\n}\n","import { ImmersiveScrollElement } from './ImmersiveScrollElement';\n\nexport function registerImmersiveCustomElement(tagName = 'immersive-scroll') {\n  if (!customElements.get(tagName)) {\n    customElements.define(tagName, ImmersiveScrollElement);\n  }\n}\n"]}
+{"version":3,"sources":["../src/dom/createContainerStructure.ts","../src/api/createImmersiveInstance.ts","../src/api/destroyImmersiveInstance.ts","../src/custom-element/ImmersiveScrollElement.ts","../src/custom-element/registerImmersiveCustomElement.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["export function createContainerStructure(container: HTMLElement) {\n  const viewport = document.createElement('div');\n  const canvas = document.createElement('canvas');\n  const overlay = document.createElement('div');\n  const content = document.createElement('div');\n\n  viewport.dataset.immersiveViewport = 'true';\n  overlay.dataset.immersiveOverlay = 'true';\n  content.dataset.immersiveContent = 'true';\n\n  canvas.setAttribute('aria-hidden', 'true');\n  canvas.style.position = 'absolute';\n  canvas.style.inset = '0';\n  canvas.style.width = '100%';\n  canvas.style.height = '100%';\n\n  viewport.style.position = 'fixed';\n  viewport.style.inset = '0';\n  viewport.style.zIndex = '0';\n  viewport.style.minHeight = '100vh';\n  viewport.style.overflow = 'hidden';\n  viewport.style.isolation = 'isolate';\n\n  overlay.style.position = 'absolute';\n  overlay.style.inset = '0';\n  overlay.style.zIndex = '1';\n\n  content.style.position = 'relative';\n  content.style.zIndex = '2';\n\n  container.style.position = 'relative';\n  container.style.overflow = 'hidden';\n  container.style.isolation = 'isolate';\n  viewport.appendChild(canvas);\n  viewport.appendChild(overlay);\n  container.appendChild(viewport);\n  container.appendChild(content);\n\n  return { viewport, canvas, overlay, content };\n}\n","import {\n  createImmersiveEngine,\n  createWindowScrollSync,\n  resolveProgressFromScrollY\n} from '@immersive-scroll/core';\nimport { createContainerStructure } from '../dom/createContainerStructure';\nimport type { CreateImmersiveInstanceOptions } from './types';\n\nexport function createImmersiveInstance({\n  container,\n  config,\n  framesPath = null,\n  manifestPath = null,\n  video = null,\n  plugins = []\n}: CreateImmersiveInstanceOptions) {\n  const { viewport, canvas, overlay, content } =\n    createContainerStructure(container);\n\n  const engine = createImmersiveEngine({\n    config: {\n      ...config,\n      framesPath,\n      manifestPath,\n      video\n    },\n    container: viewport,\n    targets: { canvas },\n    plugins\n  });\n\n  void engine.init();\n  const normalizedConfig = engine.config;\n  const scrollSync = createWindowScrollSync({\n    callbacks: {\n      updateProgress(progress) {\n        return engine.updateProgress(progress);\n      },\n      updateScroll(scrollY, velocity) {\n        engine.updateScroll(scrollY, velocity);\n      },\n      endScroll(scrollY) {\n        engine.endScroll(scrollY);\n      }\n    },\n    resolveProgress(scrollY) {\n      return resolveProgressFromScrollY(scrollY, container);\n    },\n    getScrollConfig() {\n      return normalizedConfig.scroll;\n    }\n  });\n\n  scrollSync.syncNow();\n\n  return {\n    engine,\n    canvas,\n    overlay,\n    content,\n    destroy() {\n      scrollSync.destroy();\n      void engine.destroy();\n      canvas.remove();\n      overlay.remove();\n      content.remove();\n    }\n  };\n}\n","export function destroyImmersiveInstance(instance: { destroy(): void }) {\n  instance.destroy();\n}\n","import { createImmersiveInstance } from '../api/createImmersiveInstance';\n\nexport class ImmersiveScrollElement extends HTMLElement {\n  private instance: ReturnType<typeof createImmersiveInstance> | null = null;\n\n  connectedCallback() {\n    this.instance = createImmersiveInstance({\n      container: this,\n      framesPath: this.getAttribute('frames-path'),\n      manifestPath: this.getAttribute('manifest-path'),\n      video: this.getAttribute('video')\n    });\n  }\n\n  disconnectedCallback() {\n    this.instance?.destroy();\n    this.instance = null;\n  }\n}\n","import { ImmersiveScrollElement } from './ImmersiveScrollElement';\n\nexport function registerImmersiveCustomElement(tagName = 'immersive-scroll') {\n  if (!customElements.get(tagName)) {\n    customElements.define(tagName, ImmersiveScrollElement);\n  }\n}\n"]}

package.json

 {
   "name": "@immersive-scroll/web",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vanilla web adapter for immersive scroll video.",
@@ -34,4 +34,4 @@ "license": "MIT",
   "dependencies": {
-    "@immersive-scroll/core": "^0.1.0",
-    "@immersive-scroll/shared": "^0.1.0"
+    "@immersive-scroll/core": "^0.1.2",
+    "@immersive-scroll/shared": "^0.1.2"
   },
@@ -38,0 +38,0 @@ "scripts": {

No alert changes

Worsened metrics

Total package byte prevSize

30084

-15.62%

Lines of code

292

-8.75%

Dependency changes

• Updated

  @immersive-scroll/core@^0.1.2

• Updated

  @immersive-scroll/shared@^0.1.2