rytm-webflow 2.2.3 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rytm-webflow",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "rytm webflow pack - ASwap, ShowUp",
   "main": "scripts/index.js",
   "scripts": {

package/scripts/aswap/View.js

@@ -50,7 +50,19 @@ class View {
    * fired only if ControllerImgLoad is used
    */
   loadImagesComplete(container) {
-  }  
+  }
+  /**
+   * check if DOM element belongs to view
+   * exclude elements belonging to nested views
+   */
+  elementBelongsToView = (el) => {
+    let result = false;
+    const elContainer = el.closest('[data-as-view]');
+    if (elContainer && elContainer.dataset.asId === this.id) {
+      result = true;
+    }
+    return result;
+  }
 }
 
 export default View;

package/scripts/aswap/WebflowListView.js

@@ -6,6 +6,7 @@ import { CLASS_NAME_WEBSCROLL_FIRED } from './WebflowView';
 // data-webscroll-... (scroll magic)
 const DATA_ATTR_WEBSCROLL_INIT = "webscroll-initial";
 const DATA_ATTR_WEBSCROLL_SHOW = "webscroll-show";
+const DATA_ATTR_WEBSCROLL_HIDE = "webscroll-hide";
 const DATA_ATTR_SETUP = "webset";
 const DEFAULT_STAGGER = .05;
 
@@ -24,7 +25,7 @@ class WebflowListView extends View {
       console.warn("Unknown selector for WebflowListView", this);
       return;
     }
-    const list = [...container.querySelectorAll(this.webset.selector)];
+    const list = [...container.querySelectorAll(this.webset.selector)].filter(this.elementBelongsToView);
     list.forEach(this.listElementShow.bind(this));
   }
   /**
@@ -32,6 +33,13 @@ class WebflowListView extends View {
   **/
   hide(container) {
     super.hide(container);
+    this.webset = parseProps(container.dataset[DATA_ATTR_SETUP]);
+    if (!this.webset.selector) {
+      console.warn("Unknown selector for WebflowListView", this);
+      return;
+    }
+    const list = [...container.querySelectorAll(this.webset.selector)].filter(this.elementBelongsToView);
+    list.forEach(this.listElementHide.bind(this));
   }
   /**
    * ############
@@ -45,7 +53,7 @@ class WebflowListView extends View {
     const stagger = this.webset.stagger ? parseFloat(this.webset.stagger) : DEFAULT_STAGGER;
     const delay = index * stagger;
     // search for all webscroll elements
-    const list = [...el.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')];
+    const list = [...el.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')].filter(this.elementBelongsToView);
     list.forEach((el) => {
       this.webScrollElementShow(el, delay);
     })
@@ -68,6 +76,36 @@ class WebflowListView extends View {
       });
     }
   }
+  /**
+   * ############
+   * ### HIDE ###
+   * ############
+   */
+  // show list element
+  listElementHide(el, index) {
+    // check if element is in viewport
+    if (!this.isElementInViewport(el)) return;
+    const stagger = this.webset.stagger ? parseFloat(this.webset.stagger) : DEFAULT_STAGGER;
+    const delay = index * stagger;
+    // search for all webscroll elements
+    const list = [...el.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')].filter(this.elementBelongsToView);
+    list.forEach((el) => {
+      this.webScrollElementHide(el, delay);
+    })
+  }
+  // show web scroll element
+  webScrollElementHide(el, delay) {
+    const propsHide = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_HIDE);
+    if (propsHide) {
+      delay = delay + (propsHide.tween.delay || 0);
+      gsap.killTweensOf(el);
+      gsap.to(el, {
+        duration: propsHide.time, 
+        ...propsHide.tween, 
+        delay,
+      });
+    }
+  }
   /**
    * ###############
    * ### HELPERS ###

package/scripts/aswap/WebflowView.js

@@ -55,6 +55,7 @@ class WebflowView extends View {
   * animate out (hide)
   **/
   hide(container) {
+    this.container = container;
     super.hide(container);
     // hide Aswap webviews
     this.webViewsHide();
@@ -120,7 +121,7 @@ class WebflowView extends View {
       console.warn("Unknown container", this);
       return;
     }
-    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBVIEW_SHOW + ']')];
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBVIEW_SHOW + ']')].filter(this.elementBelongsToView);
     list.forEach(this.webViewElementShow.bind(this));
   }
   // showe webview element
@@ -140,7 +141,7 @@ class WebflowView extends View {
       console.warn("Unknown container", this);
       return;
     }
-    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_STAGGER_SHOW + ']')];
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_STAGGER_SHOW + ']')].filter(this.elementBelongsToView);
     list.forEach(this.staggerListShow.bind(this));
   }
   staggerListShow(el, index) {
@@ -149,7 +150,7 @@ class WebflowView extends View {
       console.warn("Unknown selector for webflow stagger", el);
       return;
     }
-    const items = [...el.querySelectorAll(selector)];
+    const items = [...el.querySelectorAll(selector)].filter(this.elementBelongsToView);
     const propsInit = this.getTweenProps(el, DATA_ATTR_STAGGER_INIT);
     const propsShow = this.getTweenProps(el, DATA_ATTR_STAGGER_SHOW);
     if (items.length && propsInit && propsShow) {
@@ -165,7 +166,7 @@ class WebflowView extends View {
       console.warn("Unknown container", this);
       return;
     }
-    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')];
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')].filter(this.elementBelongsToView);
     list.forEach(this.hideScrollElement.bind(this));
   }
   hideScrollElement(el, index) {
@@ -183,7 +184,7 @@ class WebflowView extends View {
       console.warn("Unknown container", this);
       return;
     }
-    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')];
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')].filter(this.elementBelongsToView);
     list.forEach(this.buildScrollmagicScene.bind(this));
   }
   /**
@@ -248,7 +249,7 @@ class WebflowView extends View {
       console.warn("Unknown container", this);
       return;
     }
-    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBVIEW_HIDE + ']')];
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBVIEW_HIDE + ']')].filter(this.elementBelongsToView);
     list.forEach(this.webViewsElementHide.bind(this));
   }
   // showe webview element
@@ -266,7 +267,7 @@ class WebflowView extends View {
       console.warn("Unknown container", this);
       return;
     }
-    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_STAGGER_HIDE + ']')];
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_STAGGER_HIDE + ']')].filter(this.elementBelongsToView);
     list.forEach(this.staggerListHide.bind(this));
   }
   // Hide stagger element
@@ -276,7 +277,7 @@ class WebflowView extends View {
       console.warn("Unknown selector for webflow stagger", el);
       return;
     }
-    const items = [...el.querySelectorAll(selector)];
+    const items = [...el.querySelectorAll(selector)].filter(this.elementBelongsToView);
     const propsHide = this.getTweenProps(el, DATA_ATTR_STAGGER_HIDE);
     if (items.length && propsHide) {
       gsap.killTweensOf(items);
@@ -292,7 +293,7 @@ class WebflowView extends View {
       console.warn("Unknown container", this);
       return;
     }
-    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_HIDE + ']')];
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_HIDE + ']')].filter(this.elementBelongsToView);
     list.forEach(this.hideScrollmagicElement.bind(this));
   }
   /**