Merge branch 'main' into grid-image-blurry-fix (#2545)

* [Motion] Use rootMargin instread of threshold to trigger slide in animations (#2517) * Use rootMargin instread of threshold to trigger slide in animations * address review comment, remove threshold * Add conditional around data-cascade attribute (#2532) * [Motion] No animation on added/edited section (#2502) --------- Co-authored-by: Ludo <ludo.segura@shopify.com>
Shopify · Apr 19, 2023 · ea3fc19 · ea3fc19
1 parent 8db58fd
commit ea3fc19
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 20 deletions.
diff --git a/assets/animations.js b/assets/animations.js
@@ -13,16 +13,26 @@ function onIntersection(elements, observer) {
   });
 }
 
-function initializeScrollAnimationTrigger(rootEl = document) {
+function initializeScrollAnimationTrigger(rootEl = document, isDesignModeEvent = false) {
   const animationTriggerElements = Array.from(rootEl.getElementsByClassName(SCROLL_ANIMATION_TRIGGER_CLASSNAME));
   if (animationTriggerElements.length === 0) return;
 
+  if (isDesignModeEvent) {
+    animationTriggerElements.forEach((element) => {
+      element.classList.add('scroll-trigger--design-mode');
+    });
+    return;
+  }
+
   const observer = new IntersectionObserver(onIntersection, {
-    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px',
   });
   animationTriggerElements.forEach((element) => observer.observe(element));
 }
 
 window.addEventListener('DOMContentLoaded', () => initializeScrollAnimationTrigger());
 
-document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target));
+if (Shopify.designMode) {
+  document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target, true));
+  document.addEventListener('shopify:section:reorder', () => initializeScrollAnimationTrigger(document, true));
+}
diff --git a/assets/base.css b/assets/base.css
@@ -746,7 +746,7 @@ details > * {
   --duration-default: 200ms;
   --duration-long: 500ms;
   --duration-extra-long: 600ms;
-  --animation-slide-in: slideIn var(--duration-extra-long) cubic-bezier(0,0,.3,1) forwards;
+  --animation-slide-in: slideIn var(--duration-extra-long) cubic-bezier(0, 0, 0.3, 1) forwards;
 }
 
 .underlined-link,
@@ -3292,6 +3292,14 @@ details-disclosure > details {
     animation-delay: calc(var(--animation-order) * 75ms);
   }
 
