[Templates] Animate blog, blog post, page, and collection templates #2533

kjellr · 2023-04-14T17:11:46Z

PR Summary:

This PR adds scroll animations to the Blog, Blog Post, Page, and Collection Templates.

Why are these changes introduced?

Part of #2381.

What approach did you take?

This applies animations in a uniform way across these pages:

Page headings (and associated top-of-the-page content like blog post images, filters, and collection images) fade in.
The rest of the template content slides in on scroll.

Visual impact on existing themes

When "Reveal sections on scroll" is enabled, the headings and content for these page templates will animate in.

templates-animation.mp4

Testing steps/scenarios

Visit the Blog template.
- Ensure the page header fades in.
- Ensure blog posts slide in sequentially.
Visit the Blog Post template.
- Ensure the title (and other associated title content) fades in.
- Ensure the post content slides in.
- Ensure the comments area slides in.
Visit a Page template.
- Ensure the page header fades in.
- Ensure page content slides in.
Visit the Collection List template.
- Ensure the page header fades in.
- Ensure the list of collections loads in sequentially.
Visit a Collection template.
- Ensure the Collection banner fades in.
- Ensure the filters fade in too.

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

ludoboludo · 2023-04-14T18:49:48Z

sections/main-article.liquid

        <header class="page-width page-width--narrow" {{ block.shopify_attributes }}>
-          <h1 class="article-template__title" itemprop="headline">{{ article.title | escape }}</h1>
+          <h1
+            class="article-template__title{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
+            itemprop="headline"
+          >


Here we might as well have the classes applied on the parent 🤔
Otherwise the date and author won't animate in like the rest.

Edit: I updated it to have the class on the <header> instead 👍

Also I wonder about the usage of fade-in vs slide-in. I was thinking of fade-in as something more specifically for large images like image banner, of the article image in this file. But not for text things.

Is the idea more to fade in when it's at the top of the page ?

Yeah, to keep things more subtle, "fade in when it's at the top of the page" felt right to me. I'd love to hear what @melissaperreault thinks too.

I like the consistency of the approach with slide-in for text and fade-in for bigger/stand alone image scenarios 🤔 Otherwise you get two different behaviours. On the home page each section heading will slide in. Even if you had those sections on templates, they're going to slide in while the template's heading will be fade in.

I'll let Meli weigh in though and make the call with you.

Here's a comparison:

Fade:

fade-in.mp4

Slide:

slide-in.mp4

Looking at these again reinforced my feeling that the fade-in is more appropriate for the above-the-fold "header" content. When navigating through pages with slide-in, it feels quite repetitive. The fade-in feels more grounded, and helps separates out the "content" from the page structure around the content.

The main thing for me here is that we're assuming the image banner or slideshow are going to be the first section of the home page.
Any other section isn't using fade-in. And when that's the case the consistency is lost...
So I find it hard to use an approach for the rest of our templates based on specific order of sections on the home page 🤔
I agree that'd it be nice to be able to apply the same approach across the board for things above the fold but it's not something we can do today unless it's through JS and that would impact our performance.

slidein.fadein.mp4

Similar thing if merchants use a section above the template to gain more control. For example here, using a rich text section linked to a dynamic source (title of the collection):

sectionOnTemplates.mp4

It seems fine to me — we're optimizing for the default, and most common use case. If the merchant strays from that the other animations still look ok, they're just a little more subtle.

Sounds good, that's fine by me. Just wanted to make sure we're aware that its the case.

Also there isn't really a default for the home page. We do have the image banner as a default first section for Dawn (different depending on the theme, image with text, collage, richtext, featured product are all section that are the default first section) but I don't think we can assume that it's default.

As you said it's fairly subtle so we can move on with this and it's also an easy thing to tweak in the future if it comes up as an issue for merchant and their customers 👍

Got a fix for it in here: #2568 that will be merged in this PR. Or main if we merge this PR before then 👍

ludoboludo · 2023-04-14T18:58:25Z

sections/main-blog.liquid

+          {% if settings.animations_reveal_on_scroll %}
+            data-cascade
+          {% endif %}
+        >
          {%- render 'article-card',


One thing that isn't animated in here is the pagination. There is maybe an issue to add it to it 🤔
I think in some cases we're animating the container like in the comments for main-article.liquid.

sections/main-article.liquid

sections/main-collection-banner.liquid

ludoboludo · 2023-04-14T19:06:06Z

sections/main-collection-banner.liquid

    }
  }
 {%- endstyle -%}

 <div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
-  <div class="collection-hero__inner page-width">
+  <div class="collection-hero__inner page-width {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">


Similar question here. Should we consider doing a slide in on the collection-hero__text-wrapper that contains the title and description and then fade-in for the collection-hero__image-container 🤔

stufreen

Code LGTM. I will leave the design questions for others, although to my eyes it looks good like this when navigating around the site. On hard reload I don't care for the animations, but when you're clicking between pages it really adds a SPA feel to the experience. Having the header text fade in somehow supports this feeling.

ludoboludo

Just putting this as a blocker so we can be ok with the current inconsistencies (my comment below) 👍
Once we're ok with it or decide to take a different approach I can change my review to ✅

ludoboludo · 2023-04-25T14:14:21Z

sections/main-article.liquid

        <header class="page-width page-width--narrow" {{ block.shopify_attributes }}>
