@teleporthq/react-components - npm Package Compare versions

Comparing version 1.0.7-alpha-8 to 1.0.7-alpha-9

dist/animate-on-reveal.umd.js

@@ -13,5 +13,5 @@ (function(global, factory) {
             if (entry.isIntersecting) {
-              this.setAttribute("revealed", "");
+              this.firstChildReveal(true);
             } else {
-              this.removeAttribute("revealed");
+              this.firstChildReveal(false);
             }
@@ -22,2 +22,3 @@ });
       );
+      this.style.display = "contents";
     }
@@ -33,3 +34,2 @@ static registerSelf() {
     connectedCallback() {
-      this.style.animationPlayState = "paused";
       this.intersectionObserver.observe(this);
@@ -41,39 +41,39 @@ }
     attributeChangedCallback(name, oldValue, newValue) {
+      const firstChild = this.firstElementChild;
       switch (name) {
         case "animation":
-          if (this.getAttribute(name)) {
-            this.style.animationName = this.getAttribute("animation");
+          if (newValue) {
+            firstChild.style.animationName = newValue;
           }
           break;
         case "duration":
-          this.style.animationDuration = this.getAttribute(name) || "0s";
+          firstChild.style.animationDuration = newValue || "0s";
           break;
         case "delay":
-          this.style.animationDelay = this.getAttribute(name) || "0s";
+          firstChild.style.animationDelay = newValue || "0s";
           break;
         case "easing":
-          this.style.animationTimingFunction = this.getAttribute(name) || "ease";
+          firstChild.style.animationTimingFunction = newValue || "ease";
           break;
         case "iteration":
-          this.style.animationIterationCount = this.getAttribute(name) || "1";
+          firstChild.style.animationIterationCount = newValue || "1";
           break;
         case "direction":
-          this.style.animationDirection = this.getAttribute(name) || "normal";
+          firstChild.style.animationDirection = newValue || "normal";
           break;
         case "revealed":
-          this.style.animationPlayState = this.hasAttribute("revealed") ? "running" : "paused";
+          firstChild.style.animationPlayState = newValue ? "running" : "paused";
           break;
-        case "classname":
-          if (oldValue) {
-            this.classList.remove(oldValue);
-          }
-          if (newValue) {
-            const classNames = newValue.split(" ");
-            classNames.forEach((className) => {
-              this.classList.add(className);
-            });
-          }
-          break;
       }
     }
+    firstChildReveal(revealed) {
+      const firstChild = this.firstElementChild;
+      if (firstChild) {
+        if (revealed) {
+          firstChild.setAttribute("revealed", "");
+        } else {
+          firstChild.removeAttribute("revealed");
+        }
+      }
+    }
   };
@@ -80,0 +80,0 @@ _AnimateOnElementReveal.observedAttributes = [

dist/react-components.js

@@ -133,5 +133,5 @@ import dayjs from 'dayjs';
           if (entry.isIntersecting) {
-            this.setAttribute("revealed", "");
+            this.firstChildReveal(true);
           } else {
-            this.removeAttribute("revealed");
+            this.firstChildReveal(false);
           }
@@ -142,2 +142,3 @@ });
     );
+    this.style.display = "contents";
   }
@@ -153,3 +154,2 @@ static registerSelf() {
   connectedCallback() {
-    this.style.animationPlayState = "paused";
     this.intersectionObserver.observe(this);
@@ -161,39 +161,39 @@ }
   attributeChangedCallback(name, oldValue, newValue) {
+    const firstChild = this.firstElementChild;
     switch (name) {
       case "animation":
-        if (this.getAttribute(name)) {
-          this.style.animationName = this.getAttribute("animation");
+        if (newValue) {
+          firstChild.style.animationName = newValue;
         }
         break;
       case "duration":
-        this.style.animationDuration = this.getAttribute(name) || "0s";
+        firstChild.style.animationDuration = newValue || "0s";
         break;
       case "delay":
-        this.style.animationDelay = this.getAttribute(name) || "0s";
+        firstChild.style.animationDelay = newValue || "0s";
         break;
       case "easing":
-        this.style.animationTimingFunction = this.getAttribute(name) || "ease";
+        firstChild.style.animationTimingFunction = newValue || "ease";
         break;
       case "iteration":
-        this.style.animationIterationCount = this.getAttribute(name) || "1";
+        firstChild.style.animationIterationCount = newValue || "1";
         break;
       case "direction":
-        this.style.animationDirection = this.getAttribute(name) || "normal";
+        firstChild.style.animationDirection = newValue || "normal";
         break;
       case "revealed":
-        this.style.animationPlayState = this.hasAttribute("revealed") ? "running" : "paused";
+        firstChild.style.animationPlayState = newValue ? "running" : "paused";
         break;
-      case "classname":
-        if (oldValue) {
-          this.classList.remove(oldValue);
-        }
-        if (newValue) {
-          const classNames = newValue.split(" ");
-          classNames.forEach((className) => {
-            this.classList.add(className);
-          });
-        }
-        break;
     }
   }
+  firstChildReveal(revealed) {
+    const firstChild = this.firstElementChild;
+    if (firstChild) {
+      if (revealed) {
+        firstChild.setAttribute("revealed", "");
+      } else {
+        firstChild.removeAttribute("revealed");
+      }
+    }
+  }
 };
@@ -200,0 +200,0 @@ _AnimateOnElementReveal.observedAttributes = [

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

37904

decreased by-0.95%

Lines of code

1108

decreased by-0.18%

No dependency changes