[Motion] Use rootMargin instread of threshold to trigger slide in animations #2517
Conversation
|
I like this! It seems to work pretty well in my testing — the items all animate in at the same point, regardless of their height. The Here's a small weird thing I wonder if we can clear up as a special case (either here, or in another PR): Check out this example: 12-02-chxmh-ur1fa.mp4As you can see, the body text for the Rich Text block doesn't appear on initial load — it only kicks in when you scroll. This feels wrong. Ideally, when something is even a little above the fold, we'd animate it in on load. I think what we want is:
What do you think? |
| @@ -18,7 +18,8 @@ function initializeScrollAnimationTrigger(rootEl = document) { | |||
| if (animationTriggerElements.length === 0) return; | |||
|
|
|||
| const observer = new IntersectionObserver(onIntersection, { | |||
| threshold: 0.1, | |||
| rootMargin: '0px 0px -50px 0px', | |||
There was a problem hiding this comment.
Hmm yeah I see what you mean. Though it seem like it could be a tricky use case to deal with 🤔 Having a rootMargin value specific on page load and another one the rest of the time.
I'll take a look 👍
There was a problem hiding this comment.
If it seems difficult to achieve, I'm perfectly happy merging this in for now and addressing it in a followup.
There was a problem hiding this comment.
Yeah I think I will leave it as is for now. And see if it comes up often as an issue in our testing. We could reduce the negative root margin value if needed.
* [Motion] Use rootMargin instread of threshold to trigger slide in animations (#2517) * Use rootMargin instread of threshold to trigger slide in animations * address review comment, remove threshold * Add conditional around data-cascade attribute (#2532) * [Motion] No animation on added/edited section (#2502) --------- Co-authored-by: Ludo <ludo.segura@shopify.com>
…mations (Shopify#2517) * Use rootMargin instread of threshold to trigger slide in animations * address review comment, remove threshold
PR Summary:
Tweak the approach we use to trigger the animations
Why are these changes introduced?
Since we're currently relying on a the threshold value to tell when to trigger the animations, it's a percentage value of the element in question. So when it appears will vary based on that element's height.
What approach did you take?
By relying on rootMargin instead we apply a consistent trigger to our animations 👍
Other considerations
Visual impact on existing themes
Should trigger the appearance of upcoming sections more regularly.
Testing steps/scenarios
Demo links
Checklist