From b48bfb6edb107682894fffaad99162102e75a479 Mon Sep 17 00:00:00 2001
From: Ryan Feigenbaum <ryan.feigenbaum@gmail.com>
Date: Mon, 10 Jul 2023 14:27:34 -0400
Subject: [PATCH] remove element from observation after anim

---
 assets/css/components/card.css |  9 ++-------
 assets/js/app/app.js           | 11 ++++++-----
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/assets/css/components/card.css b/assets/css/components/card.css
index d2cca57b..f0f9c520 100644
--- 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
index ddcd70af..7ded17b8 100644
--- 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) {