rytm-webflow 2.3.1 → 2.3.2

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.1",
+  "version": "2.3.2",
   "description": "rytm webflow pack - ASwap, ShowUp",
   "main": "scripts/index.js",
   "types": "scripts/index.d.ts",

package/scripts/aswap/WebflowListView.js

@@ -19,6 +19,7 @@ class WebflowListView extends View {
   constructor(id) {
     super(id);
     this.scenes = [];
+    this._revealTimer = null;
   }
   /**
   * animate in (show)
@@ -136,6 +137,7 @@ class WebflowListView extends View {
   handleEvent(e) {
     switch (e.type) {
       case 'resize':
+      case 'pageshow':
       case 'DOMContentLoaded':
         this.onWindowUpdate();
         break;
@@ -143,17 +145,58 @@ class WebflowListView extends View {
   }
   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 ###
@@ -220,7 +263,7 @@ class WebflowListView extends View {
         }, 10);
       });
       scene.addTo(scrollController.get());
-      this.scenes.push(scene);
+      this.scenes.push({ scene, el, propsShow, setup });
     }
   }
   // hide off-screen scroll elements during view hide
@@ -238,9 +281,8 @@ class WebflowListView extends View {
   }
   // destroy all ScrollMagic scenes
   destroyScenes() {
-    this.scenes.forEach((scene) => {
+    this.scenes.forEach(({ scene }) => {
       scene.destroy();
-      scene = null;
     });
     this.scenes = [];
   }

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 = [];
   }