Try adding global scroll animations to Dawn #2141

kjellr · 2022-11-22T15:24:15Z

PR Summary:

This PR adds basic reveal animations to Dawn.

Here's how it looks:

scroll-animation.mp4

What approach did you take?

The reveal animations are turned on globally via a single checkbox in Theme Settings. The PR uses a light Javascript IteractionObserver to add a scrolled-into-view class to various elements. This triggers a light CSS animation.

Some additional notes:

The JS was lifted from @stufreen's stu/scroll-trigger branch.
It respects prefers-reduced-motion, and turns itself off if the no-js class is present.
Some elements (cards, for example) are set to load in sequentially. ~~The nth-child() logic could use some close 👀 — every now and then the load order isn't 100% left-to-right as expected.~~ (Fixed in 514e3f0)
I couldn't figure out where exactly to place the "Motion" item sequentially within Theme Settings — the order there feels a bit random

Followup tasks:

In general, some bug hunting.
Test with no Javascript
In the editor, new sections appear invisible when they're added in.
Test with an eye for potential special cases. (For example, do we want to modify the animation for a specific section?)

Visual impact on existing themes

None at this point — this is currently built as an opt-in. We should re-visit this though before launch.

Testing steps/scenarios

Visit the demo store.
Visit Theme Settings > Motion
Check the "Reveal sections on scroll" checkbox.
Scroll around and find bugs!

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 · 2022-11-22T15:29:08Z

assets/animations.js

+    window.addEventListener('scroll', animateIn);
+    animateIn();
+    function animateIn() {
+        var elements = document.querySelectorAll('.section, .banner__box, .product__info-wrapper');


In addition to .section here, I'm targeting .banner__box, and .product__info-wrapper, so that I can provide more fine-tuned animations for cases when those sections are at the top of the page and visible by default.

For example, with the product page, it gets overwhelming if the entire product image animates in. So that gets filtered out here, while the .product__info-wrapper remains animated. This works for now, but can definitely be refined.

clauderic

Love the overall effect! I just have a comment on the approach from a technical perspective.

On the overall UX: on one hand, I love the simplicity of having a single on/off setting. I don't want to open a can of worms, but I can't help but wonder if we should offer any other options. I've seen a lot of sites that re-play the animation when the section has scrolled out of the viewport and is scrolled back into view.

Things we could consider opening up:

Type of animation (fade in, fade up, fade down, etc.)
Whether animations should play only once or every time they appear into the viewport

I also think this would be a good use-case for overrides in the future.

assets/animations.js

ludoboludo · 2022-11-24T21:42:14Z

Some cool things that we could look into using when they become available and widely supported:

kjellr · 2022-11-28T16:36:26Z

On the overall UX: on one hand, I love the simplicity of having a single on/off setting. I don't want to open a can of worms, but I can't help but wonder if we should offer any other options. I've seen a lot of sites that re-play the animation when the section has scrolled out of the viewport and is scrolled back into view.

Yeah, I agree there's lots of room for additional variations here. But I think it makes sense to focus in on what we think the best default experience is, build that in, and then scale up with more variants in the future. That'll get us to launch quicker, and fulfill the needs of most merchants who normally wouldn't bother digging into settings for this sort of thing.

Some cool things that we could look into using when they become available and widely supported...

Very cool, @ludoboludo! Definitely good to keep an eye on those features. 🌟

stufreen · 2023-01-18T14:08:39Z

assets/base.css

+/* Animations */
+
+.animate {
+  transition: opacity 0.55s ease-in-out;


You can experiment with the cubic-bezier easing function instead of ease-in-out if you want more control. This web app is a neat tool I just found: https://cubic-bezier.com/#.17,.51,.31,1

stufreen · 2023-01-18T14:19:01Z

assets/animations.js

+            entry.target.classList.add('animate');
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate--active');
+            }


Using an intersection observer to add a class to animated elements seems like a good approach to me 👍

I think in the final implementation we will want to separate the concerns a bit more. Instead of adding an animate class here we will add a scrolled-into-view class, and elsewhere (i.e. in the css for the elements themselves) we can decide how to interpret that.

kjellr · 2023-02-14T15:42:43Z

I've updated the approach in this PR to allow for sequential loading of certain items (cards, etc.). This borrows the approach that @stufreen explored in stu/scroll-trigger, and also tidies up some of the animation to prevent the flashing that would occur on initial page load.

The approach here is a bit more complicated than the initial one that this PR used, but it's also far less heavy-handed. It allows us to fine-tune animation for specific sections and elements as needed.

I've updated the PR description to reflect the new method, and included a list of follow-up tasks. 🎉

kjellr · 2023-02-16T17:58:12Z

A few new updates yesterday:

Fixed no-js behavior.
Fixed nth-child rules so things more reliably load in left-to-right.
Added light animation to a bunch of Sections I’d missed the first time around.
Set slideshow content to borrow the slide-up animation when slides are revealed. We can fine-tune these, but they're working now.

15-54-9kg0n-mh1av.mp4

kjellr · 2023-02-21T20:43:16Z

Oh wow, I see it now. Ok cool, that's 100% a bug. 😄 Thanks!

translation-platform · 2024-05-15T14:42:36Z

locales/en.default.schema.json

@@ -257,6 +257,14 @@
        }
      }
    },
