rytm-webflow 2.1.7 → 2.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rytm-webflow",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "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,18 +217,21 @@ 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) {
+        // wait 10ms before checking if element is in view
+        // due to asap scroll position reset
+        setTimeout(() => {
           // element is in view - animate IN
-          gsap.to(el, {
-            duration: propsShow.time, 
-            ...propsShow.tween, 
-            onComplete: () => {
-              el.classList.add(CLASS_NAME_WEBSCROLL_FIRED);
-            }
-          });
-        }
+          if (elementIsVisibleInViewport(el, true)) {
+            console.log("Timeout", el);
+            gsap.to(el, {
+              duration: propsShow.time, 
+              ...propsShow.tween, 
+              onComplete: () => {
+                el.classList.add(CLASS_NAME_WEBSCROLL_FIRED);
+              }
+            });
+          }
+        }, 10);
       });
       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;
+}