From bd6cb65cfcd8568dbdfd7ab8e987191d796e2c36 Mon Sep 17 00:00:00 2001
From: Monica Mateiu <monica.mateiu@shopify.com>
Date: Tue, 7 Mar 2023 13:26:34 +0000
Subject: [PATCH 1/5] add animation to Image banner and Image with text

---
 assets/animations.js            |  4 ++--
 assets/base.css                 | 23 +++++++++++++++++++++++
 assets/section-image-banner.css | 17 +++++++++++++++++
 sections/image-banner.liquid    | 10 +++++-----
 sections/image-with-text.liquid |  2 +-
 5 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/assets/animations.js b/assets/animations.js
index c829263bf19..b5e5e394119 100644
--- a/assets/animations.js
+++ b/assets/animations.js
@@ -1,5 +1,5 @@
-const SCROLL_ANIMATION_TRIGGER_CLASSNAME = 'scroll-animation__trigger';
-const SCROLL_ANIMATION_ACTIVE_CLASSNAME = 'scroll-animation__trigger--active';
+const SCROLL_ANIMATION_TRIGGER_CLASSNAME = 'scroll-trigger';
+const SCROLL_ANIMATION_ACTIVE_CLASSNAME = 'scroll-trigger--active';
 
 function onIntersection(elements, observer) {
   elements.forEach((element) => {
diff --git a/assets/base.css b/assets/base.css
index 1771a2c0c86..0c07a4e56e1 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -3134,4 +3134,27 @@ details-disclosure > details {
     0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); }
     100% { transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); }
   }
+
+  .scroll-trigger--active.animate--slide-in {
+    animation: slideIn var(--duration-long) ease-out forwards;
+    transition: opacity var(--duration-long) ease-out;
+    opacity: 0;
+  }
+
+  /* Turn off animations if JS is turned off. */
+  .no-js .scroll-trigger--active {
+    opacity: 1;
+    animation: none;
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(10vh);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
 }
diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
index a768047d5a3..432540fa696 100644
--- a/assets/section-image-banner.css
+++ b/assets/section-image-banner.css
@@ -452,3 +452,20 @@
     color: currentColor;
   }
 }
+
+.banner.scroll-trigger--active,
+.banner.animate--slide-in {
+  opacity: 1;
+  animation: none;
+}
+
+.banner__media.scroll-trigger--active,
+.banner.scroll-trigger--active:after {
+  transition: opacity var(--duration-long) ease-out;
+}
+
+.banner__media.animate--slide-in,
+.banner.animate--slide-in:after {
+  animation: none;
+  opacity: 1;
+}
diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
index d79d28ee37f..0f83fe1b8dc 100644
--- a/sections/image-banner.liquid
+++ b/sections/image-banner.liquid
@@ -45,10 +45,10 @@
 
 <div
   id="Banner-{{ section.id }}"
