[3D lift animation] Raise hovered card above adjacent cards #2589

kjellr · 2023-04-28T15:22:39Z

PR Summary:

Fix shadows cast by cards with 3D Lift enabled

Why are these changes introduced?

As noted over in #2451 (comment), there's a minor bug in the way shadows are cast by cards when the 3D Lift effect is active. The card appears to rise, but its shadow appears behind the adjacent cards. This breaks the illusion, making the effect less effective visually.

What approach did you take?

I added a slightly increased z-index to the parent container of cards and collage items.

We usually apply hover effects to the card-wrapper class, but increasing the z-index there doesn't solve the issue. I had to reach one level higher in the DOM to get the card to actually appear lifted. Not totally ideal, but it's what worked. 🤷

Visual impact on existing themes

Before	After

Before	After

Testing steps/scenarios

Visit the demo store
Visit Theme Settings > Animations, and select the "3d lift" hover effect.
Hover over product cards, ensure they appear to lift above their neighbors.
Hover over collection items, ensure they appear to lift above their neighbors.

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

assets/base.css

ludoboludo

I noticed while playing with shadows that when you have some horizontal shadow using a negative value, it's now showing that shadow on top of the previous card when it wasn't before.

Though not introduced in that PR but with 3D lift. Was that noted before and we're ok with it? I don't think it's a blocker but something for the merchants to figure out.

Due to this: screenshot

ludoboludo · 2023-04-28T18:29:08Z

assets/base.css

