[Cards and Buttons] "Vertical lift" effect on hover #2575

kjellr · 2023-04-26T14:41:11Z

PR Summary:

Adds a simple "raise" effect to buttons and cards on hover.

Why are these changes introduced?

Closes #2574.

What approach did you take?

Piggybacks on the work done in #2452. Uses the same control in Theme Settings, and applies a different set of rules to just simply raise the elements on hover.

Visual impact on existing themes

When merchants visit Theme Settings > Animation, and choose the "Vertical lift" hover effect, cards and buttons will each. get a little "bump" effect on hover:

raise.mp4

Testing steps/scenarios

Visit the Theme Settings > Animations
Select "Vertical lift" from the "Hover Effect" dropdown.
Note that the raise effect is applied to buttons and cards throughout the storefront.

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

melissaperreault · 2023-04-26T16:25:38Z

assets/base.css

+  .animate--hover-raise .customer button,
+  .animate--hover-raise .shopify-payment-button__button,
+  .animate--hover-raise .deferred-media__poster-button {
+    transition: transform var(--duration-long) cubic-bezier(0,0,.35,1);


I wonder if for this one we could pick the --duration-default instead of the long one. That could make this option snappier!

I adjusted this in d3718a0. It felt too quick for larger elements like cards, but it felt okay for buttons. So I've only applied the --duration-default to buttons for now. I'm not sure how I feel about it yet — let me know what you think.

Yeah - I agree on larger containers the original duration looks smoother. For buttons it felt slow and fuzzy, I'll look at it with fresh eyes tomorrow!

melissaperreault · 2023-04-26T17:13:49Z

🙏 I wish we could decouple in the future the grow and raise on the buttons! It's ok for now but I can see this as an improvement opportunity while we actively polish the experience overall!

stufreen

Code LGTM with one suggestions

assets/base.css

kimberlyoleiro · 2023-04-26T18:24:58Z

I agree with @melissaperreault here. The grow + raise almost appears wavy to me. Like my eye is catching an odd movement.

Notice it a lot on the product cards and the add-to-cart button on PDP

locales/en.default.schema.json

melissaperreault

Thanks Kjell! Adding notes, some we already discussed together:

3D lift left over: The video and 3D model buttons look like they will fall down.

26-48-o14vp-60r4x.mp4

Raise: The video and 3D model buttons only grow more instead of lifting up like it does well on the Video section

26-50-e9hgt-r5iry.mp4

Collage video block: no animations happens on the Play button BUT this preexisted this.
Collage block's height has changed. Unsure when this got introduced but it's not on main when I checked. When you hide or remove the image block, the other blocks are shorter than expected. (Video reference)

kjellr · 2023-04-26T19:07:04Z

@melissaperreault + @kimberlyoleiro I've pushed an update that removes the expanding border for buttons. Let me know if that seems a little better for you. I'm not totally sold on it yet — the hover effect seems pretty subtle without the border size change.

hovers.mp4

melissaperreault · 2023-04-27T03:03:39Z

I've pushed an update that removes the expanding border for buttons

I don't dislike it! One note though is that I am not sure the change applied to all buttons, you can see some growing border on this one below for instance, from the Featured collection section.

26-59-q2iwa-5cy1k.mp4

kjellr · 2023-05-16T15:20:00Z

I fixed up the bugs that @melissaperreault found above, so this should be ready for another round of reviews!

I changed the name of the feature to "Vertical lift", which I think pairs nicely with our existing "3d lift" nomenclature.

kjellr · 2023-05-16T15:22:36Z

Collage block's height has changed. Unsure when this got introduced but it's not on main when I checked. When you hide or remove the image block, the other blocks are shorter than expected. (Video reference)

This could use a gut check from someone else, but I don't think it's related — I'm seeing it on other PRs too.

kjellr · 2023-05-22T13:44:23Z

Thanks for finding those, @melissaperreault! All should be fixed now.

I also sped up the card animation slightly. I'm very hesitant to go much faster than that since it can be quite jarring to move around a large element like a card on hover. I'm trying to also sync up with our scroll animations, which are a bit smoother and less quick than some of the pre-existing ones.

This PR should be ready for another round of testing!

ludoboludo

Looking good 👍

assets/base.css

ludoboludo

It's lot of selectors repetition and would be nice to have something a bit cleaner but not sure how. There are specific properties for each scenario, etc.

We should keep an eye on this to see how it behaves with our potential gradient fix we're looking into merging for the release branch.

melissaperreault · 2023-06-05T18:49:12Z

Hey! Catching up on reviewing this piece! 😓
have we removed expanding the border on hover when we lift or decided to keep it? Asking because it's perceivable and I can't track what was the latest update on that. Thanks!

kjellr · 2023-06-05T20:11:16Z

have we removed expanding the border on hover when we lift or decided to keep it?

It was supposed to be removed, but it looks like it came back. 😩 I'll try to take a look and see what happened soon.

kjellr · 2023-06-06T14:21:22Z

@melissaperreault Should be ready for another review. I think I eliminated the border change in most circumstances. However, I still see the slightest bit of movement in some areas when the border size/radius/shadows are increased for buttons. I'm not sure what's causing it, or how to target it.

Even outside of this PR, I see the border width increase just a very tiny bit when I just increase the border shadow opacity by itself, so I think there's some existing weirdness there. Here's a zoomed-in example.

ludoboludo

Still looks pretty good to me 👍

I don't really see the issue with the border 😓

In niche scenarios, Safari struggles to deal with animated elements/cards and overlaps.
It can be fixed with will-change: transform; but it's known as something not to overuse. I think we could consider using it later if we see merchants running into those issues often.

melissaperreault

Took another look! thank you for all the care again! LGTM! 🎉

KaichenWang

Looks great!!

assets/base.css

KaichenWang · 2023-06-16T10:30:17Z

assets/base.css

+  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
+  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
+  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
+    --border-offset: 0.3px; /* Prevent the border from growing on buttons when this effect is on. */


Could we add to the comment and explain how we calculated the 0.3px value?

Good call. The original default value here is (quite oddly) 1.3px, as defined up here. We're not clearing it entirely because it ends up jumping a bit if we do, but we're removing 1px. I added a comment to clarify. 👍

Co-authored-by: Kai <KaichenWang@users.noreply.github.com>

kjellr · 2023-06-21T20:11:25Z

I was about to merge this, but something weird is happening with outline buttons:

The outline is supposed to stay the same, not disappear. I'm not going to have time to troubleshoot this week, but if someone else does feel free to take a look!

kmeleta · 2023-06-22T18:12:02Z

I was about to merge this, but something weird is happening with outline buttons

Seems to be a mercifully harmless issue. Just a little custom properties gotcha (fixed here 2522854). I don't have all the context around the decisions made here though, so please give it a look and verify outline buttons are hovering how we expect now @kjell

kjellr · 2023-06-22T19:13:41Z

@kmeleta Ah yes, thanks for the fix! We just updated that here — looks like it wasn't a good idea after all. We should be all set to go now.

Thanks everyone for your help getting this across the finish line! 🙌

* Add raise effect. * Try removing the growing borders on hover. * Create a new variable for the easing. * Adjust animation speed. * Remove payment button animations. * Remove box shadow from filled buttons on hover. * Rename "Raise" to "Vertical lift" * Update 14 translation files * Update 6 translation files * Tidy up hover states. * Try a faster card animation speed. * Add an active state. * Remove duplicate rule. * Try fixing hover states. * Update assets/base.css Co-authored-by: Kai <KaichenWang@users.noreply.github.com> * Update code comment. * Fix button border offset value --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Kai <KaichenWang@users.noreply.github.com> Co-authored-by: Ken Meleta <ken.meleta@shopify.com>

Add raise effect.

2c92483

kjellr requested review from stufreen, melissaperreault, ludoboludo and LucasLacerdaUX April 26, 2023 14:41

kjellr self-assigned this Apr 26, 2023

melissaperreault reviewed Apr 26, 2023

View reviewed changes

stufreen approved these changes Apr 26, 2023

View reviewed changes

assets/base.css Outdated Show resolved Hide resolved

melissaperreault reviewed Apr 26, 2023

View reviewed changes

locales/en.default.schema.json Outdated Show resolved Hide resolved

kjellr added 2 commits April 26, 2023 14:50

Try removing the growing borders on hover.

d4594b8

Create a new variable for the easing.

ca9883a

melissaperreault reviewed Apr 26, 2023

View reviewed changes

Adjust animation speed.

d3718a0

ludoboludo removed their request for review April 26, 2023 20:58

kjellr mentioned this pull request Apr 27, 2023

[Animations] Fix deferred media button hovers when 3D Lift is active #2582

Merged

8 tasks

kjellr added 4 commits May 16, 2023 10:06

Merge branch 'main' into animate-raise-hover

42e8a07

Remove payment button animations.

f477785

Remove box shadow from filled buttons on hover.

0491369

Rename "Raise" to "Vertical lift"

6409a43

kjellr requested review from melissaperreault and ludoboludo May 16, 2023 15:20

kjellr changed the title ~~[Cards and Buttons] "Raise" effect on hover~~ [Cards and Buttons] "Vertical lift" effect on hover May 16, 2023

melissaperreault requested review from stufreen and removed request for stufreen May 16, 2023 20:24

kjellr added 2 commits May 22, 2023 09:33

Tidy up hover states.

49fdd92

Try a faster card animation speed.

e63fc08

Merge branch 'main' into animate-raise-hover

2ecad4f

ludoboludo reviewed May 23, 2023

View reviewed changes

assets/base.css Show resolved Hide resolved

Add an active state.

6568052

kjellr requested a review from ludoboludo May 23, 2023 17:37

ludoboludo approved these changes May 23, 2023

View reviewed changes

kjellr and others added 2 commits May 23, 2023 14:23

Remove duplicate rule.

fbcea54

Merge branch 'main' into animate-raise-hover

9372cfe

kjellr and others added 2 commits June 6, 2023 10:12

Try fixing hover states.

cca90d4

Merge branch 'main' into animate-raise-hover

468c837

ludoboludo approved these changes Jun 7, 2023

View reviewed changes

Merge branch 'main' into animate-raise-hover

7328a01

melissaperreault approved these changes Jun 7, 2023

View reviewed changes

kimberlyoleiro requested review from KaichenWang and removed request for LucasLacerdaUX June 12, 2023 15:43

KaichenWang approved these changes Jun 16, 2023

View reviewed changes

kjellr and others added 2 commits June 20, 2023 08:32

Update assets/base.css

cd14c4d

Co-authored-by: Kai <KaichenWang@users.noreply.github.com>

Update code comment.

12478c8

Fix button border offset value

2522854

kjellr merged commit 47b4864 into main Jun 22, 2023

kjellr deleted the animate-raise-hover branch June 22, 2023 19:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Cards and Buttons] "Vertical lift" effect on hover #2575

