rytm-webflow 2.3.0 → 2.3.2

package/.claude/settings.local.json

@@ -1,7 +1,15 @@
 {
   "permissions": {
     "allow": [
-      "Bash(git fetch:*)"
+      "Bash(git fetch:*)",
+      "mcp__metrum__get_task",
+      "Bash(git checkout:*)",
+      "mcp__metrum__set_subtask_status",
+      "Bash(npm run:*)"
     ]
-  }
+  },
+  "enableAllProjectMcpServers": true,
+  "enabledMcpjsonServers": [
+    "metrum"
+  ]
 }

package/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "metrum": {
+      "command": "node",
+      "args": ["/Users/rk/Sites/metrum.rytm.org/mcp/server.js"]
+    }
+  }
+}

package/CLAUDE.md

@@ -3,7 +3,7 @@
 AJAX view-swapping engine and scroll-triggered animation framework for tuki CMS projects.
 Built on GSAP + ScrollMagic. Transforms server-rendered pages into pseudo-SPAs.
 
-**Version**: 2.2.4 | **Entry**: `scripts/index.js` | **Deps**: gsap, imagesloaded, scrollmagic
+**Version**: 2.3.2 | **Entry**: `scripts/index.js` | **Deps**: gsap, imagesloaded, scrollmagic
 
 ## Exports
 
@@ -361,3 +361,4 @@ RytmWebflow.scrollController.destroy()   // Clean up
 7. **Stagger not working** — requires `data-webset="selector:..."` attribute
 8. **Easing not applied** — use GSAP v3 syntax: `e:power3.out` (not `e:Power3.easeOut`)
 9. **Cache causes stale content** — add `no-as-cache` class to forms or dynamic links
+10. **Webscroll elements and viewport growth** — since 2.3.2 `webscroll` elements that enter the viewport via a resize / devtools toggle / background-tab activation (no scroll) are revealed automatically; earlier versions only fired on a `FORWARD` scroll crossing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rytm-webflow",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "rytm webflow pack - ASwap, ShowUp",
   "main": "scripts/index.js",
   "types": "scripts/index.d.ts",

package/scripts/aswap/WebflowListView.js

@@ -1,6 +1,10 @@
+import ScrollMagic from 'scrollmagic';
 import gsap from 'gsap';
 import View from './View';
+import scrollController from './../showup/ScrollController';
 import { getWebflowAnimationProps, parseProps } from './../lib/dataTweenParser';
+import { getScrollMagicSceneProps } from './../lib/dataScrollMagicParser';
+import { elementIsVisibleInViewport } from '../lib/helpers';
 import { CLASS_NAME_WEBSCROLL_FIRED } from './WebflowView';
 
 // data-webscroll-... (scroll magic)
