Add intersection observer (#2337)

* add scroll animation observer for section

assets/animations.js

@@ -0,0 +1,29 @@
+const SCROLL_ANIMATION_TRIGGER_CLASSNAME = 'scroll-animation__trigger';
+const SCROLL_ANIMATION_ACTIVE_CLASSNAME = 'scroll-animation__trigger--active';
+
+function onIntersection(elements, observer) {
+  elements.forEach((element) => {
+    if (element.isIntersecting) {
+      const elementTarget = element.target;
+      elementTarget.classList.add(SCROLL_ANIMATION_ACTIVE_CLASSNAME);
+
+      observer.unobserve(elementTarget);
+    }
+  })
+}
+
+function initializeScrollAnimationTrigger(rootEl = document) {
+  const animationTriggerElements = Array.from(
+    rootEl.getElementsByClassName(SCROLL_ANIMATION_TRIGGER_CLASSNAME)
+  );
+  if (animationTriggerElements.length === 0) return;
+
+  const observer = new IntersectionObserver(onIntersection, {
+    threshold: 0.1,
+  });
+  animationTriggerElements.forEach((element) => observer.observe(element));
+}
+
+window.addEventListener('DOMContentLoaded', () => initializeScrollAnimationTrigger());
+
+document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target));

layout/theme.liquid

@@ -32,6 +32,10 @@
     <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.animations_reveal_on_scroll -%}
+      <script src="{{ 'animations.js' | asset_url }}" id="AnimationsScript" defer="defer"></script>
+    {%- endif -%}
+
     {{ content_for_header }}
 
     {%- liquid