Add Scroll-driven appearing to articles

MeFoDy · Feb 7, 2024 · bff6820 · bff6820
1 parent 9cd4554
commit bff6820
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -13,7 +13,8 @@
       true,
       {
         "ignoreProperties": [
-          "print-color-adjust"
+          "print-color-adjust",
+          "animation-timeline"
         ]
       }
     ],

diff --git a/src/styles/blocks/collection.css b/src/styles/blocks/collection.css
@@ -90,3 +90,24 @@ h2.collection__item-title {
         margin-top: 1em;
     }
 }
+
+@supports (view-timeline: --works) {
+    .collection__item {
+        view-timeline-axis: block;
+        view-timeline-name: --collection-item-in-view;
+        animation: linear scroll-appear both;
+        animation-duration: auto;
+        animation-timeline: --collection-item-in-view;
+        animation-range: contain 0% contain 40%;
+    }
+
+    @keyframes scroll-appear {
+        0% {
+            opacity: 0.2;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}