animate Featured collection, Related products and Product grid sections

[metamoni]

PR Summary:

Makes Featured collection, Related products and Product grid fade in on scroll.

Why are these changes introduced?

Fixes #2318

Decision log

#	Decision	Alternatives	Rationale	Downsides
1	Use the --animation-order and animation-delay properties to create cascading animation	Use nth-child approach from prototype	Achieves the same thing in fewer lines of code, making it more readable. We're only setting a CSS attribute on each element in our script, in an already existing loop, so performance impact should be minimal	Relying on JS rather than CSS. However, we're not introducing a lot of new logic, we're only setting a new attribute
2	Don't apply cascading animations to desktop and mobile carousels	Only cascade visible product cards in a carousel and stop cascading items that come into view when navigating left-right in the carousel	Achieving the alternative effect is very complicated, due to the many available permutations (variable number of columns on desktop and mobile)	No cascading effect in carousels

Visual impact on existing themes

Once this PR is merged, the Featured collection, Related products and Product grid sections will scroll into view if the Reveal on scroll setting is enabled in Theme Settings > Animations.

Featured collection

featured.collection.scroll.into.view.mp4

Product grid

product.grid.mp4

Related products

related-products.mp4

Testing steps/scenarios

Featured collection - Default product grid view (title and description slide in, products cascade in)

• Go to the theme editor
• Add an empty featured collection and verify that the title scrolls into view
• Verify that the empty collection items cascade into view
• Add a description and verify that it scrolls into view with the title
• Add a collection and verify that each item cascades into view
• Change the number of columns/products and verify that the section still animates correctly
• Enable the quick add button and verify that it slides in
• Check with different settings (see more detailed steps for carousel below)

Featured collection - Desktop and mobile carousel (title, description and container slide in, products do not cascade in)

• Enable carousel on desktop. The section should slide in but individual products should not cascade in
• Change different settings and verify that it still animates as expected
• While still in Desktop view, tick Enable swipe on mobile and verify that it still animates as expected
• Test with different mobile column settings
• Switch to Mobile view and test both the cascading grid and carousel versions
• While still in Mobile view, turn desktop carousel on/off and test that everything animates as expected on mobile

Product grid and related items

• Click "Shop all" to bring up the Product grid collection and verify that it animates as expected
• Change different settings and verify that the section still animates correctly
• Navigate to the product page and scroll to the bottom to reveal the Related products section. Verify that it animates as expected
• Change different settings and verify that the section still animates correctly
• Turn on Reduce motion in your OS and verify that the animations stop working

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

[kjellr]

This works really well, and the JS solution feels way more elegant than all the nth-child rules in previous iterations. I doubt we're really sacrificing much in terms of performance by it either. Nice work! 👏

Just noting that @metamoni and I chatted earlier and determined that it's ok for V1 to just fade/slide-in the entire Related Products section at once (rather than in a cascade, like other product grids). During initial prototypes, there were some issues around getting this section to animate correctly.

I'm seeing some related bugginess here — if you scroll too quickly into the Related Products section, you get a little jump before the related products appear. Here's a slow-motion video to demonstrate. This isn't related to our work here, but it's a little more obvious because all the other animations are incredibly smooth. 😅

If we think there's an easy fix for this, let's do it! Otherwise we can look into it later and I don't consider it a blocker.

[kjellr]

This is working nicely for me — haven't stumbled upon any broken parts. 👍

[kjellr]

One very minor comment, but this looks good to me! 🎉

Fixed