[Cards and Buttons] "Vertical lift" effect on hover #2575

kjellr commented Apr 26, 2023 •

edited

Loading

melissaperreault Apr 26, 2023

kjellr Apr 26, 2023

melissaperreault Apr 27, 2023

melissaperreault commented Apr 26, 2023

stufreen left a comment

kimberlyoleiro commented Apr 26, 2023

melissaperreault left a comment •

edited by kjellr

Loading

kjellr commented Apr 26, 2023

melissaperreault commented Apr 27, 2023

kjellr commented May 16, 2023

kjellr commented May 16, 2023 •

edited

Loading

kjellr commented May 22, 2023

ludoboludo left a comment

ludoboludo left a comment •

edited

Loading

melissaperreault commented Jun 5, 2023 •

edited

Loading

kjellr commented Jun 5, 2023

kjellr commented Jun 6, 2023

ludoboludo left a comment •

edited

Loading

melissaperreault left a comment

KaichenWang left a comment

KaichenWang Jun 16, 2023

kjellr Jun 21, 2023

kjellr commented Jun 21, 2023 •

edited

Loading

kmeleta commented Jun 22, 2023

kjellr commented Jun 22, 2023

[Cards and Buttons] "Vertical lift" effect on hover #2575

[Cards and Buttons] "Vertical lift" effect on hover #2575