@@ -14,6 +18,8 @@ class WebflowListView extends View {
 
   constructor(id) {
     super(id);
+    this.scenes = [];
+    this._revealTimer = null;
   }
   /**
   * animate in (show)
@@ -25,8 +31,15 @@ class WebflowListView extends View {
       console.warn("Unknown selector for WebflowListView", this);
       return;
     }
-    const list = [...container.querySelectorAll(this.webset.selector)].filter(this.elementBelongsToView);
-    list.forEach(this.listElementShow.bind(this));
+    const items = [...container.querySelectorAll(this.webset.selector)].filter(this.elementBelongsToView);
+    // 1. Set initial state for ALL scroll elements (regardless of viewport)
+    this.hideAllScrollElements(items);
+    // 2. Stagger-animate in-viewport items (existing behavior)
+    items.forEach(this.listElementShow.bind(this));
+    // 3. Build ScrollMagic scenes for off-screen items
+    this.buildScrollScenesForOffscreenItems(items);
+    // 4. Listen for resize to refresh ScrollMagic
+    this.addEventListeners();
   }
   /**
   * animate out (hide)
@@ -40,6 +53,16 @@ class WebflowListView extends View {
     }
     const list = [...container.querySelectorAll(this.webset.selector)].filter(this.elementBelongsToView);
     list.forEach(this.listElementHide.bind(this));
+    // Also hide off-screen scroll elements that have ScrollMagic scenes
+    this.hideOffscreenScrollElements(container);
+  }
+  /**
+  * hidden (cleanup after hide animation)
+  **/
+  hidden(container) {
+    super.hidden(container);
+    this.removeEventListeners();
+    this.destroyScenes();
   }
   /**
    * ############
@@ -106,6 +129,163 @@ class WebflowListView extends View {
       });
     }
   }
+  /**
+   * ##################
+   * ### DOM events ###
+   * ##################
+   */
+  handleEvent(e) {
+    switch (e.type) {
+      case 'resize':
+      case 'pageshow':
+      case 'DOMContentLoaded':
+        this.onWindowUpdate();
+        break;
+    }
+  }
+  addEventListeners() {
+    window.addEventListener('resize', this);
+    window.addEventListener('pageshow', this);
+    document.addEventListener('DOMContentLoaded', this);
+  }
+  removeEventListeners() {
+    window.removeEventListener('resize', this);
+    window.removeEventListener('pageshow', this);
+    document.removeEventListener('DOMContentLoaded', this);
+    clearTimeout(this._revealTimer);
+  }
+  onWindowUpdate() {
+    if (this.scenes.length > 0) {
+      scrollController.refresh();
+      // viewport size changed - recompute viewport-dependent scene offsets
+      // (they are baked from window.innerHeight at scene-build time)
+      this.refreshSceneOffsets();
+      // reveal elements that entered the viewport without a scroll (debounced -
+      // resize fires in bursts while dragging / toggling devtools)
+      clearTimeout(this._revealTimer);
+      this._revealTimer = setTimeout(() => this.revealVisibleScrollElements(), 150);
+    }
+  }
+  /**
+   * Recompute viewport-dependent scene offsets after a viewport change
+   */
+  refreshSceneOffsets() {
+    this.scenes.forEach(({ scene, el, setup }) => {
+      scene.offset(getScrollMagicSceneProps(el, setup).offset);
+    });
+  }
+  /**
+   * Reveal scene elements that entered the viewport without a scroll
+   * (devtools toggle, window resize, background-tab activation) -
+   * resize-driven scene updates carry scrollDirection "PAUSED", so the
+   * FORWARD guard in the scene start handler never fires for them
+   */
+  revealVisibleScrollElements() {
+    this.scenes.forEach(({ el, propsShow }) => {
+      if (el.classList.contains(CLASS_NAME_WEBSCROLL_FIRED)) {
+        return;
+      }
+      if (!elementIsVisibleInViewport(el, true)) {
+        return;
+      }
+      gsap.to(el, {
+        duration: propsShow.time,
+        ...propsShow.tween,
+        onComplete: () => {
+          el.classList.add(CLASS_NAME_WEBSCROLL_FIRED);
+        }
+      });
+    });
+  }
+  /**
+   * #####################
+   * ### SCROLL SCENES ###
+   * #####################
+   */
+  // set initial state for all scroll elements in list items
+  hideAllScrollElements(items) {
+    items.forEach((el) => {
+      const scrollEls = [...el.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')]
+        .filter(this.elementBelongsToView);
+      scrollEls.forEach((scrollEl) => {
+        const propsInitial = this.getTweenProps(scrollEl, DATA_ATTR_WEBSCROLL_INIT);
+        if (propsInitial) {
+          gsap.killTweensOf(scrollEl);
+          gsap.set(scrollEl, { ...propsInitial.tween });
+        }
+      });
+    });
+  }
+  // build ScrollMagic scenes for off-screen list items
+  buildScrollScenesForOffscreenItems(items) {
+    items.forEach((el) => {
+      if (this.isElementInViewport(el)) return;
+      const scrollEls = [...el.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')]
+        .filter(this.elementBelongsToView);
+      scrollEls.forEach((scrollEl) => {
+        this.buildScrollmagicScene(scrollEl);
+      });
+    });
+  }
+  // build a single ScrollMagic scene for a scroll element
+  buildScrollmagicScene(el) {
+    const propsInitial = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_INIT);
+    const propsShow = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_SHOW);
+    const setup = parseProps(el.dataset[DATA_ATTR_SETUP] || '');
+    if (propsInitial && propsShow) {
+      const smsp = getScrollMagicSceneProps(el, setup);
+      const scene = new ScrollMagic.Scene(smsp);
+      scene.on("start", (e) => {
+        if (el.classList.contains(CLASS_NAME_WEBSCROLL_FIRED)) return;
+        if (e.scrollDirection === "FORWARD") {
+          gsap.killTweensOf(el);
+          gsap.set(el, { ...propsInitial.tween });
+          gsap.to(el, {
+            duration: propsShow.time,
+            ...propsShow.tween,
+            onComplete: () => {
+              el.classList.add(CLASS_NAME_WEBSCROLL_FIRED);
+            }
+          });
+        }
+      });
+      scene.on("add", () => {
+        setTimeout(() => {
+          if (elementIsVisibleInViewport(el, true)) {
+            gsap.to(el, {
+              duration: propsShow.time,
+              ...propsShow.tween,
+              onComplete: () => {
+                el.classList.add(CLASS_NAME_WEBSCROLL_FIRED);
+              }
+            });
+          }
+        }, 10);
+      });
+      scene.addTo(scrollController.get());
+      this.scenes.push({ scene, el, propsShow, setup });
+    }
+  }
+  // hide off-screen scroll elements during view hide
+  hideOffscreenScrollElements(container) {
+    const scrollEls = [...container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_HIDE + ']')]
+      .filter(this.elementBelongsToView);
+    scrollEls.forEach((el) => {
+      if (this.isElementInViewport(el.closest(this.webset.selector))) return;
+      const propsHide = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_HIDE);
+      if (propsHide) {
+        gsap.killTweensOf(el);
+        gsap.to(el, { duration: propsHide.time, ...propsHide.tween });
+      }
+    });
+  }
+  // destroy all ScrollMagic scenes
+  destroyScenes() {
+    this.scenes.forEach(({ scene }) => {
+      scene.destroy();
+    });
+    this.scenes = [];
+  }
   /**
    * ###############
    * ### HELPERS ###

package/scripts/aswap/WebflowView.js

@@ -28,6 +28,7 @@ class WebflowView extends View {
   constructor(id) {
     super(id);
     this.scenes = [];
+    this._revealTimer = null;
   }
   /**
   * prepare (before show)
@@ -85,6 +86,9 @@ class WebflowView extends View {
       case 'resize':
         this.onWindowUpdate(e);
         break;
+      case 'pageshow':
+        this.onWindowUpdate(e);
+        break;
       case 'DOMContentLoaded':
         this.onWindowUpdate(e);
         break;
@@ -95,6 +99,7 @@ class WebflowView extends View {
    */
   addEventListeners() {
     window.addEventListener('resize', this);
+    window.addEventListener('pageshow', this);
     document.addEventListener('DOMContentLoaded', this);
   }
   /**
@@ -102,13 +107,53 @@ class WebflowView extends View {
    */
   removeEventListeners() {
     window.removeEventListener('resize', this);
+    window.removeEventListener('pageshow', this);
     document.removeEventListener('DOMContentLoaded', this);
+    clearTimeout(this._revealTimer);
   }
   onWindowUpdate(e) {
     if (this.scenes.length > 0) {
       scrollController.refresh();
+      // viewport size changed - recompute viewport-dependent scene offsets
+      // (they are baked from window.innerHeight at scene-build time)
+      this.refreshSceneOffsets();
+      // reveal elements that entered the viewport without a scroll (debounced -
+      // resize fires in bursts while dragging / toggling devtools)
+      clearTimeout(this._revealTimer);
+      this._revealTimer = setTimeout(() => this.revealVisibleScrollElements(), 150);
     }
   }
