rytm-webflow 2.1.6 → 2.1.8

package/package.json

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

package/scripts/aswap/WebflowView.js

@@ -4,6 +4,7 @@ import View from './View';
 import scrollController from './../showup/ScrollController';
 import { getWebflowAnimationProps, parseProps } from './../lib/dataTweenParser';
 import { getScrollMagicSceneProps } from './../lib/dataScrollMagicParser';
+import { elementIsVisibleInViewport } from '../lib/helpers'
 
 // data-webview-... (aswap show / hide)
 const DATA_ATTR_WEBVIEW_INIT = "webview-initial";
@@ -214,6 +215,19 @@ class WebflowView extends View {
           });
         }
       });
+      // on scene add event
+      scene.on("add", (e) => {
+        if (elementIsVisibleInViewport(el, true)) {
+          // element is in view - animate IN
+          gsap.to(el, {
+            duration: propsShow.time, 
+            ...propsShow.tween, 
+            onComplete: () => {
+              el.classList.add(CLASS_NAME_WEBSCROLL_FIRED);
+            }
+          });
+        }
+      });
       scene.addTo(scrollController.get());
       this.scenes.push(scene);
     }

package/scripts/index.js

@@ -11,6 +11,7 @@ import scrollController from './showup/ScrollController'
 import showUp from './showup/ShowUp'
 import { getWebflowAnimationProps, getWebflowProps, getParallaxProps, parseProps } from './lib/dataTweenParser'
 import { getScrollMagicSceneProps } from './lib/dataScrollMagicParser'
+import { elementIsVisibleInViewport } from './lib/helpers'
 
 export default {
   aswap: aswapInstance,
@@ -29,5 +30,6 @@ export default {
   getWebflowProps,
   getParallaxProps,
   parseProps,
-  getScrollMagicSceneProps
+  getScrollMagicSceneProps,
+  elementIsVisibleInViewport,
 }

package/scripts/lib/helpers.js

@@ -0,0 +1,10 @@
+
+export const elementIsVisibleInViewport = (el, partiallyVisible = true) => {
+  const { top, left, bottom, right } = el.getBoundingClientRect();
+  const { innerHeight, innerWidth } = window;
+  return partiallyVisible
+    ? ((top > 0 && top < innerHeight) ||
+        (bottom > 0 && bottom < innerHeight)) &&
+        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
+    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
+}