[Templates] Add cascading fade in on scroll animation

[melissaperreault]

Summary

Add cascading fade in on scroll animation for Templates based on explorations made in #2141. Pair with UX to define the ideal strong outcome when needed.

Details

• Product template (Should be done with [Featured product and Product information] Add cascading fade in on scroll animation #2390)
• Cart
• Collection template
• Collection list template
• Page
• Blog posts template
• Blog post template
• Customer account templates
• Search results

Setting

• The setting will be applied from the new Animations theme setting category, below Layout and above Buttons. The new setting label is offered via a checkbox and its label is; Reveal sections on scroll.
• The setting will be off by default for the initial release, than turned on for the next one.

[kjellr]

I did some exploration, and here is a quick recommended guideline for implementation here:

Stuff at the very top of the page should probably fade-in. This includes the main template header and any associated heading content (top-of-the-page content like blog post images, filters, and collection images). The rest of the page content should be good to side in as usual.

This means that the foundational page content (which would be visible at the top of the page every single time) doesn't move around, it just smoothly fades in. And that the rest of the page content follows our usual slide animation. It feels pretty good to me in practice, and in sync with the animations that we've been implementing for the home and product templates already.