+  .scroll-trigger--design-mode.animate--fade-in,
+  .scroll-trigger--design-mode.animate--slide-in,
+  .scroll-trigger--design-mode .slider {
+    opacity: 1;
+    animation: none;
+    transition: none;
+  }
+
   /* Turn off animations if JS is turned off. */
   .no-js .scroll-trigger.animate--fade-in,
   .no-js .scroll-trigger.animate--slide-in {

diff --git a/sections/collage.liquid b/sections/collage.liquid
@@ -28,7 +28,9 @@
         <div
           class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
           {{ block.shopify_attributes }}
-          {% if settings.animations_reveal_on_scroll %}data-cascade{% endif %}
+          {% if settings.animations_reveal_on_scroll %}
+            data-cascade
+          {% endif %}
         >
           {%- case block.type -%}
             {%- when 'image' -%}

diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
@@ -52,7 +52,9 @@
   <div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
     <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
       {%- if section.settings.title != blank -%}
-        <h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">{{ section.settings.title }}</h2>
+        <h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
+          {{ section.settings.title }}
+        </h2>
       {%- endif -%}
       {%- if section.settings.description != blank
         or section.settings.show_description
@@ -79,7 +81,9 @@
           <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 %} scroll-trigger animate--slide-in{% endif %}"
-            data-cascade
+            {% if settings.animations_reveal_on_scroll %}
+              data-cascade
+            {% endif %}
           >
             {% render 'card-product',
               columns_desktop: section.settings.columns_desktop,
@@ -96,7 +100,12 @@
           </li>
         {%- else -%}
           {%- for i in (1..4) -%}
-            <li class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" data-cascade>
+            <li
+              class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+              {% if settings.animations_reveal_on_scroll %}
+                data-cascade
+              {% endif %}
+            >
               {% render 'card-product', show_vendor: section.settings.show_vendor %}
             </li>
           {%- endfor -%}

diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
@@ -121,7 +121,13 @@
         </aside>
       {%- endif -%}
 
-      <div class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" id="ProductGridContainer" data-cascade>
+      <div
+        class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+        id="ProductGridContainer"
+        {% if settings.animations_reveal_on_scroll %}
+          data-cascade
+        {% endif %}
+      >
         {%- if collection.products.size == 0 -%}
           <div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
             <div class="loading-overlay gradient"></div>
@@ -153,7 +159,12 @@
                 {%- if forloop.index > 2 -%}
                   {%- assign lazy_load = true -%}
                 {%- endif -%}
-                <li class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" data-cascade>
+                <li
+                  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+                  {% if settings.animations_reveal_on_scroll %}
+                    data-cascade
+                  {% endif %}
+                >
                   {% render 'card-product',
                     columns_desktop: section.settings.columns_desktop,
                     columns_mobile: section.settings.columns_mobile,

diff --git a/sections/multicolumn.liquid b/sections/multicolumn.liquid
@@ -24,7 +24,12 @@
 -%}
 
 <div class="multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">
-  <div class="page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" data-cascade>
+  <div
+    class="page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+    {% if settings.animations_reveal_on_scroll %}
+      data-cascade
+    {% endif %}
+  >
     {%- unless section.settings.title == blank -%}
       <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
         <h2 class="title inline-richtext {{ section.settings.heading_size }}">
@@ -65,7 +70,9 @@
             id="Slide-{{ section.id }}-{{ forloop.index }}"
             class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
             {{ block.shopify_attributes }}
-            data-cascade
+            {% if settings.animations_reveal_on_scroll %}
+              data-cascade
+            {% endif %}
           >
             <div class="multicolumn-card content-container">
               {%- if block.settings.image != blank -%}

diff --git a/sections/newsletter.liquid b/sections/newsletter.liquid
@@ -22,17 +22,35 @@
         {%- when '@app' -%}
           {% render block %}
         {%- when 'heading' -%}
-          <h2 class="inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {{ block.shopify_attributes }}
-          data-cascade>
+          <h2
+            class="inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+            {{ block.shopify_attributes }}
+            {% if settings.animations_reveal_on_scroll %}
+              data-cascade
+            {% endif %}
+          >
             {{ block.settings.heading }}
           </h2>
         {%- when 'paragraph' -%}
-          <div class="newsletter__subheading rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {{ block.shopify_attributes }} data-cascade>{{ block.settings.text }}</div>
+          <div
+            class="newsletter__subheading rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+            {{ block.shopify_attributes }}
+            {% if settings.animations_reveal_on_scroll %}
+              data-cascade
+            {% endif %}
+          >
+            {{ block.settings.text }}
+          </div>
         {%- when 'email_form' -%}
           <div {{ block.shopify_attributes }}>
             {% form 'customer', class: 'newsletter-form' %}
               <input type="hidden" name="contact[tags]" value="newsletter">
-              <div class="newsletter-form__field-wrapper{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" data-cascade>
+              <div
+                class="newsletter-form__field-wrapper{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+                {% if settings.animations_reveal_on_scroll %}
+                  data-cascade
+                {% endif %}
+              >
                 <div class="field">
                   <input
                     id="NewsletterForm--{{ section.id }}"

diff --git a/sections/rich-text.liquid b/sections/rich-text.liquid
@@ -24,27 +24,39 @@
               <h2
                 class="rich-text__heading rte inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                 {{ block.shopify_attributes }}
-                data-cascade
+                {% if settings.animations_reveal_on_scroll %}
+                  data-cascade
+                {% endif %}
               >
                 {{ block.settings.heading }}
               </h2>
             {%- when 'caption' -%}
               <p
                 class="rich-text__caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                 {{ block.shopify_attributes }}
-                data-cascade
+                {% if settings.animations_reveal_on_scroll %}
+                  data-cascade
+                {% endif %}
               >
                 {{ block.settings.caption | escape }}
               </p>
             {%- when 'text' -%}
-              <div class="rich-text__text rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {{ block.shopify_attributes }} data-cascade>
+              <div
+                class="rich-text__text rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+                {{ block.shopify_attributes }}
+                {% if settings.animations_reveal_on_scroll %}
+                  data-cascade
+                {% endif %}
+              >
                 {{ block.settings.text }}
               </div>
             {%- when 'button' -%}
               <div
                 class="rich-text__buttons{% if block.settings.button_label != blank and block.settings.button_label_2 != blank %} rich-text__buttons--multiple{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                 {{ block.shopify_attributes }}
-                data-cascade
+                {% if settings.animations_reveal_on_scroll %}
+                  data-cascade
+                {% endif %}
               >
                 {%- if block.settings.button_label != blank -%}
                   <a