rytm-webflow 2.3.0 → 2.3.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rytm-webflow",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "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,7 @@ class WebflowListView extends View {
 
   constructor(id) {
     super(id);
+    this.scenes = [];
   }
   /**
   * animate in (show)
@@ -25,8 +30,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 +52,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 +128,122 @@ class WebflowListView extends View {
       });
     }
   }
+  /**
+   * ##################
+   * ### DOM events ###
+   * ##################
+   */
+  handleEvent(e) {
+    switch (e.type) {
+      case 'resize':
+      case 'DOMContentLoaded':
+        this.onWindowUpdate();
+        break;
+    }
+  }
+  addEventListeners() {
+    window.addEventListener('resize', this);
+    document.addEventListener('DOMContentLoaded', this);
+  }
+  removeEventListeners() {
+    window.removeEventListener('resize', this);
+    document.removeEventListener('DOMContentLoaded', this);
+  }
+  onWindowUpdate() {
+    if (this.scenes.length > 0) {
+      scrollController.refresh();
+    }
+  }
+  /**
+   * #####################
+   * ### 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);
+    }
+  }
+  // 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();
+      scene = null;
+    });
+    this.scenes = [];
+  }
   /**
    * ###############
    * ### HELPERS ###