Try adding global scroll animations to Dawn

assets/animations.js

@@ -0,0 +1,31 @@
+const SCROLL_TRIGGER_CLASSNAME = "scroll-trigger";
+const IN_VIEW_CLASSNAME = "scrolled-into-view";
+
+const OPTIONS = {
+    threshold: 0.5,
+};
+
+function onIntersection(entries, observer) {
+    for (const entry of entries) {
+        if (entry.isIntersecting) {
+            entry.target.classList.add(IN_VIEW_CLASSNAME);
+        observer.unobserve(entry.target);
+        }
+    }
+}
+
+function initializeScrollTrigger() {
+    const scrollTriggerElements = Array.from(
+        document.getElementsByClassName(SCROLL_TRIGGER_CLASSNAME)
+    );
+
+    if (scrollTriggerElements.length === 0) {
+        return;
+    }
+
+    const observer = new IntersectionObserver(onIntersection, OPTIONS);
+
+    scrollTriggerElements.forEach((element) => observer.observe(element));
+}
+
+window.addEventListener("load", initializeScrollTrigger);

assets/base.css

@@ -2993,3 +2993,134 @@ details-disclosure > details {
     outline: transparent solid 1px;
   }
 }
+
+/* Animations */
+
+.scroll-trigger {
+  transition: opacity 0.55s ease-in-out;
+  opacity: 0;
+}
+
+.scrolled-into-view {
+  animation: 0.55s ease-in-out slideIn forwards;
+}
+
+.grid__item:nth-child(2n).scrolled-into-view,
+.grid__item:nth-child(2n) .scrolled-into-view,
+.collage__item:nth-child(2n) .scrolled-into-view {
+  animation-delay: 0.1s;
+}
+
+@media screen and (min-width: 990px) {
+  .grid--3-col-desktop .grid__item:nth-child(3n + 1).scrolled-into-view,
+  .grid--3-col-desktop .grid__item:nth-child(3n + 1) .scrolled-into-view,
+  .grid--3-col-desktop .collage__item:nth-child(3n + 1) .scrolled-into-view {
+    animation-delay: 0.1s;
+  }
+
+  .grid--3-col-desktop .grid__item:nth-child(3n + 2).scrolled-into-view,
+  .grid--3-col-desktop .grid__item:nth-child(n + 2) .scrolled-into-view,
+  .grid--3-col-desktop .collage__item:nth-child(3n + 2) .scrolled-into-view {
+    animation-delay: 0.2s;
+  }
+
+  .grid--3-col-desktop .grid__item:nth-child(3n + 3).scrolled-into-view,
+  .grid--3-col-desktop .grid__item:nth-child(3n + 3) .scrolled-into-view,
+  .grid--3-col-desktop .collage__item:nth-child(3n + 3) .scrolled-into-view {
+    animation-delay: 0.3s;
+  }
+
+  .grid--4-col-desktop .grid__item:nth-child(4n + 1).scrolled-into-view,
+  .grid--4-col-desktop .grid__item:nth-child(4n + 1) .scrolled-into-view {
+    animation-delay: 0.1s;
+  }
+
+  .grid--4-col-desktop .grid__item:nth-child(4n + 2).scrolled-into-view,
+  .grid--4-col-desktop .grid__item:nth-child(4n + 2) .scrolled-into-view {
+    animation-delay: 0.2s;
+  }
+
+  .grid--4-col-desktop .grid__item:nth-child(4n + 3).scrolled-into-view,
+  .grid--4-col-desktop .grid__item:nth-child(4n + 3) .scrolled-into-view {
+    animation-delay: 0.3s;
+  }
+
+  .grid--4-col-desktop .grid__item:nth-child(4n + 4).scrolled-into-view,
+  .grid--4-col-desktop .grid__item:nth-child(4n + 4) .scrolled-into-view {
+    animation-delay: 0.4s;
+  }
+
+  .grid--5-col-desktop .grid__item:nth-child(5n + 1).scrolled-into-view,
+  .grid--5-col-desktop .grid__item:nth-child(4n + 1) .scrolled-into-view {
+    animation-delay: 0.1s;
+  }
+
+  .grid--5-col-desktop .grid__item:nth-child(5n + 2).scrolled-into-view,
+  .grid--5-col-desktop .grid__item:nth-child(5n + 2) .scrolled-into-view {
+    animation-delay: 0.2s;
+  }
+
+  .grid--5-col-desktop .grid__item:nth-child(5n + 3).scrolled-into-view,
+  .grid--5-col-desktop .grid__item:nth-child(5n + 3) .scrolled-into-view {
+    animation-delay: 0.3s;
+  }
+
+  .grid--5-col-desktop .grid__item:nth-child(5n + 4).scrolled-into-view,
+  .grid--5-col-desktop .grid__item:nth-child(5n + 4) .scrolled-into-view {
+    animation-delay: 0.4s;
+  }
+
+  .grid--5-col-desktop .grid__item:nth-child(5n + 5).scrolled-into-view,
+  .grid--5-col-desktop .grid__item:nth-child(5n + 5) .scrolled-into-view {
+    animation-delay: 0.5s;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(10vh);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Section-specific motion behavior. */
+
+.banner__media.scroll-trigger {
+  transition: opacity var(--duration-long) ease-in-out;
+  opacity: 0;
+}
+
+.banner__media.scrolled-into-view {
+  animation: none;
+  opacity: 1;
+}
+
+.slideshow__slide:not(:first-of-type) .banner__media.scroll-trigger {
+  opacity: 1;
+}
+
+/* Async loading prevents animation for Related Product cards. */
+.related-products .grid__item .scroll-trigger {
+  opacity: 1;
+  animation: none;
+}
+
+/* Turn off animations if JS is turned off. */
+.no-js .scroll-trigger,
+.no-js .scrolled-into-view {
+  opacity: 1;
+  animation: none;
+}
+
+/* Respect the visitor's motion preferences. */
+@media (prefers-reduced-motion) {
+  .scroll-trigger,
+  .scrolled-into-view {
+    opacity: 1;
+    animation: none;
+  }
+}

assets/global.js

@@ -190,7 +190,7 @@ class QuantityInput extends HTMLElement {
       const max = parseInt(this.input.max);
       const buttonPlus = this.querySelector(".quantity__button[name='plus']");
       buttonPlus.classList.toggle('disabled', value >= max);
-    } 
+    }
   }
 }
 
