Animate Featured Blog and Collection List sections

[kjellr]

PR Summary:

Adds cascading fade in on scroll animation to the Blog Posts and Collection List sections.

Why are these changes introduced?

Closes #2389.

What approach did you take?

Replicated animations from the #2141

Visual impact on existing themes

• Will animate these sections on scroll, when Reveal sections on scroll is enabled.
• Cards will animate in sequentially, unless swipe on mobile is active (and you're viewing on mobile). Then we follow the paradigm established in animate Featured collection, Related products and Product grid sections #2372 and remove the sequential animation.

desktop.mp4

mobile.mp4

Testing steps/scenarios

1. Ensure "Reveal sections on scroll" is set within Theme Settings > Animation.
2. Add Collection List section, ensure it smoothly animates in on scroll.
3. Add Featured Blog section, ensure it smoothly animates in on scroll.
4. Adjust settings, ensure animation continues working as expected.
5. Specifically check that the mobile slider functions as usual.

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]

Looking good 👍