From 935e898ae67b114d11b4b28cabd138b9c05e5c70 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] add animation to Image banner and Image with text

---
 assets/base.css                 | 57 +++++++++++++++++++++++++++++++++
 sections/image-banner.liquid    | 17 ++++++----
 sections/image-with-text.liquid |  2 +-
 3 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index b1fe858562b..ea5ebe23d63 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -3120,3 +3120,60 @@ details-disclosure > details {
 .rte blockquote > * {
   margin: -0.5rem 0 -0.5rem 0;
 }
+
+/* Animations */
+
+.scroll-animation__trigger {
+  transition: opacity 0.55s ease-in-out;
+  opacity: 0;
+}
+
+.scroll-animation__trigger--active {
+  animation: 0.55s ease-in-out slideIn forwards;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(10vh);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Section-specific motion behavior. */
+
+.banner.scroll-animation__trigger,
+.banner.scroll-animation__trigger--active {
+  opacity: 1;
+  animation: none;
+}
+
+.banner__media.scroll-animation__trigger,
+.banner.scroll-animation__trigger:after {
+  transition: opacity var(--duration-long) ease-in-out;
+}
+
+.banner__media.scroll-animation__trigger--active,
+.banner.scroll-animation__trigger--active:after {
+  animation: none;
+  opacity: 1;
+}
+
+/* Turn off animations if JS is turned off. */
+.no-js .scroll-animation__trigger,
+.no-js .scroll-animation__trigger--active {
+  opacity: 1;
+  animation: none;
+}
+
+/* Respect the visitor's motion preferences. */
+@media (prefers-reduced-motion) {
+  .scroll-animation__trigger,
+  .scroll-animation__trigger--active {
+    opacity: 1;
+    animation: none;
+  }
+}
diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
index 716cd15fa89..668094e89c2 100644
--- a/sections/image-banner.liquid
+++ b/sections/image-banner.liquid
@@ -24,17 +24,22 @@
 {%- endif -%}
 
 {%- style -%}
-  #Banner-{{ section.id }}::after {
+  #Banner-{{ section.id }}.scroll-animation__trigger::after {
+    opacity: 0;
+  }
+
+  #Banner-{{ section.id }}::after,
+  #Banner-{{ section.id }}.scroll-animation__trigger--active::after {
     opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
   }
 {%- endstyle -%}
 
 <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-animation__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 %}">
+    <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.animations_reveal_on_scroll %} scroll-animation__trigger{% endif %}">
       {%- liquid
         assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
         if section.settings.image_2 != blank
@@ -61,12 +66,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.animations_reveal_on_scroll %} scroll-animation__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.animations_reveal_on_scroll %} scroll-animation__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 +98,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-animation__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 -%}
diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
index c6e9570a47d..c7ee44a403e 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-animation__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