-  class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
+  class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
 >
   {%- if section.settings.image != 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 %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% 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 section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
       {%- liquid
         assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
         if section.settings.image_2 != blank
@@ -75,12 +75,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 %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% 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 section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% 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 %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
+    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
       {%- liquid
         assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
         if section.settings.image != blank
@@ -107,7 +107,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.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% 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 -%}
diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
index c6e9570a47d..464bb740bef 100644
--- a/sections/image-with-text.liquid
+++ b/sections/image-with-text.liquid
@@ -14,7 +14,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.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% 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

From d397583d10c56759930e1ea0c0845656e4839680 Mon Sep 17 00:00:00 2001
From: Monica Mateiu <monica.mateiu@shopify.com>
Date: Mon, 13 Mar 2023 09:00:16 +0000
Subject: [PATCH 2/5] update styles

---
 assets/base.css                 |  2 +-
 assets/section-image-banner.css | 23 +++++++++--------------
 sections/image-banner.liquid    |  8 ++++----
 3 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index 0c07a4e56e1..693289ebda1 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -3142,7 +3142,7 @@ details-disclosure > details {
   }
 
   /* Turn off animations if JS is turned off. */
-  .no-js .scroll-trigger--active {
+  .no-js .scroll-trigger--active.animate--slide-in {
     opacity: 1;
     animation: none;
   }
diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
index 432540fa696..db9222363c8 100644
--- a/assets/section-image-banner.css
+++ b/assets/section-image-banner.css
@@ -453,19 +453,14 @@
   }
 }
 
-.banner.scroll-trigger--active,
-.banner.animate--slide-in {
-  opacity: 1;
-  animation: none;
-}
-
-.banner__media.scroll-trigger--active,
-.banner.scroll-trigger--active:after {
-  transition: opacity var(--duration-long) ease-out;
-}
+@media (prefers-reduced-motion: no-preference) {
+  .banner__media.scroll-trigger,
+  .banner.scroll-trigger:after {
+    opacity: 0;
+    transition: opacity var(--duration-long) ease-out;
+  }
 
-.banner__media.animate--slide-in,
-.banner.animate--slide-in:after {
-  animation: none;
-  opacity: 1;
+  .banner__media.scroll-trigger--active {
+    opacity: 1;
+  }
 }
diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
index 0f83fe1b8dc..04be7fc3b5c 100644
--- a/sections/image-banner.liquid
+++ b/sections/image-banner.liquid
@@ -45,10 +45,10 @@
 
 <div
   id="Banner-{{ section.id }}"
-  class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+  class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger{% endif %}"
 >
   {%- if section.settings.image != 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 %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% 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 section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger{% endif %}">
       {%- liquid
         assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
         if section.settings.image_2 != blank
@@ -75,12 +75,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 %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% 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 section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} 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 %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
+    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} 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

From a19823fab06e57f39d173fd738981601475c3c6d Mon Sep 17 00:00:00 2001
From: Monica Mateiu <monica.mateiu@shopify.com>
Date: Mon, 13 Mar 2023 14:04:36 +0000
Subject: [PATCH 3/5] Update assets/section-image-banner.css

Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
---
 assets/section-image-banner.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
index db9222363c8..73c807135c3 100644
--- a/assets/section-image-banner.css
+++ b/assets/section-image-banner.css
@@ -454,12 +454,14 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .banner__media.scroll-trigger,
-  .banner.scroll-trigger:after {
+  .banner.scroll-trigger,
+  .banner.scroll-trigger:after,
+  .banner__media.scroll-trigger {
     opacity: 0;
     transition: opacity var(--duration-long) ease-out;
   }
 
+  .banner.scroll-trigger--active,
   .banner__media.scroll-trigger--active {
     opacity: 1;
   }

From c7dc6252790d1a5b4426da673dbdc2e071a92524 Mon Sep 17 00:00:00 2001
From: Monica Mateiu <monica.mateiu@shopify.com>
Date: Mon, 13 Mar 2023 15:10:43 +0000
Subject: [PATCH 4/5] increase animation duration

---
 assets/base.css                 | 5 +++--
 assets/section-image-banner.css | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index 693289ebda1..4130b59563f 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -741,6 +741,7 @@ details > * {
   --duration-short: 100ms;
   --duration-default: 200ms;
   --duration-long: 500ms;
+  --animation-duration: 600ms;
 }
 
 .underlined-link,
@@ -3136,8 +3137,8 @@ details-disclosure > details {
   }
 
   .scroll-trigger--active.animate--slide-in {
-    animation: slideIn var(--duration-long) ease-out forwards;
-    transition: opacity var(--duration-long) ease-out;
+    animation: slideIn var(--animation-duration) ease-out forwards;
+    transition: opacity var(--animation-duration) ease-out;
     opacity: 0;
   }
 
diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
index 73c807135c3..2b1e0a7442f 100644
--- a/assets/section-image-banner.css
+++ b/assets/section-image-banner.css
@@ -458,7 +458,7 @@
   .banner.scroll-trigger:after,
   .banner__media.scroll-trigger {
     opacity: 0;
-    transition: opacity var(--duration-long) ease-out;
+    transition: opacity var(--animation-duration) ease-out;
   }
 
   .banner.scroll-trigger--active,

From 14f05dd121afa8c83f7aad8b0379c99879f1e5c3 Mon Sep 17 00:00:00 2001
From: Monica Mateiu <monica.mateiu@shopify.com>
Date: Mon, 13 Mar 2023 15:43:40 +0000
Subject: [PATCH 5/5] rename variable

---
 assets/base.css                 | 6 +++---
 assets/section-image-banner.css | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index 4130b59563f..855211e58ef 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -741,7 +741,7 @@ details > * {
   --duration-short: 100ms;
   --duration-default: 200ms;
   --duration-long: 500ms;
-  --animation-duration: 600ms;
+  --duration-extra-long: 600ms;
 }
 
 .underlined-link,
@@ -3137,8 +3137,8 @@ details-disclosure > details {
   }
 
   .scroll-trigger--active.animate--slide-in {
-    animation: slideIn var(--animation-duration) ease-out forwards;
-    transition: opacity var(--animation-duration) ease-out;
+    animation: slideIn var(--duration-extra-long) ease-out forwards;
+    transition: opacity var(--duration-extra-long) ease-out;
     opacity: 0;
   }
 
diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
index 2b1e0a7442f..f6278813ab2 100644
--- a/assets/section-image-banner.css
+++ b/assets/section-image-banner.css
@@ -458,7 +458,7 @@
   .banner.scroll-trigger:after,
   .banner__media.scroll-trigger {
     opacity: 0;
-    transition: opacity var(--animation-duration) ease-out;
+    transition: opacity var(--duration-extra-long) ease-out;
   }
 
   .banner.scroll-trigger--active,