Animate multicolumn

[metamoni]

PR Summary:

Adds cascading fade in on scroll animation to Multicolumn section.

Why are these changes introduced?

Fixes #2382

What approach did you take?

Replicated animations from the original prototype

Visual impact on existing themes

Will animate Multicolumn section on scroll, when Reveal sections on scroll is enabled

multicolumn.mp4

Testing steps/scenarios

• Enable Reveal sections on scroll under Animations in Theme settings
• On the home page, add a Multicolumn section and verify that it fades in on scroll
• Verify that each column cascades in
• Update the section's settings and verify that everything still works as expected

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]

Works great in my testing!

[melissaperreault]

Thank you Monica! I noticed 1 thing:

• The mobile slide/fade in is different from larger screens. Notice the shadow or shape being cut out at the bottom as it reveals in place.

16-35-aede6-1hep8.mp4

[metamoni]

@melissaperreault we've made some changes to the animation since then and the product cards also fade in now, so I don't think this will be a problem anymore. We also decided to disable the cascading effect on carousels, for now. Here's a slow-motion video. Let me know if you're still noticing any issues.

shadow-slow.mp4

[LucasLacerdaUX]

LGTM 👍

[melissaperreault]

Thanks Monica!

Tiny refinement detail that we can leave for a follow up if we feel this is a final polish alignment to keep close eye on.

• As we reveal similar sections, the relationship of the animation between the section Title and the Cards is different from Featured collection section and Multicolumn section. The first one will reveal the title sooner than the Multicolumn one (Video example)

[metamoni]

• As we reveal similar sections, the relationship of the animation between the section Title and the Cards is difference from Featured collection section and Multicolumn section. The first one will reveal the title sooner than the Multicolumn one (Video example)

@melissaperreault this is a valid point, but it's something we should fix as part of another issue. It only happens when the previous section is a Featured collection, and thus has more to do with refining that section rather than this one (see video below).

cascading.mp4

I think the delay is caused by the data-cascade attribute on the Featured collection, which enables the cascading animation. For this to work properly we'd have to remove that attribute when it's not necessary, which we're not currently doing because we'd have to know whether we're in mobile/desktop view.

[melissaperreault]

Awesome Monica, thanks! Let's open an issue to follow up on your recommendation! 🎉