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

[kjellr]

PR Summary:

This PR adds an optional "3D Lift" to Cards and Buttons wherein the element appears to lift off the page on hover. The element also receives a subtle shine effect while it's lifted up off the page.

20-19-iun43-vh4a2.mp4

Why are these changes introduced?

Closes #2451.

What approach did you take?

The animations are just a couple CSS transitions:

• The lift effect is achieved by adding a drop shadow and slight rotation on hover. The element does not actually get any larger, it just appears to due to the combination of the shadow + existing border and zoom transitions on these elements.
• The shine is achieved by adding a pseudo element on top that includes a gradient background. On hover, this background changes its position and opacity.
• These are all activated by a single global class that's conditionally applied the the body.

Other considerations

Since the effect is purely aesthetic, it becomes inactive when the visitor has prefers-reduced-motion active.

Known bugs:

• Currently, buttons don't get the shine. I couldn't find a great place to add the necessary pseudo class to make this happen and didn't want to make things more complicated by adding more wrappers. I don't really mind not having the shine on buttons, but I'd love a second opinion.
• The buy button sometimes shows an annoying flash when you hover out.
• I'm currently targeting some very specific selectors, and some relatively generic ones. While testing, we should figure out exactly where this hover state should and should not go into effect.
• It's possible to have the card move around and react to the mouse's position on it (like what happens on Apple TV). This would require adding some Javascript.

Visual impact on existing themes

This feature is optional, and off by default. When merchants activate it by selecting it from the dropdown in Theme Settings, buttons and product cards across their storefront will receive this new hover effect.

Testing steps/scenarios

1. Visit the demo store's editor.
2. Visit Theme Settings > Animations
3. Select "3D Lift" from the "Hover Effect" dropdown.
4. Hover over product cards and buttons, see the new hover effect.

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

[kjellr]

I pushed some changes to improve the way this works when cards have an existing dropshadow. Now it no longer replaces the dropshadow, but appears in addition. Since we're retaining the original shadow, this will work better for themes like Crave, which use a solid dropshadow around their cards.

Examples

Solid shadow example

shadows.mp4

Diffused shadow example

shadow-02.mp4

[stufreen]

If you don't want to use the easter egg CSS variable you could also just add new CSS rules and the merchant can unlock them by editing the setting value with the text editor. This won't take them off the upgrade path. As far as I know we don't validate the setting values, so you could set it to something like sparkle in the text editor even if that's not an option in the online store editor.

Screen.Recording.2023-04-10.at.11.42.09.AM.mov

[kjellr]

Interesting! I think that could be a fun way to do it. My main hesitation is that the sparkles are currently in addition to the rest of the 3d lift rules — I'd need to add a lot of duplicate rules in to target both .animate--hover-3d-lift and .animate--sparkle. The selectors are already getting a little heavy, so I'm hesitant to duplicate them all.

[kjellr]

Complementary product block; the last product card, the diffused shadow is cut off.

This one doesn't look like a straightforward fix. It's enough of a minor one that I think we can punt it to a followup PR.

Collage section; Style all as product cards setting it would be great if the hover effect could be applied when this setting is true.

I think in this case, the only one that doesn't have the hover effect is the image — I think that's fine because it's not clickable anyway. Let me know if I'm misinterpreting something though!

---

Coming back to my note up here, I pushed some changes to simplify the way I was targeting buttons. This should now cover (almost?) all of the buttons that should animate, without requiring all the :not() rules from previous iterations. Please give it another round of testing, and let me know how it's feeling!

[stufreen]

Still looks good to me. I tested the Sparkles and seems to be working as expected.

[melissaperreault]

For Collage, totally aligned!

I found just 2 outsiders only!

• Cart delete icon
• Vertical filter facet buttons

[kjellr]

Great catch, @melissaperreault! Should be fixed now, and ready for another review!

[melissaperreault]

Yeah! Everything looks good! Thank you for all the hard work! 🚢 🚢 🚢

[kjellr]

🙌 Thank you all!