diff --git a/assets/animations.js b/assets/animations.js
new file mode 100644
index 00000000000..c829263bf19
--- /dev/null
+++ b/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));
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 368f137fe7d..5f7a9ef8f19 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -32,6 +32,10 @@
+ {%- if settings.animations_reveal_on_scroll -%}
+
+ {%- endif -%}
+
{{ content_for_header }}
{%- liquid