rytm-webflow 1.1.1 → 1.1.5

package/README.md

@@ -1,13 +1,22 @@
 # 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** - 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
+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. 
+
   
 **Install using NPM:**
 ```
 $ npm install rytm-webflow --save
 ```
+## Dependencies
+- gsap
+- imagesloaded
+- jquery
+- scrollmagic
+- scrollmagic-plugin-gsap
 
-## Basic usage example  
+## ASwap
+### 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```
 ```html
@@ -25,12 +34,8 @@ import RytmWebflow from 'rytm-webflow'
 RytmWebflow.aswap.init()
 ```
 
-## Dependencies
-- imagesloaded
-- jquery
-
-## More examples
-### Controllers
+### More examples
+#### Controllers
 To programm some interaction within your ASwap views create a controller
 
 ```js
@@ -83,7 +88,7 @@ If you are using the ```ControllerImgLoad``` - to hide the view before the show
 ```
 
 
-### Views
+#### Views
 If you need some fancy animations to show / hide your views you can create view instances.
 ```js
 import RytmWebflow from 'rytm-webflow'
@@ -114,7 +119,7 @@ RytmWebflow.aswap.init({
 })
 ```
 Read more about it -> [View class](#markdown-header-view-class)
-### Sample params
+#### Sample params
 ```js
 import RytmWebflow from 'rytm-webflow'
 import { trace } from 'rytm-helpers'
@@ -130,7 +135,7 @@ RytmWebflow.aswap.init({
 ```
 
 
-## Params
+### Params
 
 | param  | default  | info  |
 |---|---|---|
@@ -149,9 +154,10 @@ RytmWebflow.aswap.init({
 | ```refreshOnSameUrl``` | ```true``` | When ```true``` each request on same URL will refresh browser's window |
 | ```routes``` | ```{}``` | The routes object where you can define controllers and views |
 | ```swapSelector``` | ```'#stage'``` | ASwap wrapper selector |
+| ```defaultDocumentScrollBehavior``` | ```'smooth'``` | Default document scroll behaviour |
 | ```trace``` | ```(message) => {}``` | A function to log stuff, eg in console |
 
-## Controller class
+### Controller class
 
 | method  | info  |
 |---|---|
@@ -167,7 +173,7 @@ RytmWebflow.aswap.init({
 | ```onViewShow()```  | read more -> [global events](#markdown-header-global-events) |
 | ```onViewShown()```  | read more -> [global events](#markdown-header-global-events) |
 
-## View class
+### View class
 | method  | parameters  | info  |
 |---|---|---|
 | ```hide()```  | ```container``` | this method is called by the ```Controller``` instance in the ```onViewShow()``` method |
@@ -176,7 +182,7 @@ RytmWebflow.aswap.init({
 | ```loadImagesStart()```  | ```container``` | this method is called by the ```ControllerImgLoad``` instance  on image load start |
 | ```loadImagesComplete()```  | ```container``` | this method is called by the ```ControllerImgLoad``` instance  on image load complete |
 
-## Global events
+### Global events
 You also can pass custom methods to the global ASwap instance events, eg:
 ```js
 import RytmWebflow from 'rytm-webflow'
@@ -198,3 +204,154 @@ RytmWebflow.aswap.init(params, {
 | ```onViewSwapComplete()```  | fired just after the scene's content is being replaced |
 | ```onViewShow()```  | fired when the new scene is loaded and the show transition is being started |
 | ```onViewShown()```  | fired within ```animationTimeShow``` ms from show transition start |
+
+### Bootstrap integration ###
+#### Bootstrap v5 ####
+A common situation is to hide all Bootstrap offcanvases or modals when an ASwap page transition is in made. To do so just call the `RytmWebflow.bootsrap5.hideFlyovers()` method. You can also hide offcanvases or modals separatly by calling the `RytmWebflow.bootsrap5.hideOffcanvases()` or `RytmWebflow.bootsrap5.hideModals()` methods.  
+A basic usage example:
+```js
+import RytmWebflow from 'rytm-webflow'
+
+RytmWebflow.aswap.init(params, {
+  onViewHide: () => {
+    RytmWebflow.bootsrap5.hideFlyovers()
+  },
+})
+```
+
+## 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.
+### Webflow usage example  
+To enable ShowUp call the init method in your JS:
+```js
+import RytmWebflow from 'rytm-webflow'
+
+RytmWebflow.showUp.init()
+```
+If you are working on a SPA or using ASwap the only thing you need to do is call the rebuild method on each view load. Check out the ASwap example:
+```js
+import RytmWebflow from 'rytm-webflow'
+
+const events = {
+  onViewSwapComplete: () => {
+    RytmWebflow.showUp.rebuild()
+  }
+}
+RytmWebflow.aswap.init({}, events)
+```
+To implement ShowUp on your HTML add a `data-webflow` or `data-webpara` attribute to DOM elements which will describe the animation
+```html
+<!-- From opacity: 0 in .4s -->
+<div data-webflow="o:0,t:.4">...</div>
+```
+Add easing for your animations
+```html
+<!-- gsap easing -->
+<div data-webflow="x:-10vw,t:.5,e:Expo.easeOut">...</div>
+```
+Delay animations
+```html
+<!-- delay by .3s -->
+<div data-webflow="x:-20,t:.5,d:.3">...</div>
+```
+#### Trigger element
+By default the ScrollMagic.Scene is triggered by the element itself. Also it is triggered once the element becomes visible (at the window bottom).
+You can override these defaults using the `data-webset` attribute.  
+To specyfy an offset:
+```html
+<!-- offset: 100px from bottom up -->
+<div data-webflow="o:0" data-webset="offset:100">...</div>
+
+<!-- offset: window center -->
+<div data-webflow="o:0" data-webset="offset:center">...</div>
+
+<!-- offset: window top -->
+<div data-webflow="o:0" data-webset="offset:top">...</div>
+```
+To specyfy a trigger element:
+```html
+<!-- target -->
+<div data-webflow="o:0" data-webset="trigger:#myTarget">...</div>
+```
+#### *Hide* animation
+You can specify a *hide* transition (eg. for ASwap View to hide elements)
+Separate *show* and *hide* animation using `;`
+```html
+<!-- show, hide -->
+<div data-webflow="x:-30,t:.5;x:15,t:.3">...</div>
+```
+To start the hide animation on each dom element call the `hide()` method
+```js
+RytmWebflow.showUp.hide()
+```
+An ASwap example implementing ShowUp along with the *hide* animation:
+```js
+import RytmWebflow from 'rytm-webflow'
+
+const events = {
+  onViewSwapComplete: () => {
+    RytmWebflow.showUp.rebuild()
+  },
+  onViewHide: () => {
+    RytmWebflow.showUp.hide()
+  }
+}
+RytmWebflow.aswap.init({}, events)
+```
+### Parallax usage example  
+Parallax like animation:
+```html
+<!-- parallax duration 100% - by container height -->
+<div data-webpara="x:100" data-webset="duration:100%">...</div>
+```
+Duration can be relative to viewport:
+```html
+<!-- parallax duration 30vh - by viewport height -->
+<div data-webpara="s:1.2" data-webset="duration:30vh">...</div>
+```
+When moving elements in the Y axis you can use the `parent` trigger hook:
+```html
+<!-- parallax triggered by parent Node -->
+<div>
+  <div data-webpara="y:-100" data-webset="duration:100%,trigger:parent"></div>
+</div>
+```
+### Webflow syntax ##
+| short code  | prameter  | example |
+|---|---|---|
+| ```d```  | delay | ```"d:.4"``` |
+| ```e```  | ease | ```"e:Bounce:easeOut"``` |
+| ```h```  | height | ```"h:10"``` |
+| ```o```  | opacity | ```"o:0"``` |
+| ```r```  | rotation | ```"r:180"``` |
+| ```s```  | scale | ```"s:.1"``` |
+| ```t```  | time | ```"t:.35"``` |
+| ```w```  | width |  ```"w:1200"```| |
+
+### More examples
+Examples:
+```html
+<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:-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>
+<div id="boom" >Trigger</div>
+<!-- ### 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 >parent TRIGGER
+  <div data-webpara="y:-500,r:180" data-webset="duration:100%,trigger:parent">Parallax Y</div>
+</div>
+```
+
+You can use the parser functions to implement your own view related methods using the Webflow syntax:  
+
+| function  | descr  |
+|---|---|
+| ```RytmWebflow.getWebflowProps(str)```  | converts a webflow syntax string into an webflow parameters object: ```{show: {tween: {}, time: X}, hide: {tween: {}, time: X}``` |
+| ```RytmWebflow.getParallaxProps(str)```  | converts a webflow syntax string into an webflow parameters object: ```{parallax: {tween: {}}}``` |
+

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "rytm-webflow",
-  "version": "1.1.1",
-  "description": "rytm webflow pack - ASwap+",
+  "version": "1.1.5",
+  "description": "rytm webflow pack - ASwap, ShowUp",
   "main": "scripts/index.js",
-  "scripts": {},
+  "scripts": {
+    "update": "git pull",
+    "push": "git add . && git commit -a -m \"$m\" && git push"
+  },
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/rytm/rytm-webflow.git"
@@ -13,7 +16,10 @@
   "homepage": "https://bitbucket.org/rytm/rytm-webflow#readme",
   "devDependencies": {},
   "dependencies": {
+    "gsap": "^3.5.1",
     "imagesloaded": "^4.1.4",
-    "jquery": "^3.1.1"
+    "jquery": "^3.1.1",
+    "scrollmagic": "^2.0.7",
+    "scrollmagic-plugin-gsap": "^1.0.4"
   }
 }

package/scripts/aswap/ASwap.js

@@ -25,6 +25,7 @@ class ASwap {
       refreshOnSameUrl: true, // refresh window if same URL is requested
       routes: {},
       swapSelector: '#stage', // swap wrapper selector
+      defaultDocumentScrollBehavior: 'smooth',
       trace: () => {}, // a function to trace progress in console
     }
     // public events

package/scripts/aswap/ASwapDispatcher.js

@@ -231,8 +231,16 @@ class ASwapDispatcher extends EventDispatcher {
   * scroll back up
   **/
   resetScrollPosition() {
-    // $("html, body").animate({ scrollTop: "0" }, 300);
-    $("html, body").scrollTop(0);
+    // set scrollBehavior to auto
+    document.documentElement.style.scrollBehavior = 'auto';
+    // scroll without animation
+    setTimeout(() => {
+      window.scrollTo(0, 0)
+    }, 5)
+    // set scrollBehavior to it's default value
+    setTimeout(() => {
+      document.documentElement.style.scrollBehavior = this.defaultDocumentScrollBehavior ? this.defaultDocumentScrollBehavior : 'smooth';
+    }, 5)
   }
   /**
    * Preload URL

package/scripts/bootstrap/v5/Bootstrap5.js

@@ -0,0 +1,45 @@
+import { Offcanvas, Modal } from 'bootstrap'
+
+/**
+ * Bootstrap v5 helpers
+ */
+class Bootstrap5 {
+  /**
+  * @constructor
+  **/
+  constructor() {
+  }
+  // # Hide all modals, offcanvases, etc.
+  hideFlyovers() {
+    this.hideModals()
+    this.hideOffcanvases()
+  }
+  // # Hide all modals #
+  hideModals() {
+    const list = [...document.querySelectorAll(".modal")]
+    list.forEach(this.hdieModal.bind(this))
+  }
+  //  # Hide offcanvas element
+  hdieModal(el) {
+    const modal = Modal.getInstance(el)
+    if (modal) {
+      modal.hide()
+    }
+  }
+  // # Hide all offcanvases #
+  hideOffcanvases() {
+    const list = [...document.querySelectorAll(".offcanvas")]
+    list.forEach(this.hdieOffcanvas.bind(this))
+  }
+  //  # Hide offcanvas element
+  hdieOffcanvas(el) {
+    const offcanvas = Offcanvas.getInstance(el)
+    if (offcanvas) {
+      offcanvas.hide()
+    }
+  }
+
+}
+
+const bootstrap5 = new Bootstrap5();
+export default bootstrap5;

package/scripts/index.js

@@ -2,11 +2,26 @@ import aswapInstance from './aswap/ASwap'
 import Controller from './aswap/Controller'
 import ControllerImgLoad from './aswap/ControllerImgLoad'
 import View from './aswap/View'
-
+// 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 { getScrollMagicSceneProps } from './lib/dataScrollMagicParser'
 
 export default {
   aswap: aswapInstance,
   Controller,
   ControllerImgLoad,
-  View
+  View,
+  // boottstrap
+  bootsrap5,
+  // showup
+  scrollController,
+  showUp,
+  // lib
+  getWebflowProps,
+  getParallaxProps,
+  getScrollMagicSceneProps
 }

package/scripts/lib/dataScrollMagicParser.js

@@ -0,0 +1,80 @@
+/**
+ * get ScrollMagic.Scene props
+ * @param {Object} wfProps 
+ * @param {Object} setup 
+ * @return {Object}
+ */
+export const getScrollMagicSceneProps = (el, setup) => {
+  const triggerElement = getTriggerFromProps(setup, el)
+  const duration = getDurationFromProps(setup)
+  const offset = getOffsetFromProps(setup)
+  return {
+    triggerElement,
+    duration,
+    offset
+  }
+}
+const getTriggerFromProps = (setup, el) => {
+  let trigger = el
+  if (setup.trigger) {
+    switch (setup.trigger) {
+      case "parent":
+        trigger = el.parentNode
+        break;
+      default:
+        trigger = setup.trigger
+        break;
+    }
+  }
+  return trigger
+}
+const getDurationFromProps = (setup) => {
+  let duration = 0
+  if (setup.duration) {
+    duration = isNaN(setup.duration) ? translateNonNumericValue("duration", setup.duration) : parseFloat(setup.duration)
+  }
+  return duration
+}
+const getOffsetFromProps = (setup) => {
+  const bottomOffset = setup.offset ? setup.offset : 0
+  let offset
+  switch (bottomOffset) {
+    case "center":
+      offset = 0
+      break;
+    case "top":
+      offset = window.innerHeight * .5
+      break;
+    default:
+      offset = bottomOffset - window.innerHeight * .5
+      break;
+  }
+  return offset
+}
+
+/**
+ * Translate non numeric value strings... 
+ * @param {string} key 
+ * @param {string} valStr 
+ * @return {*}
+ */
+const translateNonNumericValue = (key, valStr) => {
+  let val
+  switch (key) {
+    case 'duration':
+      // calculate viewport vw & vh
+      if (valStr.includes("vw")) {
+        val = parseInt(valStr.replace("vw", "")) * .01 * window.innerWidth
+      } else if (valStr.includes("vh")) {
+        val = parseInt(valStr.replace("vh", "")) * .01 * window.innerHeight
+      } else {
+        val = valStr
+      }
+      break;
+    default:
+      // by default don't change anything (eg. '100%', '50vw')
+      val = valStr
+      break;
+  }
+  return val
+}

package/scripts/lib/dataTweenParser.js

@@ -0,0 +1,209 @@
+import { Power0, Power1, Power2, Power3, Power4, Back, Bounce, Elastic, Expo, Sine } from 'gsap'
+
+
+const DEFAULT_ANIMATION_TIME = .4
+
+/**
+ * Split string into props
+ * @param {string} gstr (eg. y:100,o:0)
+ * @return {Object}
+ */
+export const parseProps = (gstr) => {
+  let props = {}
+  if (gstr) {
+    const arr = gstr.split(',')
+    arr.forEach((s, index) => {
+      let p = parseWebflowKeyValue(s)
+      props = {...props, ...p}
+    })
+  }
+  return props
+}
+/**
+ * get Parallax Props 
+ * @param {String} dataStr 
+ * @return {Object}
+ * {parallax: {tween: {}}}
+ */
+export const getParallaxProps = (dataStr) => {
+  let params = {}
+  if (dataStr) {
+    const groups = dataStr.split(';')
+    params.parallax = getWebflowAnimationProps(groups[0])
+  }
+  return params
+}
+
+/**
+ * get Webflow Props 
+ * @param {String} dataStr 
+ * @return {Object}
+ * {show: {tween: {}, time: X}, hide: {tween: {}, time: X}
+ */
+export const getWebflowProps = (dataStr) => {
+  let params = {}
+  if (dataStr) {
+    const groups = dataStr.split(';')
+    params.show = getWebflowAnimationProps(groups[0])
+    // hide (optional)
+    params.hide = groups.length > 1 ? getWebflowAnimationProps(groups[1]) : false
+  }
+  return params
+}
+/**
+ * group string to JS object
+ * @param {string} gstr (eg. y:100,o:0)
+ * @return {Object}
+ */
+const getWebflowAnimationProps = (gstr) => {
+  let propsFromData = parseProps(gstr)
+  return getValidWebflowAnimationProps(propsFromData)
+}
+
+/**
+ * divide properties for TweenMax use: time (int) vs tween (obj)
+ * @param {Object} propsFromData 
+ * @return {Object}
+ */
+const getValidWebflowAnimationProps = (propsFromData) => {
+  let ap = {
+    time: DEFAULT_ANIMATION_TIME,
+    tween: {}
+  }
+  for (let key in propsFromData) {
+    switch (key) {
+      case 'time':
+        ap.time = propsFromData[key]
+        break;
+      default:
+        ap.tween[key] = propsFromData[key]
+        break;
+    }
+  }
+  return ap
+}
+/**
+ * key:value string to JS object
+ * @param {string} s (eg. y:100)
+ * @return {*}
+ */
+const parseWebflowKeyValue = (s) => {
+  let p = {}
+  const arr = s.split(':')
+  if (arr.length > 1) {
+    const key = translateKey(arr[0])
+    const val = isNaN(arr[1]) ? translateNonNumericValue(key, arr[1]) : parseFloat(arr[1])
+    p[key] = val
+  }
+  return p
+}
+/**
+ * Translate key (eg: 'o' = 'opacity')
+ * @param {string} keyStr 
+ * @return string
+ */
+const translateKey = (keyStr) => {
+  let key = ''
+  switch (keyStr) {
+    case 'd':
+      key = 'delay'
+      break
+    case 'e':
+      key = 'ease'
+      break
+    case 'h':
+      key = 'height'
+      break
+    case 'o':
+      key = 'opacity'
+      break
+    case 'r':
+      key = 'rotation'
+      break
+    case 's':
+      key = 'scale'
+      break
+    case 't':
+      key = 'time'
+      break
+    case 'w':
+      key = 'width'
+      break
+    default:
+      key = keyStr
+      break
+  }
+  return key
+}
+/**
+ * Translate non numeric value strings... 
+ * @param {string} key 
+ * @param {string} valStr 
+ * @return {*}
+ */
+const translateNonNumericValue = (key, valStr) => {
+  let val
+  switch (key) {
+    case 'ease':
+      val = getWebflowEasing(valStr)
+      break;
+    default:
+      // by default don't change anything (eg. '100%', '50vw')
+      val = valStr
+      break;
+  }
+  return val
+}
+/**
+ * Get the TweenMax Easing function
+ * @param {string} str 
+ * @return {Ease}
+ */
+const getWebflowEasing = (str) => {
+  let easing
+  let arr = str.split('.')
+  if (arr.length == 2) {
+    switch (arr[0]) {
+      case 'Back':
+        easing = Back[arr[1]]
+        break;
+      case 'Bounce':
+        easing = Bounce[arr[1]]
+        break;
+      case 'Circ':
+        easing = Circ[arr[1]]
+        break;
+      case 'Elastic':
+        easing = Elastic[arr[1]]
+        break;
+      case 'Expo':
+        easing = Expo[arr[1]]
+        break;
+      case 'Power0':
+        easing = Power0[arr[1]]
+        break;
+      case 'Power1':
+        easing = Power1[arr[1]]
+        break;
+      case 'Power2':
+        easing = Power2[arr[1]]
+        break;
+      case 'Power3':
+        easing = Power3[arr[1]]
+        break;
+      case 'Power4':
+        easing = Power4[arr[1]]
+        break;
+      case 'SlowMo':
+        easing = SlowMo[arr[1]]
+        break;
+      case 'Stepped':
+        easing = SteppedEase[arr[1]]
+        break;
+      default:
+        easing = Sine[arr[1]]
+        break;
+    }
+  }
+  return easing
+}

package/scripts/showup/ScrollController.js

@@ -0,0 +1,43 @@
+// # configure scroll magic and gsap
+import ScrollMagic from 'scrollmagic'
+import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
+import { gsap } from 'gsap'
+// GSAP plugins
+ScrollMagicPluginGsap(ScrollMagic, gsap)
+
+class ScrollController {
+  /**
+  * @constructor
+  **/
+  constructor() {
+    this.controller = null
+  }
+  // Build ScrollMagic Controller
+  _build() {
+    this.destroy()
+    this.controller = new ScrollMagic.Controller({
+      loglevel: 0
+    }) 
+  }
+  get() {
+    if (!this.controller) {
+      this._build()
+    }
+    return this.controller
+  }
+  destroy() {
+    if (this.controller) {
+      this.controller.destroy()
+      this.controller = null
+    }
+  }
+  refresh(immediately = false) {
+    if (this.controller) {
+      this.controller.update(immediately)
+    } else {
+      console.warn("Can't refresh ScrollMagic.Controller. Controller was not build")
+    }
+  }
+}
+const scrollController = new ScrollController();
+export default scrollController;

package/scripts/showup/ShowUp.js

@@ -0,0 +1,126 @@
+// # configure scroll magic and gsap
+import ScrollMagic from 'scrollmagic'
+import { TweenMax } from 'gsap'
+import scrollController from './ScrollController'
+import { parseProps, getWebflowProps, getParallaxProps } from './../lib/dataTweenParser'
+import { getScrollMagicSceneProps } from './../lib/dataScrollMagicParser'
+
+const DATA_ATTR_WEBFLOW = "webflow"
+const DATA_ATTR_SETUP = "webset"
+const DATA_ATTR_PARALLAX = "webpara"
+
+class ShowUp {
+  /**
+  * @constructor
+  **/
+  constructor() {
+    this.scenes = []
+  }
+  /**
+   * Init all scenes
+   */
+  init() {
+    this.buildWebflowScenes()
+    this.buildParallaxScenes()
+    this.addEventListeners()
+  }
+  /**
+   * Add event listeners
+   */
+  addEventListeners() {
+    $(document).on('DOMContentLoaded load', $.proxy(this.onWindowUpdate, this))
+    $(window).on('resize', $.proxy(this.onWindowUpdate, this))
+  }
+  /**
+   * Remove event listeners
+   */
+  removeEventListeners() {
+    $(document).off('DOMContentLoaded load', $.proxy(this.onWindowUpdate, this));
+    $(window).off('resize', $.proxy(this.onWindowUpdate, this));
+  }
+  onWindowUpdate(e) {
+    if (this.scenes.length > 0) {
+      scrollController.refresh()
+    }
+  }
+  /**
+   * Bild scenes for data-webflow elements
+   */
+  buildWebflowScenes() {
+    const list = [...document.querySelectorAll('*[data-' + DATA_ATTR_WEBFLOW + ']')]
+    list.forEach(this.buildWebflowScene.bind(this))
+  }
+  /**
+   * Build scene
+   * @param {DOM} el 
+   * @param {Int} index 
+   */
+  buildWebflowScene(el, index) {
+    const wfp = getWebflowProps(el.dataset[DATA_ATTR_WEBFLOW])
+    const setup = parseProps(el.dataset[DATA_ATTR_SETUP])
+    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.addTo(scrollController.get())
+      this.scenes.push(scene)
+    }
+  }
+  /**
+   * Build Parallax scenes
+   */
+  buildParallaxScenes() {
+    const list = [...document.querySelectorAll('*[data-' + DATA_ATTR_PARALLAX + ']')]
+    list.forEach(this.buildParallaxScene.bind(this))
+  }
+  buildParallaxScene(el, index) {
+    const pp = getParallaxProps(el.dataset[DATA_ATTR_PARALLAX])
+    const setup = parseProps(el.dataset[DATA_ATTR_SETUP])
+    if (pp) {
+      const smsp = getScrollMagicSceneProps(el, setup)
+      const scene = new ScrollMagic.Scene(smsp)
+      scene.setTween(TweenMax.to(el, 1, pp.parallax.tween))
+      scene.addTo(scrollController.get())
+      this.scenes.push(scene)
+    }
+  }
+  /**
+   * Hide webflow elements
+   */
+  hide() {
+    const list = [...document.querySelectorAll('*[data-' + DATA_ATTR_WEBFLOW + ']')]
+    list.forEach(this.hideWebflowElement.bind(this))
+  }
+  /**
+   * Hide element
+   * @param {DOM} el 
+   * @param {Int} index 
+   */
+  hideWebflowElement(el, index) {
+    const wfp = getWebflowProps(el.dataset[DATA_ATTR_WEBFLOW])
+    if (wfp.hide) {
+      TweenMax.to(el, wfp.hide.time, wfp.hide.tween)
+    }
+  }
+  /**
+   * Destroy all scenes
+   */
+  destroy() {
+    this.removeEventListeners()
+    this.scenes.forEach((scene) => {
+      scene.destroy()
+      scene = null
+    })
+    this.scenes = []
+  }
+  /**
+   * Rebuild / refresh
+   */
+  rebuild() {
+    this.destroy()
+    this.init()
+  }
+  
+}
+const showUp = new ShowUp();
+export default showUp;