Animate the footer section

[kjellr]

PR Summary:

Adds cascading fade in on scroll animation to Footer section.

Why are these changes introduced?

Closes #2422.

What approach did you take?

Replicated animations from the #2141

Visual impact on existing themes

Will animate the Footer section on scroll, when Reveal sections on scroll is enabled.

13-51-npfy5-p8cmj.mp4

Testing steps/scenarios

• Ensure "Reveal sections on scroll" is checked within Theme Settings > Animations.
• Scroll down to the footer, watch it animate in.
• Add/remove blocks and adjust settings. Ensure things continue to animate in smoothly.

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ludoboludo]

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.

[kjellr]

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.