use CSS to turn cascading animation off

Shopify · Mar 24, 2023 · 87853d2 · 87853d2
1 parent a56a804
commit 87853d2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 39 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -1135,6 +1135,11 @@ summary::-webkit-details-marker {
     box-sizing: content-box;
     margin: 0;
   }
+
+  .slider--tablet .scroll-trigger.animate--slide-in {
+    animation: none;
+    opacity: 1;
+  }
 }
 
 @media screen and (min-width: 990px) {
@@ -1162,6 +1167,11 @@ summary::-webkit-details-marker {
     width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
     max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
   }
+
+  .slider--desktop .scroll-trigger.animate--slide-in{
+    animation: none;
+    opacity: 1;
+  }
 }
 
 @media screen and (min-width: 990px) {
@@ -3167,21 +3177,11 @@ details-disclosure > details {
     height: 100%;
   }
 
-  @media screen and (max-width: 749px) {
-    .scroll-trigger--active.animate--mobile-cascade-off,
-    .scroll-trigger.animate--slide-in.animate--mobile-cascade-off {
-      opacity: 1;
-      animation: none;
-    }
-
-    .scroll-trigger.animate--mobile-cascade-on {
-      opacity: 0;
-    }
-
-    .scroll-trigger--active.animate--mobile-cascade-on {
-      animation: slideIn var(--duration-extra-long) ease-out forwards;
-      animation-delay: calc(var(--animation-order) * 100ms);
-    }
+  /* Turn off animations if JS is turned off. */
+  .no-js .scroll-trigger--active.animate--fade-in,
+  .no-js .scroll-trigger--active.animate--slide-in {
+    opacity: 1;
+    animation: none;
   }
 
   @keyframes slideIn {

diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
@@ -41,26 +41,6 @@
   if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
     assign show_desktop_slider = true
   endif
-
-  assign slider_desktop_mobile_on = false
-  if show_desktop_slider and show_mobile_slider
-    assign slider_desktop_mobile_on = true
-  endif
-
-  assign slider_desktop_on_mobile_off = false
-  if show_desktop_slider and show_mobile_slider == false
-    assign slider_desktop_on_mobile_off = true
-  endif
-
-  assign slider_desktop_off_mobile_on = false
-  if show_desktop_slider == false and show_mobile_slider
-    assign slider_desktop_off_mobile_on = true
-  endif
-
-  assign slider_desktop_mobile_off = false
-  if show_desktop_slider == false and show_mobile_slider == false
-    assign slider_desktop_mobile_off = true
-  endif
 -%}
 
 <div class="color-{{ section.settings.color_scheme }} isolate gradient">
@@ -83,7 +63,7 @@
       {%- endif -%}
     </div>
 
-    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% if section.settings.columns_mobile == "1" and show_mobile_slider == false %} animate--mobile-cascade-off{% endif %}{% endif %}">
+    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
       <ul
         id="Slider-{{ section.id }}"
         class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
@@ -93,8 +73,8 @@
         {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
           <li
             id="Slide-{{ section.id }}-{{ forloop.index }}"
-            class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %}{% if slider_desktop_off_mobile_on or slider_desktop_mobile_off %} scroll-trigger animate--slide-in{% endif %}{% if slider_desktop_on_mobile_off %} scroll-trigger animate--mobile-cascade-on{% endif %}{% if slider_desktop_off_mobile_on %} scroll-trigger animate--mobile-cascade-off{% endif %}{% endif %}"
-            {% unless slider_desktop_mobile_on %}data-cascade{% endunless %}
+            class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+            data-cascade
           >
             {% render 'card-product',
               card_product: product,
@@ -108,7 +88,7 @@
           </li>
         {%- else -%}
           {%- for i in (1..4) -%}
-            <li class="grid__item{% if settings.animations_reveal_on_scroll %}{% if slider_desktop_off_mobile_on or slider_desktop_mobile_off %} scroll-trigger animate--slide-in{% endif %}{% if slider_desktop_on_mobile_off %} scroll-trigger animate--mobile-cascade-on{% endif %}{% if slider_desktop_off_mobile_on %} scroll-trigger animate--mobile-cascade-off{% endif %}{% endif %}" {% unless slider_desktop_mobile_on %}data-cascade{% endunless %}>
+            <li class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" data-cascade>
               {% render 'card-product', show_vendor: section.settings.show_vendor %}
             </li>
           {%- endfor -%}