add scroll animation to image banner and image with text

[metamoni]

PR Summary:

Why are these changes introduced?

Fixes #2317

What approach did you take?

Visual impact on existing themes

This will animate the Image banner and Image with text sections when the Reveal sections on scroll animation setting is enabled.

Testing steps/scenarios

• Go to the editor
• If there's no Image banner section, add one
• Verify that it behaves as described in this comment
• Add an "Image with text" section
• Verify that the section scrolls into view as per this comment
• Turn off animations and verify that the sections don't animate

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]

Just leaving a few UX notes for implementation here:

For the Image Banner, the latest design I have working in #2141 fades in the .banner__media and its overlay shade, and simultaneously fades + slides-in the banner__content. The design reasoning behind that is that it's potentially overwhelming to have the entire full-screen background slide in (especially on initial page load). It also works well as a way to introduce some variety to the scroll experience when this section is lower on the page.

For the Image with Text block, let's do the usual fade + slide-in for the entire section (This is how it works in #2141 today). I'd like to avoid animating each side individually, since these two areas sometimes appear as a unit.

Here's a quick video of these two behaving this way:

06-29-o4vri-aai0m.mp4

[kjellr]

Left a minor comment, but looks great! 🙌

[melissaperreault]

Thank you for the great work so far, it really helps me have a better idea of the full experience! 👌

Image banner

Nothing to say! Works well! Aligned with Kjell's feedback!

Image with text

I'd like to avoid animating each side individually, since these two areas sometimes appear as a unit.

@kjellr How do you feel bringing a variation to reveal each side individually when merchants select the Overlap content layout? I agree for the No overlap, since that content container can wear different color scheme and makes it look like a whole. But for the other layout, I like the idea that it reinforces the organic offset look and feel, I think it could make it look more refined.

If we do each one individually in that case, we should look into the Image first and Image second setting to see how we feel about it.

07-41-qgs3i-nn3ip.mp4

Alternative in mind:

• Could the image and the container background be there, than we reveal the content blocks? It's a nice detail for when the Image background and the Content container background are the same color or if the media is a PNG. (In my example, I was not able to remove the background for the reveal but imagine it without it.)

07-00-hkfe7-zixv8.mp4

Recap of what I propose

1. No overlap content layout: Reveal image and content container background together, than the content blocks
2. Overlap content layout: Reveal each side individually

[kjellr]

@kjellr How do you feel bringing a variation to reveal each side individually when merchants select the Overlap content layout? I agree for the No overlap, since that content container can wear different color scheme and makes it look like a whole. But for the other layout, I like the idea that it reinforces the organic offset look and feel, I think it could make it look more refined.

We could do this (it does make sense conceptually), but I don't think it's critical to include in this first version. If it's easy enough to do let's go for it, but otherwise I'm happy for us to tackle it in a followup later on.

[metamoni]

Recap of what I propose
No overlap content layout: Reveal image and content container background together, than the content blocks
Overlap content layout: Reveal each side individually

@melissaperreault, @kjellr this sounds like a great idea and I don't image it would be difficult to do. However, we don't have the "cascading" CSS in this PR, and adding that would change the scope a bit. The CSS that will handle delayed animation will be part of this PR (draft) and will need to be reviewed and tested before we can introduce it into other sections.

I'd like to keep PRs small and perfect the cascading animation first, so let's leave the overlap content layout for a separate PR. When we come back to it, it should be a very short and easy task.

[kjellr]

I'd like to keep PRs small and perfect the cascading animation first, so let's leave the overlap content layout for a separate PR. When we come back to it, it should be a very short and easy task.

Sounds good, thanks @metamoni!

[stufreen]

A couple last requests, let me know if you want to discuss any of them!

[melissaperreault]

Thank you @metamoni, I opened the issue here #2375