rytm-webflow 2.1.7 → 2.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rytm-webflow",
-  "version": "2.1.7",
+  "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";
@@ -216,9 +217,7 @@ class WebflowView extends View {
       });
       // on scene add event
       scene.on("add", (e) => {
-        // check if element is already in view
-        const rect = el.getBoundingClientRect();
-        if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
+        if (elementIsVisibleInViewport(el, true)) {
           // element is in view - animate IN
           gsap.to(el, {
             duration: propsShow.time, 

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;
+}