@@ -764,18 +764,21 @@ class SlideshowComponent extends SliderComponent {
   setSlideVisibility() {
     this.sliderItemsToShow.forEach((item, index) => {
       const linkElements = item.querySelectorAll('a');
+      var slideshowText = item.querySelector('.slideshow__text');
       if (index === this.currentPage - 1) {
         if (linkElements.length) linkElements.forEach(button => {
           button.removeAttribute('tabindex');
         });
         item.setAttribute('aria-hidden', 'false');
         item.removeAttribute('tabindex');
+        slideshowText.classList.add('scrolled-into-view');
       } else {
         if (linkElements.length) linkElements.forEach(button => {
           button.setAttribute('tabindex', '-1');
         });
         item.setAttribute('aria-hidden', 'true');
         item.setAttribute('tabindex', '-1');
+        slideshowText.classList.remove('scrolled-into-view');
       }
     });
   }

config/settings_schema.json

@@ -1400,6 +1400,17 @@
       }
     ]
   },
+  {
+    "name": "t:settings_schema.motion.name",
+    "settings": [
+      {
+        "type": "checkbox",
+        "id": "motion_toggle",
+        "label": "t:settings_schema.motion.settings.motion_toggle.label",
+        "default": false
+      }
+    ]
+  },
   {
     "name": "t:settings_schema.social-media.name",
     "settings": [

layout/theme.liquid

@@ -32,6 +32,9 @@
     <script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
     <script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
     <script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
+    {%- if settings.motion_toggle -%}
+      <script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>
+    {%- endif -%}
     {{ content_for_header }}
 
     {%- liquid

locales/en.default.schema.json

@@ -257,6 +257,14 @@
         }
       }
     },