@@ -3353,6 +3353,11 @@ details-disclosure > details {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

+  .animate--hover-3d-lift .grid__item:hover,


applying it to grid__item scares me a little. It feels to generic/general. Lots of elements that aren't getting that effect I believe would still be using this class.
So maybe we could be more specific at targeting containers of elements that do have the 3d lift applied to them 🤔

A couple ways we could go about it:

use a selector that is yet to be supported on all browsers, so the experience isn't the same everywhere but it's a "cute" fix not specifically functional. So using grid__item:hover:has(.card, .collection__card, etc)`

target something a bit more specific. collection-list__item, .product-grid .grid__item, .complementary-slide li

👍 I targeted more specific classes in 777fa46. I think I got them all: product grids, collection lists, collage items, blog articles, and complementary products. Let me know if you can think of any other contexts we should hit.

ludoboludo · 2023-04-28T18:32:30Z

assets/base.css

+  .animate--hover-3d-lift .grid__item:hover,
+  .animate--hover-3d-lift .collage__item:hover {
+    z-index: 1; /* Make sure the hovered card is the topmost card. */
+  }


For general shadows we're applying some padding to account for the shadow spread. Which we're not with this and it can cut off the shadow, specifically on sliders: video

Something similar could be useful to look into. Maybe as a follow up for the next release.

Yeah, this would be a good followup. There's a bug with complementary products where the shadow doesn't extend out of its container:

ludoboludo · 2023-04-28T18:37:28Z

assets/base.css

+  .animate--hover-3d-lift .grid__item:hover,
+  .animate--hover-3d-lift .collage__item:hover {
+    z-index: 1; /* Make sure the hovered card is the topmost card. */
+  }


It doesn't target complementary product cards as they're not using a grid__item class:

Good catch. This should be fixed with the combo of 777fa46 and fc40e5e. For the latter, I had to increase the z-index from 1 to 2 to get it to work here. I'm not entirely sure why — 1 worked great in every other context. 🤷

z-index: 2; seem to create its own issue with the search template:

I don't think it's a huge deal. But ideally it doesn't happen. I think one way to go about it, would be to apply on the product-grid, isolation: isolate; so we basically scope the stacking elements and their z-index to this wrapper.

I'n not seeing a negative impact in adding the property so far.

Ah, good call. Added in 0a95ba2 — I haven't found any negative repercussions either. I could scope it to just template-search if we're nervous though.

assets/base.css

bredowmax · 2023-04-29T20:18:39Z

Thanks @kjellr @ludoboludo for opening this ticket!

Currently, it looks like we use box shadow on each of the cards - this creates issues whenever a shadow is larger than the gap between elements/cards because we can't separate the 'z-index' of the card and its shadow.

We already use the drop shadow for the card hover animation. I wonder - is it an option to have a drop shadow on the parent element (i.e. grid)? (Drop shadow vs. box shadow)

I got this working in a Dawn test theme by adding a simple drop shadow filter to the collection grid like this:

ul.grid {
  filter: drop-shadow(2px 4px 6px #00000020);
}

By the way - I noticed that once we sorted out the issue with adjacent cards, having the card hover shadow below adjacent cards actually looks pretty good. This may actually be a viable option because it may prevent cards becoming unreadable when overlapped by shadows?

Shadow below	Shadow above

Shadow exploration, created in Figma

PS:

Browser support: Caniuse states 97.5% support
Performance: I can imagine that performance may suffer - but testing it on my own devices, I haven't felt any difference in performance

kjellr · 2023-05-01T15:42:52Z

assets/base.css

@@ -3200,7 +3200,6 @@ details-disclosure > details {
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
-    z-index: 1;


@ludoboludo Just a heads up: I think we're ok removing this rule entirely for now. We're overriding it for cards with the new changes below, and I don't think it was actually necessary for buttons anyway — they appear to work ok in my testing as-is.

This will fix the 3D Lift portion of #2596.

kjellr · 2023-05-01T19:03:14Z

Thanks @bredowmax!

I wonder - is it an option to have a drop shadow on the parent element (i.e. grid)? (Drop shadow vs. box shadow)

We’re tracking some regressions related to card shadows over in #2596. Applying a shadow to the parent rather than the cards themselves (whether with box-shadow or a filter as you suggest) might help there, but it'd be a relatively big refactor, so we'd probably want to handle it separately from this.

By the way - I noticed that once we sorted out the issue with adjacent cards, having the card hover shadow below adjacent cards actually looks pretty good.

That's similar to how the 3D effect works today, without this PR, right? I think I tend to prefer the hover shadow appearing over the cards, so that it reinforces the "lift" behavior.

melissaperreault

LGTM! 🚢 🎉

ludoboludo

I think it's looking good 👍

kjellr · 2023-05-01T20:39:06Z

assets/base.css

+  .animate--hover-3d-lift .collage__item:hover,
+  .animate--hover-3d-lift .blog-articles .article:hover,
+  .animate--hover-3d-lift .complementary-slide li:hover {
+    z-index: 2; /* Make sure the hovered card is the topmost card. */


One minor downside to this is that z-index isn't (and can't really be) animated along with the rest of the shadow behavior. So when there's a dark shadow that's also big enough to overlap adjacent cards, the shadow kinda "pops" up above on hover, making the animation feel less smooth. For example:

pop.mp4

This isn't too bad, and it also seems like an edge case to me. What we have here should work nicely for the most common types of shadow usage, and it won't effect any of our themes by default.

Yeah, and I think we saw that safari is a bit wonky at showing the shadow on top and removing it. But as you said I think it's an edge case that can be fixed by removing some shadows from cards in the general settings or having more space between them.

stufreen

Just one comment to consider. Personally I'm not sure the flickering effect is better than the shadows being below, but I will leave it to you if you would prefer it. We could add a follow-up issue to revisit if we think it's worthwhile.

stufreen · 2023-05-02T19:05:51Z

assets/base.css

+  .animate--hover-3d-lift .collage__item:hover,
+  .animate--hover-3d-lift .blog-articles .article:hover,
+  .animate--hover-3d-lift .complementary-slide li:hover {
+    z-index: 2; /* Make sure the hovered card is the topmost card. */


Giving the hovered item a bigger z-index does tend to create a flickering effect in some cases since z-index is either 0 or 2. It would be pretty tricky to animate the shadow, though. I can imagine fancy and complicated ways of doing it using two shadows: a top shadow and a bottom shadow that fade in and out depending on hover.

Screen.Recording.2023-05-02.at.3.00.15.PM.mov

kjellr · 2023-05-02T19:57:10Z

Just one comment to consider. Personally I'm not sure the flickering effect is better than the shadows being below, but I will leave it to you if you would prefer it. We could add a follow-up issue to revisit if we think it's worthwhile.

Yeah, I know what you mean. I went back and forth on it myself. We definitely need to do the minor z-index removal up here in order to fix part of #2596. And doing that change alone results in the same flickering we're seeing here anyway. So I think this PR is worthwhile overall for now.

As noted up here, the super heavy shadows that cause this issue are kinda edge cases. They're nothing like what we do in any of our themes by default. When the shadows are smaller, lighter, or nonexistent, this change introduces a positive effect of actually lifting the card above other neighboring cards. I think that's worthwhile for now, and we can continue cleaning up iteratively after release.

…2589) * Raise hovered card above adjacent cards. * Target more specific classes. * Increase the z-index so that complementary slides work. * Only change z-index for hovered articles. * Remove unnecessary z-index rule. * Ensure cards don't overlap search popover. --------- Co-authored-by: Ludo <ludo.segura@shopify.com>

…hopify#2589)" This reverts commit 641ba8e.

* shopify/main: (59 commits) [Announcement bar] Add social icons (Shopify#2497) Update theme version to match the pubic release (Shopify#2698) Add release/v10.0.0 branch fixes to main (Shopify#2693) fix default UI for dropdown and mega menu (Shopify#2644) Fix link formatting in Related Products heading (Shopify#2680) Update 2 translation files (Shopify#2637) Enable gift card recipient form by default on featured product section (Shopify#2666) Gift cards/enable recipient form by default (Shopify#2618) Add a Color Scheme setting for Menus-Header (Shopify#2622) Made mobile drawer full width by default-header (Shopify#2625) Allow multiple announcement bars in Header group (Shopify#2619) [Feat Product] Add rating styling sheet (Shopify#2620) Fix password page variables (Shopify#2607) Fix transform applied when it should not for sliders (Shopify#2606) Modify info string for gift card recipient checkbox (Shopify#2588) [3D lift animation] Raise hovered card above adjacent cards (Shopify#2589) Remove fallback color scheme info text (Shopify#2602) Fix CSS specifity issue to cancel animation for theme editor events (Shopify#2605) Remove settings daya for icon color (Shopify#2601) Follow ups for accessibility of announcements slider (Shopify#2580) ...

Raise hovered card above adjacent cards.

2b1678b

kjellr added Category: Bug Something isn't working motion labels Apr 28, 2023

kjellr requested review from stufreen, melissaperreault, ludoboludo and LucasLacerdaUX April 28, 2023 15:22

kjellr self-assigned this Apr 28, 2023

github-actions bot added the cla-needed label Apr 28, 2023

kjellr commented Apr 28, 2023

View reviewed changes

assets/base.css Show resolved Hide resolved

kjellr force-pushed the fix-hover-state-for-3d-lift branch from 9c9a2fd to 2b1678b Compare April 28, 2023 15:26

github-actions bot removed the cla-needed label Apr 28, 2023

kjellr mentioned this pull request Apr 28, 2023

[Cards and Buttons] 3D "Lift" effect on hover #2451

Closed

ludoboludo reviewed Apr 28, 2023

View reviewed changes

kjellr and others added 3 commits April 28, 2023 15:55

Target more specific classes.

777fa46

Merge branch 'main' into fix-hover-state-for-3d-lift

9131f00

Increase the z-index so that complementary slides work.

fc40e5e

ludoboludo reviewed Apr 28, 2023

View reviewed changes

assets/base.css Outdated Show resolved Hide resolved

Only change z-index for hovered articles.

0cdd592

kjellr and others added 2 commits May 1, 2023 11:26

Merge branch 'main' into fix-hover-state-for-3d-lift

3ac04c4

Remove unnecessary z-index rule.

a427f0e

kjellr commented May 1, 2023

View reviewed changes

kjellr requested a review from ludoboludo May 1, 2023 15:52

Merge branch 'main' into fix-hover-state-for-3d-lift

459227f

Ensure cards don't overlap search popover.

0a95ba2

melissaperreault approved these changes May 1, 2023

View reviewed changes

kjellr mentioned this pull request May 1, 2023

[Product Cards] Regression in visual appearance of product card shadows #2596

Open

melissaperreault mentioned this pull request May 1, 2023

[Product cards] Shadow doesn't behave consistently on hover on cards with image shapes #2598

Open

ludoboludo approved these changes May 1, 2023

View reviewed changes

kjellr commented May 1, 2023

View reviewed changes

stufreen approved these changes May 2, 2023

View reviewed changes

kjellr merged commit 1e24202 into main May 2, 2023

kjellr deleted the fix-hover-state-for-3d-lift branch May 2, 2023 19:58

jabrms pushed a commit to fp-trading/fp-trading-theme that referenced this pull request Jun 12, 2023

Revert "[3D lift animation] Raise hovered card above adjacent cards (S…

211cd2b

…hopify#2589)" This reverts commit 641ba8e.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[3D lift animation] Raise hovered card above adjacent cards #2589

[3D lift animation] Raise hovered card above adjacent cards #2589

kjellr commented Apr 28, 2023

ludoboludo left a comment

ludoboludo Apr 28, 2023

kjellr Apr 28, 2023

ludoboludo Apr 28, 2023

kjellr Apr 28, 2023

ludoboludo Apr 28, 2023

kjellr Apr 28, 2023

ludoboludo May 1, 2023

kjellr May 1, 2023 •

edited

Loading

bredowmax commented Apr 29, 2023

kjellr May 1, 2023

kjellr May 1, 2023

kjellr commented May 1, 2023

melissaperreault left a comment

ludoboludo left a comment

kjellr May 1, 2023 •

edited

Loading

ludoboludo May 1, 2023

stufreen left a comment

stufreen May 2, 2023

kjellr commented May 2, 2023 •

edited

Loading

[3D lift animation] Raise hovered card above adjacent cards #2589

[3D lift animation] Raise hovered card above adjacent cards #2589

Conversation

kjellr commented Apr 28, 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 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr May 1, 2023 • edited Loading

Choose a reason for hiding this comment

bredowmax commented Apr 29, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr commented May 1, 2023

melissaperreault left a comment

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

kjellr May 1, 2023 • edited Loading

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 May 2, 2023 • edited Loading

kjellr May 1, 2023 •

edited

Loading

kjellr May 1, 2023 •

edited

Loading

kjellr commented May 2, 2023 •

edited

Loading