[Facet filters] Remove animation from product grid re render

[ludoboludo]

PR Summary:

This PR explores what we could do to limit the amount of animation when using facet filters and re rendering the product grid.
We're not applying the animation on product cards that are coming up above the fold. But are on the rest of them when scrolled into view.

Why are these changes introduced?

Fixes #2578

What approach did you take?

• I added a class scroll-trigger--facet-cancel on each grid__item from the facets.js file, when we're re rendering the elements.
• Added some CSS styling to cancel the animation and set the opacity to 1 when the class mentioned above is applied.
• In the animation.js Im removing the class in question if it's not within the viewport.

Other considerations

Visual impact on existing themes

Testing steps/scenarios

• Step 1

Demo links

• 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]

I like it! This eliminates the unnecessarily repetitive behavior that existed before when the animation would re-render, and still retains the ability to have items animate in on scroll. Nice work!

[melissaperreault]

LGTM! 🎉 🚢

[stufreen]

I think this works. The only downside is that it adds some facet-specific logic to animations.js. I'm not sure the logic would be obvious to someone looking at the code with no context.

Did you consider removing the SCROLL_ANIMATION_TRIGGER_CLASS instead, after the section rendering API query? So in facets.js you could change to something like:

static renderProductGridContainer(html) {
    const productGridHtml = new DOMParser().parseFromString(html, 'text/html');
    const scrollTriggerEls = Array.from(productGridHtml.getElementsByClassName('scroll-trigger'));
    scrollTriggerEls.forEach((el) => el.classList.remove('scroll-trigger'));
    document.getElementById('ProductGridContainer').innerHTML =
      productGridHtml.getElementById('ProductGridContainer').innerHTML;
  }

I tested that quickly but not extensively. Let me know which one you prefer and I can approve it.

[ludoboludo]

Yeah I have the same downside with the approach I have. Though it seem to be the one that make the most sense.
At least if we're wanting to animate in all the product cards that aren't shown in the viewport when it's been re rendered.

Otherwise we could just not animate any of the cards being re rendered 🤷

Your example is what I had originally 👍

Curious to hear Lucas' take on it.

[stufreen]

Good point, it's better to keep the animation for offscreen elements 👍

[LucasLacerdaUX]

I'm okay with this approach to cancel animations, I'm just not sure if we should name it after facets when it has nothing facet-specific. It's our only use case so far, but the code itself is just toggling a class that allows animation to be cancelled :P