-          <h1 class="article-template__title" itemprop="headline">{{ article.title | escape }}</h1>
+          <h1
+            class="article-template__title{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
+            itemprop="headline"
+          >


The main thing for me here is that we're assuming the image banner or slideshow are going to be the first section of the home page.
Any other section isn't using fade-in. And when that's the case the consistency is lost...
So I find it hard to use an approach for the rest of our templates based on specific order of sections on the home page 🤔
I agree that'd it be nice to be able to apply the same approach across the board for things above the fold but it's not something we can do today unless it's through JS and that would impact our performance.

slidein.fadein.mp4

kjellr · 2023-04-25T17:06:50Z

Just a heads up that I updated this from main, and the animations are no longer working. 😩 @ludoboludo any idea what's going on there?

melissaperreault · 2023-04-26T01:50:08Z

After thinking through this here is my POV, once we can retest again:

Let's move on with this approach for now and learn more as we observe how merchants use those settings combined with their layout choices.

We are currently unaware of the order in which merchants prioritize their website sections. As a result, we made assumptions about the larger image sections, which we believe are typically displayed at the top of the homepage or other pages like the About Us page. Additionally, we are uncertain if merchants tend to add other types of sections to their Collection template. This makes the current fade in a good bet for now!
I agree that fading in is a more subtle approach to page loading. It helps create a smoother appearance of the elements on the screen, rather than focusing on consistent application across similar elements. However, I am unsure if buyers would perceive the difference, as it is a subtle change.
We can revisit this issue when we have greater control and more insights.

Question
Do we know if we'll be able to target admin pages, the ones like Privacy policy, etc?

kjellr · 2023-04-27T16:27:26Z

Cool — I think this one's good to go as soon as #2568 is resolved. #2533

Do we know if we'll be able to target admin pages, the ones like Privacy policy, etc?

@melissaperreault TBD. We'll use #2576 to track that one.

…hopify#2533) * Animate Collection Banner and Main Collections List * Fade-in filters. * Animate page template. * Animate blog page * Animate article template. * fix spacing and move animation class on the header element for articles * Add cascade style assignment. --------- Co-authored-by: Ludo Segura <ludo.segura@shopify.com>

kjellr added Category: Enhancement New feature or request motion labels Apr 14, 2023

kjellr requested review from stufreen, metamoni, melissaperreault, ludoboludo and LucasLacerdaUX April 14, 2023 17:11

kjellr self-assigned this Apr 14, 2023

kjellr mentioned this pull request Apr 14, 2023

Animate search template #2534

Merged

8 tasks

ludoboludo reviewed Apr 14, 2023

View reviewed changes

stufreen approved these changes Apr 24, 2023

View reviewed changes

metamoni approved these changes Apr 25, 2023

View reviewed changes

ludoboludo requested changes Apr 25, 2023

View reviewed changes

kjellr and others added 7 commits April 25, 2023 14:03

Animate Collection Banner and Main Collections List

327a61f

Fade-in filters.

2d720f5

Animate page template.

548c36b

Animate blog page

aca794b

Animate article template.

f0c7276

fix spacing and move animation class on the header element for articles

67e23b3

Add cascade style assignment.

7eecda6

ludoboludo force-pushed the animate-collection-templates branch from 02e2b22 to 7eecda6 Compare April 25, 2023 18:09

Merge branch 'main' into animate-collection-templates

ba74a55

kjellr requested a review from ludoboludo April 27, 2023 16:27

ludoboludo approved these changes Apr 27, 2023

View reviewed changes

kjellr merged commit 6074825 into main Apr 28, 2023

kjellr deleted the animate-collection-templates branch April 28, 2023 13:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Templates] Animate blog, blog post, page, and collection templates #2533

[Templates] Animate blog, blog post, page, and collection templates #2533

kjellr commented Apr 14, 2023

ludoboludo Apr 14, 2023 •

edited

Loading

ludoboludo Apr 14, 2023

kjellr Apr 23, 2023

ludoboludo Apr 24, 2023

kjellr Apr 25, 2023

ludoboludo Apr 25, 2023

ludoboludo Apr 25, 2023

kjellr Apr 25, 2023

ludoboludo Apr 25, 2023 •

edited

Loading

ludoboludo Apr 25, 2023

ludoboludo Apr 14, 2023

ludoboludo Apr 14, 2023 •

edited

Loading

stufreen left a comment •

edited

Loading

ludoboludo left a comment

ludoboludo Apr 25, 2023

kjellr commented Apr 25, 2023

melissaperreault commented Apr 26, 2023

kjellr commented Apr 27, 2023

[Templates] Animate blog, blog post, page, and collection templates #2533

[Templates] Animate blog, blog post, page, and collection templates #2533

Conversation

kjellr commented Apr 14, 2023

PR Summary:

Why are these changes introduced?

What approach did you take?

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

ludoboludo Apr 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ludoboludo Apr 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ludoboludo Apr 14, 2023 • edited Loading

Choose a reason for hiding this comment

stufreen left a comment • edited Loading

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr commented Apr 25, 2023

melissaperreault commented Apr 26, 2023

kjellr commented Apr 27, 2023

ludoboludo Apr 14, 2023 •

edited

Loading

ludoboludo Apr 25, 2023 •

edited

Loading

ludoboludo Apr 14, 2023 •

edited

Loading

stufreen left a comment •

edited

Loading