rytm-webflow 2.0.6 → 2.0.8

package/README.md

@@ -1,7 +1,8 @@
 # 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](#markdown-header-aswap)** - a framework programmed by Rytm Digital arround 2016 which uses *AJAX* to first load and then *swap* the page's content in user's browser.  
-Another future rytm-webflow includes is **[ShowUp](#markdown-header-showup)** - a ScrollMagic.js wrapper which can be integrated with ASwap. 
+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).  
+Another future rytm-webflow includes is [ShowUp](#showup) - a ScrollMagic.js wrapper which can be integrated with ASwap. 
 
   
 **Install using NPM:**
@@ -14,7 +15,7 @@ $ npm install rytm-webflow --save
 - scrollmagic
 - scrollmagic-plugin-gsap
 
-## ASwap
+## <a name="aswap">ASwap</a>
 ### Basic usage example  
 In your HTML for each request you neeed a wrapper (default wrapper selector: ```#stage```)  
 Inside a wrapper you can have multiple view instances. Each view uses a name defined in ```data-as-view``` and an unique id defined in ```data-as-id```
@@ -217,9 +218,62 @@ RytmWebflow.aswap.init(params, {
   },
 })
 ```
+## <a name="webflowview">WebflowView</a> ##
+WebflowView is an universal ASwap View which can be used with the **Webflow syntax** - a minified way to describe an animation, it's duration (time), easing, delay or the trigger. Eg. `y:100,o:0` will animate an element from: `y:100px` and `opacity: 0` to it's current state. Go to [Webflow syntax](#webflowsyntax) for more.
+### Basic usage example  
+Define the route:
+```js
+import RytmWebflow from 'rytm-webflow'
+
+RytmWebflow.aswap.init({
+  routes: {
+    "webflow" : {
+      controller: RytmWebflow.Controller,
+      view: RytmWebflow.WebflowView
+    }
+  }
+})
+```
+Add data attributes to the cointainer element:
+```html
+<div id="stage">
+  <div data-as-view="webflow" data-as-id="uid">
+    ...
+  </div>
+</div>
+```
+Animate any element within the *WebflowView* container using the **Webflow syntax** inside the `webview` attributes (initial, show, hide):
+```html
+<div data-webview-initial="o:0" data-webview-show="o:1,t:.5" data-webview-hide="o:0,t:.4">
+  ...
+</div>
+```
+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>
+```
+### Stagger - animate any list of items
+Animate elements nested under the WebflowView container when scrolled into viewport by using `stagger` data attributes (initial, show, hide) and the `data-webset` attribute:
+```html
+<ul data-stagger-initial="o:0" data-stagger-show="o:1,t:.5,stagger:.1" data-stagger-hide="o:0,t:.4,stagger:.1" data-webset="selector:li">
+  <li>...</li>
+  <li>...</li>
+</ul>
+```
+### 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>
+```
+
+
 
-## ShowUp ##
-ShowUp makes creating gsap scroll-triggered-animations much faster. It can be used to show content while user scrolls down the page. It can also be used for parallax like animations. ShowUp comes with the **Webflow syntax** - a minified way to describe an animation, it's duration (time), easing, delay or the trigger. Eg. `y:100,o:0` will animate an element from: `y:100px` and `opacity: 0` to it's current state. Go to [Webflow syntax](#markdown-header-webflow-syntax) for more.
+## <a name="showup">ShowUp</a> ##
+ShowUp makes creating gsap scroll-triggered-animations much faster. It can be used to show content while user scrolls down the page. It can also be used for parallax like animations. ShowUp comes with the **Webflow syntax**. Go to [Webflow syntax](#webflowsyntax) for more.
 ### Webflow usage example  
 To enable ShowUp call the init method in your JS:
 ```js
