Adding animation play/pause button to Marquee block

[qiyundai]

Hi all,

Context: We are transpiling the marquee block in our AX migration to Milo. This is in effort to prevent prod breakage and reduce authors work load.

We are wondering if we could contribute a small feature our version of marquee (a small animation play/pause button) into Milo's marquee block. Please see the following screenshot for visuals:

A little more about the feature:
Sometimes our animations in the marquee can be with too much fast moving elements and/or flashy colors. In some cases this can cause discomfort to our visitors. This little play/pause button was implemented to mitigate this issue. This button will store the preference in the localStorage('reduceMotion') but will also try to align with user's device accessibility setting (media query) if a localStorage preference is not set.

So, if the user has accessibility setting with reduce motion

toggled on && if the user hasn't previously toggled the animation on on the page, the animation will load paused. if the user changes the setting with the page up, the animation state will respond live.

Of course, this will only load for an marquee block instance with animation.

I was thinking this could be a variant (animation-toggle).

Please let me know your thoughts on this. Feel free to make suggestions on how we might be able to do this differently or if anything in the feature can be tweaked to better fit the Milo eco system. Thanks!

cc: @vhargrave

[rgclayton]

You might want to run this through the Consonant team.

Do we know if any other sites are asking for this?
Is this just for Express?

[vhargrave]

That's a very good point 🙌 . Need to get used to reaching out to consonant again lol. I've just started a thread with them - https://adobe-mwp.slack.com/archives/C01MY75BSSV/p1712749263839299

Currently it's just express to my knowledge that is asking for this, so curious what consonant says.

[vhargrave]

yes, it's approved and getting added by the looks of it - https://jira.corp.adobe.com/browse/MWPW-146367