rytm-webflow 2.1.1 → 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.1",
+  "version": "2.1.3",
   "description": "rytm webflow pack - ASwap, ShowUp",
   "main": "scripts/index.js",
   "scripts": {

package/scripts/aswap/ASwap.js

@@ -33,6 +33,7 @@ class ASwap {
       onRequestUrl: () => {},
       onRequestLoad: () => {},
       onRequestLoaded: () => {},
+      onRequestSameUrl: () => {},
       onViewHide: () => {},
       onViewHidden: () => {},
       onViewSwapStart: () => {},
@@ -63,6 +64,7 @@ class ASwap {
     this.dispatcher.on(Events.NAV_REQUEST_URL, this.onRequestUrl.bind(this));
     this.dispatcher.on(Events.NAV_REQUEST_LOAD, this.onRequestLoad.bind(this));
     this.dispatcher.on(Events.NAV_REQUEST_LOADED, this.onRequestLoaded.bind(this));
+    this.dispatcher.on(Events.NAV_REQUEST_SAME_URL, this.onRequestSameUrl.bind(this));
     this.dispatcher.on(Events.NAV_VIEW_HIDE, this.onViewHide.bind(this));
     this.dispatcher.on(Events.NAV_VIEW_HIDDEN, this.onViewHidden.bind(this));
     this.dispatcher.on(Events.NAV_SWAP_START, this.onViewSwapStart.bind(this));
@@ -82,7 +84,7 @@ class ASwap {
   **/
   openURL(url, noHistory = false, useCache = true) {
     if (this.dispatcher) {
-      this.dispatcher.openURL(url, noHistory, useCache)
+      this.dispatcher.openURL(url, noHistory, useCache);
     }
   }
 
@@ -91,7 +93,7 @@ class ASwap {
     this.getActiveControlles().forEach( (c, index)=> {
       c.onRequestUrl(e);
     });
-    this.events.onRequestUrl()
+    this.events.onRequestUrl();
   }
   onRequestLoad(e) {
     document.documentElement.classList.add('js');
@@ -99,14 +101,17 @@ class ASwap {
     this.getActiveControlles().forEach( (c, index)=> {
       c.onRequestLoad(e);
     })
-    this.events.onRequestLoad()
+    this.events.onRequestLoad();
   }
   onRequestLoaded(e) {
     this.getControllersFromContainer(e.target.freshContent).forEach( (c, index)=> {
       c.onRequestLoaded(e);
     });
     document.documentElement.classList.remove("as-request-loading");
-    this.events.onRequestLoaded()
+    this.events.onRequestLoaded();
+  }
+  onRequestSameUrl(e) {
+    this.events.onRequestSameUrl();
   }
   onViewHide(e) {
     document.documentElement.classList.add('as-hide');
@@ -116,7 +121,7 @@ class ASwap {
         c.onViewHide(e);
       }
     });
-    this.events.onViewHide()
+    this.events.onViewHide();
   }
   onViewHidden(e) {
     document.documentElement.classList.remove('as-hide');
@@ -126,26 +131,26 @@ class ASwap {
         c.onViewHidden(e);
       }
     });
-    this.events.onViewHidden()
+    this.events.onViewHidden();
   }
   onViewSwapStart(e) {
     this.getControllersFromContainer(e.target.freshContent).forEach( (c, index)=> {
       c.onViewSwapStart(e);
     });
-    this.events.onViewSwapStart()
+    this.events.onViewSwapStart();
   }
   onViewSwapComplete(e) {
     this.getControllersFromContainer(e.target.freshContent).forEach( (c, index)=> {
       c.onViewSwapComplete(e);
     });
-    this.events.onViewSwapComplete()
+    this.events.onViewSwapComplete();
   }
   onViewShow(e) {
     document.documentElement.classList.add('as-show');
     this.getControllersFromContainer(e.target.freshContent).forEach( (c, index)=> {
       c.onViewShow(e);
     });
-    this.events.onViewShow()
+    this.events.onViewShow();
   }
   onViewShown(e) {
     document.documentElement.classList.add('as-show');

package/scripts/aswap/ASwapDispatcher.js

@@ -310,6 +310,7 @@ class ASwapDispatcher extends EventDispatcher {
     // check if url changed
     if (url == this.getCurrentUrl()) {
       this.trace("url didn't change", url);
+      this.dispatch(Events.NAV_REQUEST_SAME_URL);
       if (this.refreshOnSameUrl) {
         window.location.href = url;
       }

package/scripts/aswap/Events.js

@@ -3,6 +3,7 @@ const Events = {
   NAV_REQUEST_URL: "nav_open_url",
   NAV_REQUEST_LOAD: "nav_request_load",
   NAV_REQUEST_LOADED: "nav_request_loaded",
+  NAV_REQUEST_SAME_URL: "nav_same_url",
   
   // * animation related events: hide / hidden / show / shown
   NAV_VIEW_HIDE: "nav_veiw_hide",

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());