@@ -315,11 +369,11 @@ When moving elements in the Y axis you can use the `parent` trigger hook:
   <div data-webpara="y:-100" data-webset="duration:100%,trigger:parent"></div>
 </div>
 ```
-### Webflow syntax ##
+### <a name="webflowsyntax">Webflow syntax</a> ##
 | short code  | prameter  | example |
 |---|---|---|
 | ```d```  | delay | ```"d:.4"``` |
-| ```e```  | ease | ```"e:Bounce:easeOut"``` |
+| ```e```  | ease | ```"e:Bounce.easeOut"``` |
 | ```h```  | height | ```"h:10"``` |
 | ```o```  | opacity | ```"o:0"``` |
 | ```r```  | rotation | ```"r:180"``` |

package/package.json

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

package/scripts/aswap/WebflowView.js

@@ -0,0 +1,286 @@
+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';
+
+// data-webview-... (aswap show / hide)
+const DATA_ATTR_WEBVIEW_INIT = "webview-initial";
+const DATA_ATTR_WEBVIEW_SHOW = "webview-show";
+const DATA_ATTR_WEBVIEW_HIDE = "webview-hide";
+// 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";
+// data-stagger-... (stagger - lists)
+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";
+
+class WebflowView extends View {
+
+  constructor(id) {
+    super(id);
+    this.scenes = [];
+  }
+  /**
+  * prepare (before show)
+  **/
+  prepare(container) {
+    super.prepare(container);
+  }
+  /**
+  * animate in (show)
+  **/  
+  show(container) {
+    super.show(container);
+    this.container = container;
+    // show Aswap webviews
+    this.webViewsShow();
+    // show stagger elements
+    this.staggerShow();
+    // build scrollmagic scenes
+    this.buildScrollmagicScenes();
+    // add event listeners
+    this.addEventListeners();
+  }
+  /**
+  * animate out (hide)
+  **/
+  hide(container) {
+    super.hide(container);
+    // hide Aswap webviews
+    this.webViewsHide();
+    // hide stagger elements
+    this.staggerHide();
+    // hide scrollmagic scenes
+    this.hideScrollmagicScenes();
+  }
+  /**
+  * animate out (hide)
+  **/
+  hidden(container) {
+    super.hidden(container);
+    this.removeEventListeners();
+    this.destroyScenes();
+  }
+  /**
+   * ##################
+   * ### DOM events ###
+   * ##################
+   */
+  /**
+   * Class event handlers
+   */
+  handleEvent(e) {
+    switch (e.type) {
+      case 'resize':
+        this.onWindowUpdate(e);
+        break;
+      case 'DOMContentLoaded':
+        this.onWindowUpdate(e);
+        break;
+    }
+  }
+  /**
+   * Add event listeners
+   */
+  addEventListeners() {
+    window.addEventListener('resize', this);
+    document.addEventListener('DOMContentLoaded', this);
+  }
+  /**
+   * Remove event listeners
+   */
+  removeEventListeners() {
+    window.removeEventListener('resize', this);
+    document.removeEventListener('DOMContentLoaded', this);
+  }
+  onWindowUpdate(e) {
+    if (this.scenes.length > 0) {
+      scrollController.refresh();
+    }
+  }
+  /**
+   * ############
+   * ### SHOW ###
+   * ############
+   */
+  // ### ASwap Show / Hide ###
+  // show webviews
+  webViewsShow() {
+    if (!this.container) {
+      console.warn("Unknown container", this);
+      return;
+    }
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBVIEW_SHOW + ']')];
+    list.forEach(this.webViewElementShow.bind(this));
+  }
+  // showe webview element
+  webViewElementShow(el, index) {
+    const propsInitial = this.getTweenProps(el, DATA_ATTR_WEBVIEW_INIT);
+    const propsShow = this.getTweenProps(el, DATA_ATTR_WEBVIEW_SHOW);
+    if (propsInitial && propsShow) {
+      gsap.killTweensOf(el);
+      gsap.set(el, {...propsInitial.tween});
+      gsap.to(el, {duration: propsShow.time, ...propsShow.tween});
+    }
+  }
+  // ### Stagger ###
+  // Stagger (lists) show
+  staggerShow() {
+    if (!this.container) {
+      console.warn("Unknown container", this);
+      return;
+    }
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_STAGGER_SHOW + ']')];
+    list.forEach(this.staggerListShow.bind(this));
+  }
+  staggerListShow(el, index) {
+    const { selector } = parseProps(el.dataset[DATA_ATTR_SETUP]);
+    if (!selector)  {
+      console.warn("Unknown selector for webflow stagger", el);
+      return;
+    }
+    const items = [...el.querySelectorAll(selector)];
+    const propsInit = this.getTweenProps(el, DATA_ATTR_STAGGER_INIT);
+    const propsShow = this.getTweenProps(el, DATA_ATTR_STAGGER_SHOW);
+    if (items.length && propsInit && propsShow) {
+      gsap.killTweensOf(items);
+      gsap.set(items, {...propsInit.tween});
+      gsap.to(items, {duration: propsShow.time, ...propsShow.tween});
+    }
+  }
+  // ### ScrollMagic ###
+  /**
+   * Build scenes for scrollmagic
+   */
+  buildScrollmagicScenes() {
+    if (!this.container) {
+      console.warn("Unknown container", this);
+      return;
+    }
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_SHOW + ']')];
+    list.forEach(this.buildScrollmagicScene.bind(this));
+  }
+  /**
+   * Build scroll magic scene
+   * @param {DOM} el 
+   * @param {Int} index 
+   */
+  buildScrollmagicScene(el, index) {
+    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 (e.scrollDirection === "FORWARD") {
+          gsap.killTweensOf(el);
+          gsap.set(el, {...propsInitial.tween});
+          gsap.to(el, {duration: propsShow.time, ...propsShow.tween});
+        }
+      });
+      scene.addTo(scrollController.get());
+      this.scenes.push(scene);
+    }
+  }
+  /**
+   * ############
+   * ### HIDE ###
+   * ############
+   */
+  // ### ASwap Show / Hide ###
+  // hide webviews
+  webViewsHide() {
+    if (!this.container) {
+      console.warn("Unknown container", this);
+      return;
+    }
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBVIEW_HIDE + ']')];
+    list.forEach(this.webViewsElementHide.bind(this));
+  }
+  // showe webview element
+  webViewsElementHide(el, index) {
+    const propsHide = this.getTweenProps(el, DATA_ATTR_WEBVIEW_HIDE);
+    if (propsHide) {
+      gsap.killTweensOf(el);
+      gsap.to(el, {duration: propsHide.time, ...propsHide.tween});
+    }
+  }
+  // ### Stagger ###
+  // Hide stagger
+  staggerHide() {
+    if (!this.container) {
+      console.warn("Unknown container", this);
+      return;
+    }
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_STAGGER_HIDE + ']')];
+    list.forEach(this.staggerListHide.bind(this));
+  }
+  // Hide stagger element
+  staggerListHide(el, index) {
+    const { selector } = parseProps(el.dataset[DATA_ATTR_SETUP]);
+    if (!selector)  {
+      console.warn("Unknown selector for webflow stagger", el);
+      return;
+    }
+    const items = [...el.querySelectorAll(selector)];
+    const propsHide = this.getTweenProps(el, DATA_ATTR_STAGGER_HIDE);
+    if (items.length && propsHide) {
+      gsap.killTweensOf(items);
+      gsap.to(items, {duration: propsHide.time, ...propsHide.tween});
+    }
+  }
+  // ### ScrollMagic ###
+  /**
+   * hide scenes
+   */
+  hideScrollmagicScenes() {
+    if (!this.container) {
+      console.warn("Unknown container", this);
+      return;
+    }
+    const list = [...this.container.querySelectorAll('*[data-' + DATA_ATTR_WEBSCROLL_HIDE + ']')];
+    list.forEach(this.hideScrollmagicElement.bind(this));
+  }
+  /**
+   * Hide element
+   * @param {DOM} el 
+   * @param {Int} index 
+   */
+  hideScrollmagicElement(el, index) {
+    const propsHide = this.getTweenProps(el, DATA_ATTR_WEBSCROLL_HIDE);
+    if (propsHide) {
+      gsap.killTweensOf(el);
+      gsap.to(el, { duration: propsHide.time, ...propsHide.tween});
+    }
+  }
+  // ## Destroy scrollmagic scenes
+  destroyScenes() {
+    this.scenes.forEach((scene) => {
+      scene.destroy();
+      scene = null;
+    })
+    this.scenes = [];
+  }
+  /**
+   * ###############
+   * ### 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 WebflowView

package/scripts/index.js

@@ -2,12 +2,13 @@ import aswapInstance from './aswap/ASwap'
 import Controller from './aswap/Controller'
 import ControllerImgLoad from './aswap/ControllerImgLoad'
 import View from './aswap/View'
+import WebflowView from './aswap/WebflowView'
 // Bootstrap v5 helper
 import bootsrap5 from './bootstrap/v5/Bootstrap5'
 // showup
 import scrollController from './showup/ScrollController'
 import showUp from './showup/ShowUp'
-import { getWebflowProps, getParallaxProps } from './lib/dataTweenParser'
+import { getWebflowAnimationProps, getWebflowProps, getParallaxProps, parseProps } from './lib/dataTweenParser'
 import { getScrollMagicSceneProps } from './lib/dataScrollMagicParser'
 
 export default {
@@ -15,13 +16,16 @@ export default {
   Controller,
   ControllerImgLoad,
   View,
+  WebflowView,
   // boottstrap
   bootsrap5,
   // showup
   scrollController,
   showUp,
   // lib
+  getWebflowAnimationProps,
   getWebflowProps,
   getParallaxProps,
+  parseProps,
   getScrollMagicSceneProps
 }

package/scripts/lib/dataTweenParser.js

@@ -55,7 +55,7 @@ export const getWebflowProps = (dataStr) => {
  * @param {string} gstr (eg. y:100,o:0)
  * @return {Object}
  */
-const getWebflowAnimationProps = (gstr) => {
+export const getWebflowAnimationProps = (gstr) => {
   let propsFromData = parseProps(gstr)
   return getValidWebflowAnimationProps(propsFromData)
 }

package/scripts/showup/ShowUp.js

@@ -74,7 +74,7 @@ class ShowUp {
     if (wfp.show) {
       const smsp = getScrollMagicSceneProps(el, setup)
       const scene = new ScrollMagic.Scene(smsp)
-      scene.setTween(TweenMax.from(el, wfp.show.time, wfp.show.tween))
+      scene.setTween(TweenMax.from(el, { duration: wfp.show.time, ...wfp.show.tween}))
       scene.addTo(scrollController.get())
       this.scenes.push(scene)
     }
@@ -92,7 +92,7 @@ class ShowUp {
     if (pp) {
       const smsp = getScrollMagicSceneProps(el, setup)
       const scene = new ScrollMagic.Scene(smsp)
-      scene.setTween(TweenMax.to(el, 1, pp.parallax.tween))
+      scene.setTween(TweenMax.to(el, {duration: 1, ...pp.parallax.tween}))
       scene.addTo(scrollController.get())
       this.scenes.push(scene)
     }