+  /**
+   * Recompute viewport-dependent scene offsets after a viewport change
+   */
+  refreshSceneOffsets() {
+    this.scenes.forEach(({ scene, el, setup }) => {
+      scene.offset(getScrollMagicSceneProps(el, setup).offset);
+    });
+  }
+  /**
+   * Reveal scene elements that entered the viewport without a scroll
+   * (devtools toggle, window resize, background-tab activation) -
+   * resize-driven scene updates carry scrollDirection "PAUSED", so the
+   * FORWARD guard in the scene start handler never fires for them
+   */
+  revealVisibleScrollElements() {
+    this.scenes.forEach(({ el, propsShow }) => {
+      if (el.classList.contains(CLASS_NAME_WEBSCROLL_FIRED)) {
+        return;
+      }
+      if (!elementIsVisibleInViewport(el, true)) {
+        return;
+      }
+      gsap.to(el, {
+        duration: propsShow.time,
+        ...propsShow.tween,
+        onComplete: () => {
+          el.classList.add(CLASS_NAME_WEBSCROLL_FIRED);
+        }
+      });
+    });
+  }
   /**
    * ############
    * ### SHOW ###
@@ -234,7 +279,7 @@ class WebflowView extends View {
         }, 10);
       });
       scene.addTo(scrollController.get());
-      this.scenes.push(scene);
+      this.scenes.push({ scene, el, propsShow, setup });
     }
   }
   /**
@@ -310,9 +355,8 @@ class WebflowView extends View {
   }
   // ## Destroy scrollmagic scenes
   destroyScenes() {
-    this.scenes.forEach((scene) => {
+    this.scenes.forEach(({ scene }) => {
       scene.destroy();
-      scene = null;
     })
     this.scenes = [];
   }