remove element from observation after anim

royalfig · Jul 10, 2023 · b48bfb6 · b48bfb6
1 parent cf6e2fc
commit b48bfb6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/assets/css/components/card.css b/assets/css/components/card.css
@@ -8,7 +8,7 @@
   color: #fff;
   border-radius: var(--radius);
   opacity: 0;
-  transition: opacity 0.5s linear;
+  transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 @supports (prefers-reduced-motion: reduce) {
@@ -251,7 +251,7 @@
   background-color: var(--surface-light);
   border-radius: var(--radius);
   opacity: 0;
-  transition: opacity 0.5s linear;
+  transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 @media (--tablet) {
@@ -284,8 +284,3 @@
     grid-column: span 12;
   }
 }
-
-.sm-observed {
-  opacity: 1;
-  transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
diff --git a/assets/js/app/app.js b/assets/js/app/app.js
@@ -34,12 +34,13 @@ function animateOnScroll() {
         const el = entry.target;
         const ratio = entry.intersectionRatio;
 
-        // if (ratio > 0.5) {
-        //   // remove from observation
+        if (ratio > 0.4) {
+          // remove from observation
 
-        //   el.classList.add('sm-observed');
-        //   observer.unobserve(el);
-        // }
+          el.style.opacity = 1;
+          observer.unobserve(el);
+          return;
+        }
 
         const calculatedRatio = (num) => {
           if (num < 0.2) {