@builder.io/sdk - npm Package Compare versions

Comparing version 0.0.133 to 0.0.134

dist/index.cjs.js

@@ -627,9 +627,11 @@ 'use strict';
         }
+        var triggered = false;
         // TODO: roll all of these in one for more efficiency of checking all the rects
         var onScroll = throttle(function () {
-            if (isScrolledIntoView(element)) {
+            if (!triggered && isScrolledIntoView(element)) {
+                triggered = true;
                 Object.assign(element.style, animation.steps[1].styles);
                 document.removeEventListener('scroll', onScroll);
             }
-        }, 100);
+        }, 100, { leading: false });
         // TODO: fully in view or partially
@@ -639,3 +641,5 @@ function isScrolledIntoView(elem) {
             // TODO: partial in view? or what if element is larger than screen itself
-            return rect.top > 0 && rect.bottom < window.innerHeight;
+            return ((rect.top > 0 && rect.bottom < window.innerHeight) || // element fits within the screen and is fully on screen (not hanging off at all)
+                (rect.top < 0 && rect.bottom > window.innerHeight) // element is larger than the screen and hangs over the top and bottom
+            );
         }
@@ -642,0 +646,0 @@ var defaultState = animation.steps[0].styles;

dist/index.esm.js

@@ -621,9 +621,11 @@ import uniqueSelector from 'unique-selector';
         }
+        var triggered = false;
         // TODO: roll all of these in one for more efficiency of checking all the rects
         var onScroll = throttle(function () {
-            if (isScrolledIntoView(element)) {
+            if (!triggered && isScrolledIntoView(element)) {
+                triggered = true;
                 Object.assign(element.style, animation.steps[1].styles);
                 document.removeEventListener('scroll', onScroll);
             }
-        }, 100);
+        }, 100, { leading: false });
         // TODO: fully in view or partially
@@ -633,3 +635,5 @@ function isScrolledIntoView(elem) {
             // TODO: partial in view? or what if element is larger than screen itself
-            return rect.top > 0 && rect.bottom < window.innerHeight;
+            return ((rect.top > 0 && rect.bottom < window.innerHeight) || // element fits within the screen and is fully on screen (not hanging off at all)
+                (rect.top < 0 && rect.bottom > window.innerHeight) // element is larger than the screen and hangs over the top and bottom
+            );
         }
@@ -636,0 +640,0 @@ var defaultState = animation.steps[0].styles;

package.json

 {
   "name": "@builder.io/sdk",
-  "version": "0.0.133",
+  "version": "0.0.134",
   "browser": "./dist/index.umd.min.js",
@@ -5,0 +5,0 @@ "main": "./dist/index.cjs.js",

No alert changes

Improved metrics

Total package byte prevSize

1088118

increased by0.13%

Lines of code

15038

increased by0.09%

No dependency changes