rytm-webflow 2.1.2 → 2.1.3

package/README.md

@@ -265,7 +265,19 @@ Animate elements nested under the WebflowView container when scrolled into viewp
 ### Scrollmagic - animate elements when scrolled into viewport
 Scroll-triggered-animations of any element inside the *WebflowView* container. Use the `webscroll` data attributes (initial, show, hide):
 ```html
-<div data-webscroll-initial="y:100" data-webscroll-show="y:0,t:.5" data-webscroll-hide="o:0,t:.4">
+<div data-webscroll-initial="o:0" data-webscroll-show="o:1,t:.5" data-webscroll-hide="o:0,t:.3">
+  ...
+</div>
+```
+Use the `webset` data attribute to pass some additional parameters, eg. the trigger element. This can be helpful when animating any element in the Y axis, eg:
+```html
+<div data-webset="trigger:parent" data-webscroll-initial="y:100" data-webscroll-show="y:0,t:.5,e:power3.out" data-webscroll-hide="o:0,t:.4">
+  ...
+</div>
+```
+By default scroll-troggered animations are only fired once. You can change this by setting the `fireOnce` parameter to `false`, example:
+```html
+<div data-webset="fireOnce:false" data-webscroll-initial="o:0" data-webscroll-show="o:1,t:.5">
   ...
 </div>
 ```

package/package.json

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

package/scripts/aswap/WebflowListView.js

@@ -1,6 +1,7 @@
 import gsap from 'gsap';
 import View from './View';
 import { getWebflowAnimationProps, parseProps } from './../lib/dataTweenParser';
+import { CLASS_NAME_WEBSCROLL_FIRED } from './WebflowView';
 
 // data-webscroll-... (scroll magic)
 const DATA_ATTR_WEBSCROLL_INIT = "webscroll-initial";
@@ -49,6 +50,8 @@ class WebflowListView extends View {
   }
   // show web scroll element
   webScrollElementShow(el, delay) {
+    // check if element is in viewport
+    if (!this.isElementInViewport(el)) return;
     const propsInitial = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_INIT);
     const propsShow = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_SHOW);
     if (propsInitial && propsShow) {
@@ -56,6 +59,7 @@ class WebflowListView extends View {
       gsap.killTweensOf(el);
       gsap.set(el, {...propsInitial.tween});
       gsap.to(el, {duration: propsShow.time, ...propsShow.tween, delay});
+      el.classList.add(CLASS_NAME_WEBSCROLL_FIRED);
     }
   }
   /**
@@ -72,6 +76,16 @@ class WebflowListView extends View {
   getDataAttributeName(name) {
     return name.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
   }
+  // is element (any part of element) visible in scrolled viewport
+  isElementInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    const scrollY = window.scrollY;
+    // element position
+    const elTop = rect.top + scrollY;
+    const elBottom = elTop + rect.height;
+    // check if element is in viewport
+    return (elTop < (scrollY + window.innerHeight) && elBottom >= scrollY);
+  }
 
 }
 export default WebflowListView

package/scripts/aswap/WebflowView.js

@@ -18,6 +18,9 @@ const DATA_ATTR_STAGGER_INIT = "stagger-initial";
 const DATA_ATTR_STAGGER_SHOW = "stagger-show";
 const DATA_ATTR_STAGGER_HIDE = "stagger-hide";
 const DATA_ATTR_SETUP = "webset";
+const PROP_KEY_WEBSCROLL_FIRE_ONCE = "fireOnce";
+
+export const CLASS_NAME_WEBSCROLL_FIRED = "webflow-scroll-fired";
 
 class WebflowView extends View {
 
@@ -35,8 +38,9 @@ class WebflowView extends View {
   * animate in (show)
   **/  
   show(container) {
-    super.show(container);
     this.container = container;
+    this.hideScrollElements();
+    super.show(container);
     // show Aswap webviews
     this.webViewsShow();
     // show stagger elements
@@ -154,6 +158,22 @@ class WebflowView extends View {
     }
   }
   // ### ScrollMagic ###
+  // hide scenes (before show animation)
+  hideScrollElements() {
+    if (!this.container) {
+      console.warn("Unknown container", this);
+      return;
+    }
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')];
+    list.forEach(this.hideScrollElement.bind(this));
+  }
+  hideScrollElement(el, index) {
+    const propsInitial = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_INIT);
+    if (propsInitial) {
+      gsap.killTweensOf(el);
+      gsap.set(el, {...propsInitial.tween});
+    }
+  }
   /**
    * Build scenes for scrollmagic
    */
@@ -174,14 +194,19 @@ class WebflowView extends View {
     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]);
+    const fireOnce = setup[PROP_KEY_WEBSCROLL_FIRE_ONCE] === "false" ? false : true;
     if (propsInitial && propsShow) {
       const smsp = getScrollMagicSceneProps(el, setup);
       const scene = new ScrollMagic.Scene(smsp);
       scene.on("start", (e) => {
+        if (fireOnce && 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});
+          el.classList.add(CLASS_NAME_WEBSCROLL_FIRED);
         }
       });
       scene.addTo(scrollController.get());