+    "motion": {
+      "name": "Motion",


Localization quality issue found

The following issues may affect the quality of localized translations if they are not addressed:

The value Motion for key settings_schema.motion.name is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.

Please look out for other instances of this issue in your PR and fix them as well if possible.

Questions about these messages? Hop in the #help-localization Slack channel.

Try scroll animations

ec1fb62

kjellr self-assigned this Nov 22, 2022

kjellr commented Nov 22, 2022

View reviewed changes

Sync up transition and animation timing.

d50d814

clauderic reviewed Nov 22, 2022

View reviewed changes

assets/animations.js Outdated Show resolved Hide resolved

kjellr added 2 commits November 28, 2022 08:27

Merge branch 'main' into try/scoll-animations

92dbfca

Switch to using IntersectionObserver

9fb3ac1

Merge branch 'main' into try/scoll-animations

cac45e9

stufreen reviewed Jan 18, 2023

View reviewed changes

kjellr added 4 commits February 13, 2023 14:41

Merge branch 'main' into try/scoll-animations

de2d5cd

Stick to the end state of the animation.

4880e8f

Revise animation appproach.

3d1bbb2

Merge branch 'main' into try/scoll-animations

82368fc

kjellr marked this pull request as ready for review February 14, 2023 15:36

kjellr added 10 commits February 14, 2023 10:45

Fix some find & replace errors.

30469e4

Fix nth-child rules.

514e3f0

Fix behavior when Javascript is turned off.

ea6ad7f

Fade in the image image banners.

0c1b406

Animate the slideshow Section.

9f16c7e

Animate the collapsible content Section.

79f9c7a

Animate the Multirow Section

df33e7b

Animate the newsletter block.

142a2c3

Animate the featured product section.

2775766

Animate slideshow slides when they're changed.

269d577

kjellr mentioned this pull request Feb 15, 2023

[Product Cards] Add image masks #2302

Merged

8 tasks

Fix image banner animation.

8fcc99a

kjellr mentioned this pull request Mar 6, 2023

add scroll animation to image banner and image with text #2362

Merged

14 tasks

Fix typo.

3c11a40

This was referenced Mar 15, 2023

Animate featured product and product info #2405

Merged

Animate rich text and email signup #2408

Merged

Animate multicolumn #2409

Merged

animate Collage and Slideshow on scroll #2410

Merged

This was referenced Mar 17, 2023

[Footer] Add cascading fade in on scroll animation #2422

Closed

[Video] Add fade in on scroll animation #2423

Closed

melissaperreault mentioned this pull request Mar 18, 2023

[Multirow] Add cascading fade in on scroll animation #2426

Closed

3 tasks

This was referenced Apr 13, 2023

Animate the footer section #2521

Merged

Animate Featured Blog and Collection List sections #2522

Merged

Animate the multirow section #2526

Merged

kimberlyoleiro added Category: Enhancement New feature or request motion labels May 11, 2023

kimberlyoleiro added 🎨 Design: Animations Bugs, features or enhancements related to animations and removed motion labels May 18, 2023

translation-platform bot reviewed May 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try adding global scroll animations to Dawn #2141

Try adding global scroll animations to Dawn #2141

kjellr commented Nov 22, 2022 •

edited

Loading

kjellr Nov 22, 2022 •

edited

Loading

clauderic left a comment •

edited

Loading

ludoboludo commented Nov 24, 2022

kjellr commented Nov 28, 2022

stufreen Jan 18, 2023

stufreen Jan 18, 2023

kjellr commented Feb 14, 2023

kjellr commented Feb 16, 2023

kjellr commented Feb 21, 2023 •

edited

Loading

translation-platform bot May 15, 2024

Try adding global scroll animations to Dawn #2141

Are you sure you want to change the base?

Try adding global scroll animations to Dawn #2141

Conversation

kjellr commented Nov 22, 2022 • edited Loading

PR Summary:

What approach did you take?

Visual impact on existing themes

Testing steps/scenarios

Checklist

kjellr Nov 22, 2022 • edited Loading

Choose a reason for hiding this comment

clauderic left a comment • edited Loading

Choose a reason for hiding this comment

ludoboludo commented Nov 24, 2022

kjellr commented Nov 28, 2022

stufreen Jan 18, 2023

Choose a reason for hiding this comment

stufreen Jan 18, 2023

Choose a reason for hiding this comment

kjellr commented Feb 14, 2023

kjellr commented Feb 16, 2023

kjellr commented Feb 21, 2023 • edited Loading

translation-platform bot May 15, 2024

Choose a reason for hiding this comment

kjellr commented Nov 22, 2022 •

edited

Loading

kjellr Nov 22, 2022 •

edited

Loading

clauderic left a comment •

edited

Loading

kjellr commented Feb 21, 2023 •

edited

Loading