Animate contact form on scroll (#2511)

* Animate contact form on scroll. * Update sections/contact-form.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> * Update sections/contact-form.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> --------- Co-authored-by: Ludo <ludo.segura@shopify.com>
Shopify · Apr 13, 2023 · a1b195f · a1b195f
1 parent 109c485
commit a1b195f
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid
@@ -17,13 +17,19 @@
 <div class="color-{{ section.settings.color_scheme }} gradient">
   <div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
     {%- if section.settings.heading != blank -%}
-      <h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}">
+      <h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
         {{ section.settings.heading }}
       </h2>
     {%- else -%}
       <h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
     {%- endif -%}
-    {%- form 'contact', id: 'ContactForm', class: 'isolate' -%}
+    {%- liquid
+      assign contact_form_class = 'isolate'
+      if settings.animations_reveal_on_scroll
+        assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
+      endif
+    -%}
+    {%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
       {%- if form.posted_successfully? -%}
         <h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
           {% render 'icon-success' %}