add scroll animation to image banner and image with text (#2362)

* add animation to Image banner and Image with text
Shopify · Mar 30, 2023 · 5244e8f · 5244e8f
1 parent cb58ed2
commit 5244e8f
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
@@ -452,3 +452,17 @@
     color: currentColor;
   }
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  .banner.scroll-trigger,
+  .banner.scroll-trigger:after,
+  .banner__media.scroll-trigger {
+    opacity: 0;
+    transition: opacity var(--duration-extra-long) ease-out;
+  }
+
+  .banner.scroll-trigger--active,
+  .banner__media.scroll-trigger--active {
+    opacity: 1;
+  }
+}