Animate rich text and email signup

[metamoni]

PR Summary:

Adds fade in on scroll animation to the following sections:

• Rich text
• Email signup

Why are these changes introduced?

Fixes #2388

What approach did you take?

Replicated animations from the original prototype

Visual impact on existing themes

Will animate Rich text and Email signup sections on scroll, when Reveal sections on scroll is enabled

rich-text-email.mp4

Testing steps/scenarios

• Enable Reveal sections on scroll under Animations in Theme settings
• On the home page, add a Rich text section and verify that it fades in on scroll
• Add an Email signup section and verify that it fades in on scroll

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]

For these two sections, can we mimic the effect in #2409, where the background color does not animate, but the content slides in?

[melissaperreault]

A note for refinement; perhaps we could reveal the first block first than the other one together? That would align well with how we do the cascade for cards in general.

[kjellr]

A note for refinement; perhaps we could reveal the first block first than the other one together? That would align well with how we do the cascade for cards in general.

I think that's mostly just an effect of the demo above, and probably not a real-world scenario. Normally, you'd scroll into them and they'd appear one-by-one. If they're both at the top of the page, they might animate in all at once, but we've talked about trying to work around that. I'll open an issue to log some ideas around that.

Edit: #2417

[melissaperreault]

A note for refinement; perhaps we could reveal the first block first than the other one together? That would align well with how we do the cascade for cards in general.

Sorry, my comment lacks clarity here. I was targeting the first block of the section, in this case, the title block. Than the other blocks; description and/or button could slide in.

[metamoni]

@kjellr is this what you're looking for with the background not animating?

email.signup.and.rich.text.mp4

[kjellr]

@metanomi Yes, that's right!

@melissaperreault was also suggesting that we could load the text in sequentially (so the header first, and then the body copy, etc.). If we can do that great, but it's also ok to push that to later.

[metamoni]

@kjellr, @melissaperreault added the cascading effect to individual elements

[kjellr]

🎉 Looks great, thanks @metamoni!

[LucasLacerdaUX]

🐶👍

[melissaperreault]

Thank you Monica! 💪

Everything looks good! So fresh!
I did notice one thing to discuss how you feel; when we set the Email signup section padding lower than 76 pixels, the blocks appear on top of the next section. That's kind of the effect but I wonder if gives a buggy impression to the buyer?

[metamoni]

when we set the Email signup section padding lower than 76 pixels, the blocks appear on top of the next section. That's kind of the effect but I wonder if gives a buggy impression to the buyer?

@kjellr, @melissaperreault how would you like the animation to work here?

[kjellr]

I think that's ok for now. 👍 I imagine that's a common thing across different sections, and we can take a look at it later.