+    "motion": {
+      "name": "Motion",
+      "settings": {
+        "motion_toggle": {
+          "label": "Reveal sections on scroll"
+        }
+      }
+    },
     "social-media": {
       "name": "Social media",
       "settings": {

sections/collage.liquid

@@ -21,11 +21,11 @@
 
 <div class="color-{{ section.settings.color_scheme }} gradient isolate">
   <div class="page-width{% if section.settings.heading == blank %} no-heading{% endif %} section-{{ section.id }}-padding">
-    <h2 class="collage-wrapper-title {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
+    <h2 class="collage-wrapper-title {{ section.settings.heading_size }}{% if settings.motion_toggle %} scroll-trigger{% endif %}">{{ section.settings.heading | escape }}</h2>
     <div class="collage{% if section.settings.mobile_layout == 'collage' %} collage--mobile{% endif %}">
       {%- for block in section.blocks -%}
         <div
-          class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}"
+          class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}{% if settings.motion_toggle %} scroll-trigger{% endif %}"
           {{ block.shopify_attributes }}
         >
           {%- case block.type -%}

sections/collapsible-content.liquid

@@ -20,7 +20,7 @@
   <div class="collapsible-content collapsible-{{ section.settings.layout }}-layout isolate{% if section.settings.layout == 'section' %} page-width{% elsif section.settings.layout == 'none' %} content-container content-container--full-width{% endif %}">
     <div class="collapsible-content__wrapper section-{{ section.id }}-padding{% if section.settings.layout == 'section' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}">
       <div class="{% if section.settings.image == blank %}collapsible-content-wrapper-narrow{% else %}page-width{% endif %}">
-        <div class="collapsible-content__header" style="text-align: {{ section.settings.heading_alignment }};">
+        <div class="collapsible-content__header{% if settings.motion_toggle %} scroll-trigger{% endif %}" style="text-align: {{ section.settings.heading_alignment }};">
           {%- if section.settings.caption != blank -%}
             <p class="caption-with-letter-spacing">{{ section.settings.caption | escape }}</p>
           {% endif %}
@@ -32,7 +32,7 @@
             <h2 class="visually-hidden">{{ 'accessibility.collapsible_content_title' | t }}</h2>
           {% endif %}
         </div>
-        <div class="grid grid--1-col grid--2-col-tablet collapsible-content__grid{% if section.settings.desktop_layout == 'image_second' %} collapsible-content__grid--reverse{% endif %}">
+        <div class="grid grid--1-col grid--2-col-tablet collapsible-content__grid{% if section.settings.desktop_layout == 'image_second' %} collapsible-content__grid--reverse{% endif %}{% if settings.motion_toggle %} scroll-trigger{% endif %}">
           {%- if section.settings.image != blank -%}
             <div class="grid__item collapsible-content__grid-item">
               <div

sections/contact-form.liquid

@@ -14,7 +14,7 @@
   }
 {%- endstyle -%}
 
-<div class="color-{{ section.settings.color_scheme }} gradient">
+<div class="color-{{ section.settings.color_scheme }} gradient{% if settings.motion_toggle %} scroll-trigger{% endif %}">
   <div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
     {%- if section.settings.heading != blank -%}
       <h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">

sections/featured-collection.liquid

@@ -50,7 +50,7 @@
   <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 {{ section.settings.heading_size }}">{{ section.settings.title | escape }}</h2>
