asdf

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

Hide file tree

Showing 2 changed files with 15 additions and 9 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.35s linear;
+  transition: opacity 0.5s linear;
 }
 
 @supports (prefers-reduced-motion: reduce) {
@@ -251,7 +251,7 @@
   background-color: var(--surface-light);
   border-radius: var(--radius);
   opacity: 0;
-  transition: opacity 0.35s linear;
+  transition: opacity 0.5s linear;
 }
 
 @media (--tablet) {
@@ -287,4 +287,5 @@
 
 .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,18 +34,23 @@ function animateOnScroll() {
         const el = entry.target;
         const ratio = entry.intersectionRatio;
 
-        if (ratio > 0.5) {
-          // remove from observation
-          el.classList.add('sm-observed');
-          observer.unobserve(el);
-        }
+        // if (ratio > 0.5) {
+        //   // remove from observation
+
+        //   el.classList.add('sm-observed');
+        //   observer.unobserve(el);
+        // }
 
         const calculatedRatio = (num) => {
-          if (num < 0.25) {
+          if (num < 0.2) {
             return 0;
           }
 
-          return 1;
+          if (num >= 0.4) {
+            return 1;
+          }
+
+          return ratio;
         };
         el.style.opacity = calculatedRatio(ratio);
       });