Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animate the footer section #2521

Merged
merged 1 commit into from
Apr 14, 2023
Merged

Animate the footer section #2521

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 23 additions & 5 deletions sections/footer.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,19 @@
assign footer_grid_class = 'grid--3-col-tablet'
endif
-%}
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
<div
class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
{%- for block in section.blocks -%}
<div
class="footer-block grid__item{% if block.type == 'link_list' %} footer-block--menu{% endif %}"
class="footer-block grid__item{% if block.type == 'link_list' %} footer-block--menu{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
{%- if block.settings.heading != blank -%}
<h2 class="footer-block__heading inline-richtext">{{- block.settings.heading -}}</h2>
Expand Down Expand Up @@ -152,7 +160,12 @@
</div>
{%- endif -%}

<div class="footer-block--newsletter">
<div
class="footer-block--newsletter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
{%- if section.settings.newsletter_enable -%}
<div class="footer-block__newsletter">
{%- if section.settings.newsletter_heading != blank -%}
Expand Down Expand Up @@ -217,7 +230,7 @@
{%- endform -%}
</div>
{%- endif -%}

{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
<div class="footer__follow-on-shop">
{% comment %} TODO: enable theme-check once `login_button` is accepted as valid filter {% endcomment %}
Expand All @@ -235,7 +248,12 @@
{%- endunless -%}
{%- endif -%}

<div class="footer__content-bottom">
<div
class="footer__content-bottom{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seem to works as expected in my tests 👍

The one thing I wonder though is if it should be applied to the footer 🤔

I personally don't feel like it adds much, and just like the header section, I prefer it not to animate. I can see how it could be odd that some do and some don't but since it's something that comes up on all pages, I prefer the impression that it's the content in the "middle" that needs to be loaded in.

Curious to hear yours and other's thoughts on it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, @melissaperreault raised this earlier too. I went back and forth on it myself, but do I think it makes sense to animate the footer.

The detail that convinced me most is the columned content: We're animating columned content in sequentially everywhere else it appears on the storefront, so it feels like a letdown if you get to the bottom and all of a sudden you get some columned content that does not animate anymore. Although the footer can be a little more utilitarian than the rest of the page, I think animating it helps maintain the continuity of the animation.

<div class="footer__content-bottom-wrapper page-width">
<div class="footer__column footer__localization isolate">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
Expand Down