rytm-webflow 2.0.8 → 2.1.0

package/README.md

@@ -1,7 +1,7 @@
 # rytm-webflow
 Rytm webflow pack is used to make websites rendered on the server (using a PHP or other back-end) more dynamic.  
 A static website can be transformed into something we call a *pseudo single page application* (SPA). The pack includes  [ASwap](#aswap) - a framework under developement by Rytm.Digital since 2016 which uses *AJAX* / *fetch* to first load and then *swap* the page's content in user's browser.  
-This package comes with a handy [WebflowView](#webflowview).  
+This package comes with a handy [WebflowView](#webflowview) and [WebflowListView](#webflowlistview).  
 Another future rytm-webflow includes is [ShowUp](#showup) - a ScrollMagic.js wrapper which can be integrated with ASwap. 
 
   
@@ -250,7 +250,7 @@ Animate any element within the *WebflowView* container using the **Webflow synta
 ```
 or (more complex example):
 ```html
-<div data-webview-initial="x:-10,y:50" data-webview-show="x:0,y:0,t:.5,d:.15,e:Power2.easeOut" data-webview-hide="x:10,y:-25,t:.4,d:.2,e:Power2.easeIn">
+<div data-webview-initial="x:-10,y:50" data-webview-show="x:0,y:0,t:.5,d:.15,e:power3.out" data-webview-hide="x:10,y:-25,t:.4,d:.2,e:power2.in">
   ...
 </div>
 ```
@@ -269,7 +269,30 @@ Scroll-triggered-animations of any element inside the *WebflowView* container. U
   ...
 </div>
 ```
+## <a name="webflowlistview">WebflowListView</a> ##
+The WebflowListView enables staggered *show* animation for elements which implement the WebflowView Scrollmagic animations. 
+### Basic usage example  
+Define the route:
+```js
+import RytmWebflow from 'rytm-webflow'
 
+RytmWebflow.aswap.init({
+  routes: {
+    "list" : {
+      controller: RytmWebflow.Controller,
+      view: RytmWebflow.WebflowListView
+    }
+  }
+})
+```
+Add data attributes to the cointainer element. Inside the container place elements that include the `webscroll` data attributes (initial, show, hide):
+```html
+<div id="stage">
+  <ul data-as-view="list" data-as-id="uid" data-webset="selector:li,stagger:.1">
+    <li data-webscroll-initial="o:0" data-webscroll-show="o:1,t:.5" data-webscroll-hide="o:0,t.4">...</li>
+  </ul>
+</div>
+```
 
 
 ## <a name="showup">ShowUp</a> ##
@@ -300,7 +323,7 @@ To implement ShowUp on your HTML add a `data-webflow` or `data-webpara` attribut
 Add easing for your animations
 ```html
 <!-- gsap easing -->
-<div data-webflow="x:-10vw,t:.5,e:Expo.easeOut">...</div>
+<div data-webflow="x:-10vw,t:.5,e:expo.out">...</div>
 ```
 Delay animations
 ```html
@@ -387,7 +410,7 @@ Examples:
 <h1>Webflow show up</h1>
 <div data-webflow="t:.4,o:0,y:10;t:.4,o:0,y:-30">Webflow Simple ALPHA no delay</div>
 <div data-webflow="t:.4,o:0,s:.4;t:.4,o:0,s:1.5">Webflow Scale</div>
-<div data-webflow="t:1.4,x:-300,e:Expo.easeOut;t:.4,d:0,x:-100,e:Expo.easeIn" data-webset="offset:100">Webflow Offset: 100, Ease EXPO</div>
+<div data-webflow="t:1.4,x:-300,e:expo.out;t:.4,d:0,x:-100,e:expo.in" data-webset="offset:100">Webflow Offset: 100, Ease EXPO</div>
 <div data-webflow="t:1.4,x:-100vw;t:.4,d:0,x:-250" data-webset="offset:center">Webflow Offset: center</div>
 <div data-webflow="t:1.4,x:-250;t:.4,d:0,x:-250" data-webset="offset:top">Webflow offset: TOP</div>
 <div data-webflow="t:1.4,x:-250,w:10;t:.4,d:0,x:-250" data-webset="trigger:#boom">Webflow Triggered by next BLOCK</div>
@@ -395,7 +418,7 @@ Examples:
 <!-- ### Webflow Parallax ### -->
 <h1>Webflow parallax</h1>
 <div data-webpara="x:400" data-webset="duration:100%">Parallax duration 100%</div>
-<div data-webpara="x:400,e:Back.easeOut" data-webset="duration:40vh">Parallax  duration 40vh, ease: Back</div>
+<div data-webpara="x:400,e:back.out" data-webset="duration:40vh">Parallax  duration 40vh, ease: Back</div>
 <div >parent TRIGGER
   <div data-webpara="y:-500,r:180" data-webset="duration:100%,trigger:parent">Parallax Y</div>
 </div>

package/package.json

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

package/scripts/aswap/WebflowListView.js

@@ -0,0 +1,77 @@
+import gsap from 'gsap';
+import View from './View';
+import { getWebflowAnimationProps, parseProps } from './../lib/dataTweenParser';
+
+// data-webscroll-... (scroll magic)
+const DATA_ATTR_WEBSCROLL_INIT = "webscroll-initial";
+const DATA_ATTR_WEBSCROLL_SHOW = "webscroll-show";
+const DATA_ATTR_SETUP = "webset";
+const DEFAULT_STAGGER = .05;
+
+class WebflowListView extends View {
+
+  constructor(id) {
+    super(id);
+  }
+  /**
+  * animate in (show)
+  **/  
+  show(container) {
+    super.show(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)];
+    list.forEach(this.listElementShow.bind(this));
+  }
+  /**
+  * animate out (hide)
+  **/
+  hide(container) {
+    super.hide(container);
+  }
+  /**
+   * ############
+   * ### SHOW ###
+   * ############
+   */
+  // show list element
+  listElementShow(el, index) {
+    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 + ']')];
+    list.forEach((el) => {
+      this.webScrollElementShow(el, delay);
+    })
+  }
+  // show web scroll element
+  webScrollElementShow(el, delay) {
+    const propsInitial = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_INIT);
+    const propsShow = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_SHOW);
+    if (propsInitial && propsShow) {
+      delay = delay + (propsShow.delay || 0);
+      gsap.killTweensOf(el);
+      gsap.set(el, {...propsInitial.tween});
+      gsap.to(el, {duration: propsShow.time, ...propsShow.tween, delay});
+    }
+  }
+  /**
+   * ###############
+   * ### HELPERS ###
+   * ###############
+   */
+  // get animation props
+  getTweenProps(el, name) {
+    const dataAttrName = this.getDataAttributeName(name);
+    return getWebflowAnimationProps(el.dataset[dataAttrName]);
+  }
+  // replace data-x with dataX
+  getDataAttributeName(name) {
+    return name.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+  }
+
+}
+export default WebflowListView

package/scripts/index.js

@@ -3,6 +3,7 @@ import Controller from './aswap/Controller'
 import ControllerImgLoad from './aswap/ControllerImgLoad'
 import View from './aswap/View'
 import WebflowView from './aswap/WebflowView'
+import WebflowListView from './aswap/WebflowListView'
 // Bootstrap v5 helper
 import bootsrap5 from './bootstrap/v5/Bootstrap5'
 // showup
@@ -17,6 +18,7 @@ export default {
   ControllerImgLoad,
   View,
   WebflowView,
+  WebflowListView,
   // boottstrap
   bootsrap5,
   // showup

package/scripts/lib/dataTweenParser.js

@@ -145,7 +145,10 @@ const translateNonNumericValue = (key, valStr) => {
   let val
   switch (key) {
     case 'ease':
-      val = getWebflowEasing(valStr)
+      // old syntax: 'Back.easeOut'
+      val = getWebflowEasing(valStr);
+      // new syntax, eg.: 'back.out'
+      val = val ? val : valStr;
       break;
     default:
       // by default don't change anything (eg. '100%', '50vw')
@@ -155,6 +158,7 @@ const translateNonNumericValue = (key, valStr) => {
   return val
 }
 /**
+ * ### Depreciated (use string values insted, eg "e:back.out")
  * Get the TweenMax Easing function
  * @param {string} str 
  * @return {Ease}