Try adding global scroll animations to Dawn

assets/animations.js

@@ -0,0 +1,20 @@
+(function() {
+    // Add animation classes.
+    function onIntersection(entries) {
+        for (const entry of entries) {
+            entry.target.classList.add('animate');
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate--active');
+            }
+        }
+    }
+
+    const intersectionObserver = new IntersectionObserver(onIntersection, {
+        thresholds: [1],
+    });
+    const selector = '.section, .banner__box, .product__info-wrapper';
+    const elementsToObserve = Array.from(document.querySelectorAll(selector));
+
+    // Observe intersections between the viewport and the elements.
+    elementsToObserve.forEach((element) => intersectionObserver.observe(element));
+})();

assets/base.css

@@ -2957,3 +2957,41 @@ details-disclosure > details {
     outline: transparent solid 1px;
   }
 }
+
+/* Animations */
+
+.animate {
+  transition: opacity 0.55s ease-in-out;
+  opacity: 0;
+}
+
+.animate--active {
+  animation: 0.55s ease-in-out slideIn;
+  opacity: 1;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(10vh);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Omit the first section, since that'll be above by default */
+#MainContent > .animate:first-child {
+  opacity: 1;
+  animation: none;
+}
+
+/* Respect the visitor's motion preferences. */
+@media (prefers-reduced-motion) {
+  .animate,
+  .animate--active {
+    opacity: 1;
+    animation: none;
+  }
+}

config/settings_schema.json

@@ -1366,6 +1366,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

@@ -291,5 +291,9 @@
     {%- if settings.predictive_search_enabled -%}
       <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
     {%- endif -%}
+
+    {%- if settings.motion_toggle -%}
+    <script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>
+    {%- endif -%}
   </body>
 </html>

locales/en.default.schema.json

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