Fine-tune the slideIn animation #2499

kjellr · 2023-04-06T14:54:48Z

PR Summary:

Minor adjustments to the slideIn scroll animation. Intent is to strike a natural-feeling balance between subtle and apparent.

Video Comparison

Before:

original.mp4

After:

new.mp4

What approach did you take?

Decreasing the translateY distance, in an effort to tone down the overall motion.
Decreasing the speed of the animation from --duration-extra-long to a new --duration-medium value. (The standalone animate--fade-in speed remains the same, since that animation tends to cover larger areas).

Testing steps/scenarios

Visit the demo store, scroll around.
Compare to the existing animation here.

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-06T16:36:10Z

assets/base.css

@@ -3302,7 +3302,7 @@ details-disclosure > details {

  @keyframes slideIn {
    from {
-      transform: translateY(10vh);
+      transform: translateY(3rem);


It's much better with this 👍

I wonder if we should also reduce the speed at which the animation run 🤔 I think first visits are fine but then when you keep navigating, you don't want to have the user to start wondering weather it's the time it takes for things to load or if we're slowing down their experience for the sake of animation.

What do you think ? I find --duration-default to be pretty decent.

--duration-default felt a little too fast to me. I pushed a compromise in 128ad25 — let me know how that feels to you.

Yeah it's looking nice 👌 Should be a good starting point and we can tune it more in the future if needed 👍

Great! I've taken this out of draft and opened it up for reviews. 🌟

ludoboludo

Looking good, just have one comment

ludoboludo · 2023-04-07T13:53:05Z

assets/base.css

@@ -744,9 +744,10 @@ details > * {
 :root {
  --duration-short: 100ms;
  --duration-default: 200ms;
+  --duration-medium: 400ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;


Now do we want to keep the long duration for later or remove it for now since it's not used anymore ?

The long duration is still used for product card hovers (we can probably re-evaluate that later... I suspect that this new 400ms one will also work there). The extra-long duration is also still used when we fade-in large items on scroll, so they don't appear to flash.

I think extra-long was only used for the new animations, right? Can it be removed?

We're still using extra-long for the standalone opacity fade-in. We use this for large images, and I found it starts to seem like flashing when we move to anything quicker.

stufreen

LGTM. I think it's a bit snappier.

One thing you could experiment with is different easings, but longer durations... I find cubic bezier better for things like this because it takes a bit more time settling into place. E.g. https://cubic-bezier.com/#.17,.67,.55,.98

stufreen · 2023-04-10T14:22:41Z

assets/base.css

@@ -744,9 +744,10 @@ details > * {
 :root {
  --duration-short: 100ms;
  --duration-default: 200ms;
+  --duration-medium: 400ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;


I think extra-long was only used for the new animations, right? Can it be removed?

kjellr · 2023-04-10T19:48:29Z

While the improvement here felt pretty good, I thought I'd try another pass using @stufreen's cubic-bezier() suggestion. In aba46c1, I used a slightly longer transition, with a tweaked version of ease-out. I also slightly shortened the timing for items that cascade in:

10-49-emjrb-i79wx.mp4

This version feels pretty good to me too. If you're scrolling slow, the animation is there but not overwhelming. If you're scrolling quickly, the animation's pretty subtle, and I kinda like that.

Give it a try and let me know what you think! It might also be worth testing this once #2405 and #2410 are merged in so we have a better sense of it all.

stufreen

Looks great! Subtly better now

ludoboludo · 2023-04-11T16:45:53Z

assets/base.css

@@ -746,7 +746,7 @@ details > * {
  --duration-default: 200ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
-  --animation-slide-in: slideIn var(--duration-extra-long) ease-out forwards;
+  --animation-slide-in: slideIn var(--duration-extra-long) cubic-bezier(0,0,.3,1) forwards;


With the cubic bezier approach we could have a future in which we offer different slide in animations. Bouncy, linear, etc.
Video

* Fine-tune the slideIn animation. * Adjust speed of the animation. * Use cubic-bezier easing. * Slow down the animation very slightly.

Fine-tune the slideIn animation.

2b72f2a

kjellr self-assigned this Apr 6, 2023

ludoboludo reviewed Apr 6, 2023

View reviewed changes

kjellr and others added 2 commits April 6, 2023 14:50

Adjust speed of the animation.

128ad25

Merge branch 'main' into fine-tune-slide-animation

f9bb7bc

kjellr requested review from stufreen, metamoni and melissaperreault April 7, 2023 11:41

kjellr added the Category: Enhancement New feature or request label Apr 7, 2023

kjellr requested a review from ludoboludo April 7, 2023 11:42

kjellr marked this pull request as ready for review April 7, 2023 11:43

ludoboludo approved these changes Apr 7, 2023

View reviewed changes

metamoni approved these changes Apr 10, 2023

View reviewed changes

stufreen approved these changes Apr 10, 2023

View reviewed changes

Use cubic-bezier easing.

aba46c1

kjellr added 3 commits April 11, 2023 08:18

Merge branch 'main' into fine-tune-slide-animation

be6a5eb

Merge branch 'main' into fine-tune-slide-animation

86ddac3

Slow down the animation very slightly.

57387fd

stufreen approved these changes Apr 11, 2023

View reviewed changes

ludoboludo approved these changes Apr 11, 2023

View reviewed changes

kjellr merged commit f4cd8a1 into main Apr 11, 2023

kjellr deleted the fine-tune-slide-animation branch April 11, 2023 19:02

kimberlyoleiro added the motion label May 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fine-tune the slideIn animation #2499

Fine-tune the slideIn animation #2499

kjellr commented Apr 6, 2023 •

edited

Loading

ludoboludo Apr 6, 2023

kjellr Apr 6, 2023

ludoboludo Apr 6, 2023

kjellr Apr 7, 2023

ludoboludo left a comment

ludoboludo Apr 7, 2023

kjellr Apr 7, 2023

stufreen Apr 10, 2023

kjellr Apr 10, 2023

stufreen left a comment

stufreen Apr 10, 2023

kjellr commented Apr 10, 2023 •

edited

Loading

stufreen left a comment

ludoboludo Apr 11, 2023

Fine-tune the slideIn animation #2499

Fine-tune the slideIn animation #2499

Conversation

kjellr commented Apr 6, 2023 • edited Loading

PR Summary:

Before:

After:

What approach did you take?

Testing steps/scenarios

Demo links

Checklist

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 left a 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

stufreen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr commented Apr 10, 2023 • edited Loading

stufreen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr commented Apr 6, 2023 •

edited

Loading

kjellr commented Apr 10, 2023 •

edited

Loading