Conversation

kjellr commented Apr 26, 2023 • edited Loading

PR Summary:

Why are these changes introduced?

What approach did you take?

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

melissaperreault Apr 26, 2023

Choose a reason for hiding this comment

kjellr Apr 26, 2023

Choose a reason for hiding this comment

melissaperreault Apr 27, 2023

Choose a reason for hiding this comment

melissaperreault commented Apr 26, 2023

stufreen left a comment

Choose a reason for hiding this comment

kimberlyoleiro commented Apr 26, 2023

melissaperreault left a comment • edited by kjellr Loading

Choose a reason for hiding this comment

kjellr commented Apr 26, 2023

melissaperreault commented Apr 27, 2023

kjellr commented May 16, 2023

kjellr commented May 16, 2023 • edited Loading

kjellr commented May 22, 2023

ludoboludo left a comment

Choose a reason for hiding this comment

ludoboludo left a comment • edited Loading

Choose a reason for hiding this comment

melissaperreault commented Jun 5, 2023 • edited Loading

kjellr commented Jun 5, 2023

kjellr commented Jun 6, 2023

ludoboludo left a comment • edited Loading

Choose a reason for hiding this comment

melissaperreault left a comment

Choose a reason for hiding this comment

KaichenWang left a comment

Choose a reason for hiding this comment

KaichenWang Jun 16, 2023

Choose a reason for hiding this comment

kjellr Jun 21, 2023

Choose a reason for hiding this comment

kjellr commented Jun 21, 2023 • edited Loading

kmeleta commented Jun 22, 2023

kjellr commented Jun 22, 2023

kjellr commented Apr 26, 2023 •

edited

Loading

melissaperreault left a comment •

edited by kjellr

Loading

kjellr commented May 16, 2023 •

edited

Loading

ludoboludo left a comment •

edited

Loading

melissaperreault commented Jun 5, 2023 •

edited

Loading

ludoboludo left a comment •

edited

Loading

kjellr commented Jun 21, 2023 •

edited

Loading