Try adding a CSS-only announcement bar marquee option

[kjellr]

PR Summary:

Adds a "Scrolling marquee" option to the announcement bar.

10-32-uwyun-2p4vy.mp4

Why are these changes introduced?

Just a proof of concept.

What approach did you take?

The PR uses a simple CSS animation to create an endlessly scrolling marquee. It borrows this idea for using text shadows to repeat the text. This generally works for text, but breaks if you use emoji. 😞

Aside from the emoji issue, I don't think this is actually a viable option for a couple reasons though:

1. It relies on a hardcoded width for the text. This breaks on smaller screens.
2. The speed of the animation generally to be adjusted depending on the amount of text present as well.

Both of these could theoretically be handled by JS, but I think we'd want to explore that outside of this PR anyway. Keeping this as a draft for now, but it should probably be closed once we've taken a look at it.

Other considerations

The PR automatically turns the scrolling off if the user's device has Prefers reduced motion set.

Testing steps/scenarios

• Visit the link here.
• Try toggling on and off the marquee setting.
• Try changing the text. (Add lots of text, notice that it breaks)
• Check it out at other screen sizes (Notice that it breaks)

[melissaperreault]

Hey @svinkle , this is only a proof of concept PR but would like to learn if turning off automatically the scrolling if user's device has Prefers reduced motion set is enough in this feature ability?

I suspect we would need to offer control to play/pause the animation additionally?

[Oliviammarcello]

+1 to Melissa's comment. I think we will need to add a play/pause button. When working on header improvements, I designed one here if that is helpful.

Also, not sure if a setting to control the speed could be helpful. We have a speed setting on the slideshow. Screenshot

[kjellr]

The more I sit on this one, the less sure I am that it should be in Dawn in the first place. Marquees are super-trendy right now, but they're not a great pattern from a usability perspective (hence all the questions above about accessibility and pause buttons). Because of that, I'm weary of unleashing it on all of our themes at once.

I'm also not sure it makes sense to include it from a theme framework perspective: marquees will fade in trendiness at some point, and we'll still have this built-in to Dawn. I'm not convinced it's a feature that's core to commerce. Instead, it might make sense to make this a quick app, or even just a feature in one or two specific themes that are designed to be more trendy/ephemeral.

[svinkle]

text-shadow is not supported in Windows High Contrast themes resulting in only the first instance being visible.

Implementing a non-rotating fallback via prefers-reduced-motion media query is one approach, but this assumes the user knows about this setting. This could be considered a "power user" setting.

As with any wide-sweeping motion, an explicit method to pause is recommended.

[andrewetchen]

Hey @kjellr,

The probot-CLA was recently deprecated. This pull request will now need to refer to new shopify-cla CLA check.

One way to achieve this is by closing and reopening this pull request.

I apologize for the noise. Feel free to message me if you have any questions 😄

• Migrate off probot-CLA to new GitHub Action #1859

---

Update

Looks like the shopify[bot] might be preventing the CLA check to pass:

[translation-platform]

We have received a translation request but there is a question blocking translation work. Your help is needed.

Please answer the following questions.

Warning
Replies in GitHub are not visible to translators. Use the provided "Answer here" links. 🙅‍♀️

• Hi team, can you please provide more context on this segment? Thanks in advance. Answer here.
  

  dawn/locales/en.default.schema.json

  Line 390 in e444aea

  "label": "Scrolling marquee"

---

Note
Not your issue? Forward it to someone with more context; please don't leave it pending. 🙏
Questions? Hop in the #help-i18n-and-translation Slack channel.

[kjellr]

I'm just going to go ahead and close this one — it was just a proof of concept, and I think the method used here isn't viable anyway due to issues with long text strings and different viewports.