@teleporthq/react-components - npm Package Compare versions

Comparing version 1.0.7-alpha-10 to 1.0.7-alpha-11

dist/animate-on-reveal.umd.js

@@ -13,5 +13,5 @@ (function(global, factory) {
             if (entry.isIntersecting) {
-              this.firstChildReveal(true);
+              this.setAttribute("revealed", "");
             } else {
-              this.firstChildReveal(false);
+              this.removeAttribute("revealed");
             }
@@ -33,3 +33,7 @@ });
     connectedCallback() {
-      this.intersectionObserver.observe(this);
+      const firstChild = this.firstElementChild;
+      if (firstChild) {
+        firstChild.style.animationPlayState = "paused";
+      }
+      this.intersectionObserver.observe(this.firstElementChild);
     }
@@ -39,40 +43,30 @@ disconnectedCallback() {
     }
-    attributeChangedCallback(name, oldValue, newValue) {
+    attributeChangedCallback(name) {
       const firstChild = this.firstElementChild;
       switch (name) {
         case "animation":
-          if (newValue) {
-            firstChild.style.animationName = newValue;
+          if (this.getAttribute(name)) {
+            firstChild.style.animationName = this.getAttribute("animation");
           }
           break;
         case "duration":
-          firstChild.style.animationDuration = newValue || "0s";
+          firstChild.style.animationDuration = this.getAttribute(name) || "0s";
           break;
         case "delay":
-          firstChild.style.animationDelay = newValue || "0s";
+          firstChild.style.animationDelay = this.getAttribute(name) || "0s";
           break;
         case "easing":
-          firstChild.style.animationTimingFunction = newValue || "ease";
+          firstChild.style.animationTimingFunction = this.getAttribute(name) || "ease";
           break;
         case "iteration":
-          firstChild.style.animationIterationCount = newValue || "1";
+          firstChild.style.animationIterationCount = this.getAttribute(name) || "1";
           break;
         case "direction":
-          firstChild.style.animationDirection = newValue || "normal";
+          firstChild.style.animationDirection = this.getAttribute(name) || "normal";
           break;
         case "revealed":
-          firstChild.style.animationPlayState = newValue ? "running" : "paused";
+          firstChild.style.animationPlayState = this.hasAttribute("revealed") ? "running" : "paused";
           break;
       }
     }
-    firstChildReveal(revealed) {
-      const firstChild = this.firstElementChild;
-      if (firstChild) {
-        if (revealed) {
-          firstChild.setAttribute("revealed", "");
-        } else {
-          firstChild.removeAttribute("revealed");
-        }
-      }
-    }
   };
@@ -79,0 +73,0 @@ _AnimateOnElementReveal.observedAttributes = [

dist/react-components.js

@@ -135,5 +135,5 @@ import dayjs from 'dayjs';
           if (entry.isIntersecting) {
-            this.firstChildReveal(true);
+            this.setAttribute("revealed", "");
           } else {
-            this.firstChildReveal(false);
+            this.removeAttribute("revealed");
           }
@@ -155,3 +155,7 @@ });
   connectedCallback() {
-    this.intersectionObserver.observe(this);
+    const firstChild = this.firstElementChild;
+    if (firstChild) {
+      firstChild.style.animationPlayState = "paused";
+    }
+    this.intersectionObserver.observe(this.firstElementChild);
   }
@@ -161,40 +165,30 @@ disconnectedCallback() {
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(name) {
     const firstChild = this.firstElementChild;
     switch (name) {
       case "animation":
-        if (newValue) {
-          firstChild.style.animationName = newValue;
+        if (this.getAttribute(name)) {
+          firstChild.style.animationName = this.getAttribute("animation");
         }
         break;
       case "duration":
-        firstChild.style.animationDuration = newValue || "0s";
+        firstChild.style.animationDuration = this.getAttribute(name) || "0s";
         break;
       case "delay":
-        firstChild.style.animationDelay = newValue || "0s";
+        firstChild.style.animationDelay = this.getAttribute(name) || "0s";
         break;
       case "easing":
-        firstChild.style.animationTimingFunction = newValue || "ease";
+        firstChild.style.animationTimingFunction = this.getAttribute(name) || "ease";
         break;
       case "iteration":
-        firstChild.style.animationIterationCount = newValue || "1";
+        firstChild.style.animationIterationCount = this.getAttribute(name) || "1";
         break;
       case "direction":
-        firstChild.style.animationDirection = newValue || "normal";
+        firstChild.style.animationDirection = this.getAttribute(name) || "normal";
         break;
       case "revealed":
-        firstChild.style.animationPlayState = newValue ? "running" : "paused";
+        firstChild.style.animationPlayState = this.hasAttribute("revealed") ? "running" : "paused";
         break;
     }
   }
-  firstChildReveal(revealed) {
-    const firstChild = this.firstElementChild;
-    if (firstChild) {
-      if (revealed) {
-        firstChild.setAttribute("revealed", "");
-      } else {
-        firstChild.removeAttribute("revealed");
-      }
-    }
-  }
 };
@@ -201,0 +195,0 @@ _AnimateOnElementReveal.observedAttributes = [

package.json

 {
   "name": "@teleporthq/react-components",
-  "version": "1.0.7-alpha-10",
+  "version": "1.0.7-alpha-11",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/react-components.js",

No alert changes

Worsened metrics

Total package byte prevSize

38045

decreased by-0.14%

Lines of code

1094

decreased by-2.06%

No dependency changes