search

Shopify / dawn

Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.
Other
2.53k stars 3.42k forks source link

Announcement bar: Tweak slideshow animation #2550

Closed stufreen closed 1 year ago

stufreen commented 1 year ago

Summary

Update slide animation in the announcement bar to be vertical or fade-in fade-out, instead of sliding right-to-left.

Designs

https://www.figma.com/proto/ZywFj2r8xci8rMHriRYfUX/Banner-Animation-Tests?page-id=0%3A1&node-id=1-542&scaling=min-zoom&starting-point-node-id=1%3A542&show-proto-sidebar=1

Confirm with UX which option to use (leaning towards options 2 or 3)

Details

In https://github.com/Shopify/themes/issues/398 we updated the announcement bar to be a slideshow, instead of stacking announcements.

However the animation is a little too prominent and we want to make it more subtle.

This issue is to update the animation in one of two ways (to be determined):

  1. Cross-fade between slides (fade in/fade-out)
  2. Slide in from bottom to top with a fade-in fade-out of opacity
bredowmax commented 1 year ago

@stufreen this may actually solve a problem I've noticed in the latest version of Dawn: If merchant set up several announcement bars then shopper can scroll the website horizontally. This can lead to conflicts with other slide shows, such as the image gallery on PDP

I do not notice the same behavior emulated device (Chrome's 'Inspect') but it becomes more apparent if you're holding a phone in your hands: If my scroll-up/scroll-down gestures are not very precise, the entire website moves to the side (I'm using an iOS device & Chrome. Safari also confirmed)

Confirmed temporary fix: Hiding additional announcement bars so that only one is visible

Screen grab 1 - imprecise vertical scroll https://user-images.githubusercontent.com/30573532/236909453-a689aef7-41f7-4bcd-a282-ab1e762b3969.MP4

Screen grab 2 - imprecise horizontal scroll on image gallery on PDP leads to sometimes being unable to scroll through images https://user-images.githubusercontent.com/30573532/236911997-2ab9ff15-ece8-4b0c-a556-80fd174b4c8d.MP4

eugenekasimov commented 1 year ago

@stufreen this may actually solve a problem I've noticed in the latest version of Dawn: If merchant set up several announcement bars then shopper can scroll the website horizontally. See video

This is hardly noticeable on en emulated device but becomes more apparent if you're holding a phone in your hands. If my scroll-up/scroll-down gestures are not very precise, the entire website moves to the side.

Hiding announcement bars so that only one is visible fixes this.

RPReplay_Final1683572241.MP4

Hey @bredowmax thanks for brining this up. We will investigate this 👍

melissaperreault commented 1 year ago

but it becomes more apparent if you're holding a phone in your hands

@bredowmax I am unable to replicate both on my Android and iPhone, on our demo store linked on main branch. Can you share the steps to replicate please?

Edit: I was able to replicate on iOS Safari but not on Android.