Animate search template

[kjellr]

PR Summary:

This adds animation to the search template.

Why are these changes introduced?

Part of #2381.

What approach did you take?

This follows the same general template animation strategy set forth in #2381 (comment):

• The page heading (and associated top-of-the-page content) fades in.
• The rest of the template content slides in on scroll. Search results slide in sequentially.

Visual impact on existing themes

When "Reveal sections on scroll" is enabled, this will animate elements on the search results page template.

⚠️ Please note, the filters will not animate in. #2533 currently handles the animation of filters, so this will happen automatically when that one is merged in.

search.mp4

Testing steps/scenarios

• Ensure that "Reveal sections on scroll" is active in Theme Settings > Animation.
• Visit a search results page.
• Ensure the header and search field fade in on load.
• Ensure the search results slide in sequentially on scroll.

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]

I don't think we need this instance since we already have the class applied to the parent li 🤔

[kjellr]

Yeah, I think I got confused there. Removed in ea377de.

[melissaperreault]

I was looking around to catch up, is it expected to not have the filter component not animate?

[kjellr]

@melissaperreault Yep! The filter component is a shared one that's handled by #2533. Once that's merged in, it will animate in search results too.