+        <h2 class="title {{ section.settings.heading_size }}{% if settings.motion_toggle %} scroll-trigger{% endif %}">{{ section.settings.title | escape }}</h2>
       {%- endif -%}
       {%- if section.settings.description != blank
         or section.settings.show_description

sections/featured-product.liquid

@@ -56,7 +56,7 @@
   >
 {%- endif -%}
 
-<section class="color-{{ section.settings.color_scheme }} {% if section.settings.secondary_background %}background-secondary{% else %}gradient{% endif %}">
+<section class="color-{{ section.settings.color_scheme }} {% if section.settings.secondary_background %}background-secondary{% else %}gradient{% endif %}{% if settings.motion_toggle %} scroll-trigger{% endif %}">
   <div class="page-width section-{{ section.id }}-padding{% if section.settings.secondary_background %} isolate{% endif %}">
     <div class="featured-product product product--{{ section.settings.media_size }} grid grid--1-col gradient color-{{ section.settings.color_scheme }} product--{{ section.settings.media_position }}{% if section.settings.secondary_background == false %} isolate{% endif %} {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
       <div class="grid__item product__media-wrapper{% if section.settings.media_position == 'right' %} medium-hide large-up-hide{% endif %}">

sections/footer.liquid

@@ -37,7 +37,7 @@
 {%- endstyle -%}
 
 <footer class="footer color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
-  {%- liquid 
+  {%- liquid
     assign has_social_icons = true
     if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
       assign has_social_icons = false
@@ -66,7 +66,7 @@
           -%}
           <div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
             {%- for block in section.blocks -%}
-              <div class="footer-block grid__item{% if block.type == 'link_list' %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
+              <div class="footer-block grid__item{% if block.type == 'link_list' %} footer-block--menu{% endif %}{% if settings.motion_toggle %} scroll-trigger{% endif %}" {{ block.shopify_attributes }}>
                 {%- if block.settings.heading != blank -%}
                   <h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
                 {%- endif -%}
@@ -137,7 +137,7 @@
           </div>
         {%- endif -%}
 
-        <div class="footer-block--newsletter">
+        <div class="footer-block--newsletter{% if settings.motion_toggle %} scroll-trigger{% endif %}">
           {%- if section.settings.newsletter_enable -%}
             <div class="footer-block__newsletter">
               {%- if section.settings.newsletter_heading != blank -%}

sections/image-banner.liquid

@@ -61,12 +61,12 @@
       }}
     </div>
   {%- elsif section.settings.image_2 == blank -%}
-    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
+    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if settings.motion_toggle %} scroll-trigger{% endif %}">
       {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
     </div>
   {%- endif -%}
   {%- if section.settings.image_2 != blank -%}
-    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
+    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if settings.motion_toggle %} scroll-trigger{% endif %}">
       {%- liquid
         assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
         if section.settings.image != blank
@@ -93,7 +93,7 @@
       }}
     </div>
   {%- endif -%}
-  <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
+  <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.motion_toggle %} scroll-trigger{% endif %}">
     <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
       {%- for block in section.blocks -%}
         {%- case block.type -%}

sections/image-with-text.liquid

@@ -15,7 +15,7 @@
   }
 {%- endstyle -%}
 
-<div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == 'background-1' and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding">
+<div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == 'background-1' and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding{% if settings.motion_toggle %} scroll-trigger{% endif %}">
   <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
     <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
       <div

sections/main-product.liquid

@@ -60,7 +60,7 @@
     <div class="grid__item product__media-wrapper{% if section.settings.media_position == 'right' %} medium-hide large-up-hide{% endif %}">
       {% render 'product-media-gallery', variant_images: variant_images %}
     </div>
-    <div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}">
+    <div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}{% if settings.motion_toggle %} scroll-trigger{% endif %}">
       <product-info
         id="ProductInfo-{{ section.id }}"
         data-section="{{ section.id }}"

sections/multicolumn.liquid

@@ -30,7 +30,7 @@
   <div class="page-width section-{{ section.id }}-padding isolate">
     {%- unless section.settings.title == blank -%}
       <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
-        <h2 class="title {{ section.settings.heading_size }}">
+        <h2 class="title {{ section.settings.heading_size }}{% if settings.motion_toggle %} scroll-trigger{% endif %}">
           {{ section.settings.title | escape }}
         </h2>
         {%- if section.settings.button_label != blank and show_mobile_slider -%}
@@ -66,7 +66,7 @@
 
           <li
             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 }}"
+            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.motion_toggle %} scroll-trigger{% endif %}"
             {{ block.shopify_attributes }}
           >
             <div class="multicolumn-card content-container">

sections/multirow.liquid

@@ -47,7 +47,7 @@
   <div class="multirow__inner page-width">
     {%- for block in section.blocks -%}
       <div
-        class="image-with-text isolate{{ borders_class }}{{ corners_class }}{{ padding_class }}"
+        class="image-with-text isolate{{ borders_class }}{{ corners_class }}{{ padding_class }}{% if settings.motion_toggle %} scroll-trigger{% endif %}"
         {{ block.shopify_attributes }}
       >
         <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.image_layout contains 'alternate' %}{% cycle odd_class, even_class %}{% else %}{{ odd_class }}{% endif %}">