Update hero with flag animation (fixes #15515 and #15597) #15525

maureenlholland · 2024-11-19T19:56:14Z

One-line summary

Add waving, ~~blinking, bouncing~~ flag animation on homepage hero.
Animation play state will respect user's motion preference by default.
There will also be a play/pause button to change the default play state.

Based on this codepen: https://codepen.io/slightlyoffbeat/pen/LYwwpgj

I used an AI to write some of this code.

Significant changes and points to review

The animation is hidden behind a switch: M24_HERO_ANIMATION
When the switch is off, you will get the no js experience

Play/pause button on desktop and mobile Figma [Mozilla only]

Expected behaviour

no js: by default animation does not run

user motion preference:

if reduced, animation does not run on load
if no preference, animation runs on load

button click

if playing, animation pauses and button text changes to "Play Animation"
if paused, animation plays and button text changes to "Pause Animation"

Issue / Bugzilla link

#15515
#15597
#15640

Testing

M24_WEBSITE_REFRESH must be on

Use ./manage.py waffle_switch --create M24_HERO_ANIMATION on to test active switch

no js works as described
prefers reduced motion works as described
no preference for reduced motion works as described
mobile animation button is icon only
desktop animation button is icon + text
animation button allows user to control play/pause functionality
flag is under text on mobile

codecov · 2024-11-20T21:57:36Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.04%. Comparing base (8127ca3) to head (cf081a0).
Report is 18 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15525      +/-   ##
==========================================
- Coverage   79.05%   79.04%   -0.01%     
==========================================
  Files         159      159              
  Lines        8331     8329       -2     
==========================================
- Hits         6586     6584       -2     
  Misses       1745     1745

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

alexgibson · 2024-11-21T10:48:18Z

Adding a note here that I had some success fixing the sub-pixel tearing by adding stroke="#000" stroke-width="1" to each shape and removing shape-rendering="crispEdges". Worth some more testing, but it seems worth exploring.

Codepen: https://codepen.io/alxgbsn/pen/GRVbbpO

slightlyoffbeat · 2024-11-22T03:28:10Z

Here is my attempt for the evening.

using SVG filter to fix tearing
fixing blink timing

https://codepen.io/slightlyoffbeat/pen/LYwwpgj

slightlyoffbeat · 2024-11-22T04:06:04Z

Another attempt

removes feMorphology
adds stroke width of .35
adds vector-effect: non-scaling-stroke;

https://codepen.io/slightlyoffbeat/pen/XWvvXpg

Seems to work the best of what I've tried so far.

maureenlholland · 2024-12-02T20:55:19Z

media/css/m24/flag.scss

    margin-bottom: $spacer-xl;
 }

+.m24-c-flag-cta {
+    margin-bottom: 0;


removes default p spacing

maureenlholland · 2024-12-02T20:56:01Z

media/css/m24/flag.scss

+    background-color: $m24-color-medium-gray;
+    color: $m24-color-white;
+    font-family: $primary-font;
+    font-size: 0.75rem;


non-variable values used when there's no change in value across viewport widths

maureenlholland · 2024-12-02T20:57:08Z

media/css/m24/flag.scss

+        border-radius: 50%;
+        display: block;
+        margin-bottom: $spacer-md;
+        margin-inline-start: auto;


logical properties have pretty good support now, so I decided to use them as enhancement here instead of bidi mixin

maureenlholland · 2024-12-03T13:57:33Z

bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html

-      <img src="{{ static('img/home/2024/hero-symbol-white.svg') }}" alt="" width="216" height="243">
-    </div>
+  <section class="m24-c-flag" data-animation-running="false">
+    <button class="m24-c-flag-button js-animation-button" aria-live="assertive">


went for assertive here as the text change might be confusing if not announced immediately after button click

maureenlholland · 2024-12-03T14:04:51Z

l10n/en/mozorg/home-m24.ftl

@@ -13,6 +13,8 @@ m24-home-page-desc = Did you know? { -brand-name-mozilla } — the maker of { -b

 ## Intro

+m24-home-pause-animation = Pause animation


question for reviewer: should these be in a more generic UI ftl file?

Good idea. That's a global file so the string would be available everywhere.

thanks, will update!

maureenlholland · 2024-12-03T18:18:13Z

Feedback

remove the wink and bounce animations
change the flag (and pole)) from white to zilla green var(--color-green)
Align the "pause animation" text with the pause icon
put the animation behind a switch with a unique name (this commit accidentally got amended into the green update)

no-js: no animation button, static svg reduced motion pref: animation button available, static by default button click: toggles current animation state and updates text

stephaniehobson · 2024-12-03T21:06:31Z

media/css/m24/flag.scss

+
+.m24-c-flag-button {
+    $font-size: 0.75;
+    all: unset;


This removed the focus ring. Can you add it back please? Ideally with the native focus ring . But if that is finiky any kind of outline would be a good addition.

media/css/m24/flag.scss

stephaniehobson · 2024-12-04T18:16:34Z

l10n/en/ui.ftl

@@ -20,6 +20,8 @@ ui-show-all = Show All
 ui-hide-all = Hide All
 ui-learn-more = Learn more
 ui-view = View
+ui-pause-animation = Pause animation


Praise: Thanks for making these global.

media/css/m24/flag.scss

Co-authored-by: Jan Brasna <1784648+janbrasna@users.noreply.github.com>

stephaniehobson

R+

maureenlholland force-pushed the animate-flag-15515 branch 4 times, most recently from 0962ab1 to 79af51e Compare November 20, 2024 21:50

maureenlholland force-pushed the animate-flag-15515 branch from 79af51e to a0559d7 Compare November 20, 2024 22:01

maureenlholland force-pushed the animate-flag-15515 branch 3 times, most recently from ac0c922 to a21cf2e Compare December 2, 2024 20:53

maureenlholland commented Dec 2, 2024

View reviewed changes

maureenlholland force-pushed the animate-flag-15515 branch from a21cf2e to 7b8465f Compare December 2, 2024 20:59

maureenlholland changed the title ~~Initial animation testing~~ @maureenlholland Update hero with flag animation (fixes #15515) Dec 2, 2024

maureenlholland changed the title ~~@maureenlholland Update hero with flag animation (fixes #15515)~~ Update hero with flag animation (fixes #15515) Dec 2, 2024

maureenlholland force-pushed the animate-flag-15515 branch 2 times, most recently from 8f8d5f5 to 97256ca Compare December 3, 2024 13:55

maureenlholland commented Dec 3, 2024

View reviewed changes

maureenlholland marked this pull request as ready for review December 3, 2024 14:01

maureenlholland requested a review from a team as a code owner December 3, 2024 14:01

maureenlholland commented Dec 3, 2024

View reviewed changes

maureenlholland changed the title ~~Update hero with flag animation (fixes #15515)~~ Update hero with flag animation (fixes #15515 and #15597) Dec 3, 2024

maureenlholland added Needs Review Awaiting code review Review: XS Code review time: up to 30min Frontend HTML, CSS, JS... client side stuff Refresh 🦖 Work related to the 2024 site refresh labels Dec 3, 2024

maureenlholland force-pushed the animate-flag-15515 branch from 1c3f384 to 3b63895 Compare December 3, 2024 17:06

maureenlholland force-pushed the animate-flag-15515 branch 2 times, most recently from 13c7659 to 104c2a2 Compare December 3, 2024 19:15

maureenlholland requested a review from a team as a code owner December 3, 2024 19:15

maureenlholland force-pushed the animate-flag-15515 branch from 85b11ac to d81ddf9 Compare December 3, 2024 20:27

maureenlholland added 7 commits December 3, 2024 15:29

Update hero with flag animation (fixes mozilla#15515)

e7f78a7

no-js: no animation button, static svg reduced motion pref: animation button available, static by default button click: toggles current animation state and updates text

Move animation strings to ui file for global use

777e48d

Fix duplicate flag on mobile

87af091

Feedback: reduce animation to only wave

b043a3d

Feedback: update SVG to zilla green

48980cd

Add text alignment

3820b30

Remove migrations file to fix tests, use cli locally for switch

4e20349

maureenlholland force-pushed the animate-flag-15515 branch from d81ddf9 to 4e20349 Compare December 3, 2024 20:30

Update button color vars

7210c34

stephaniehobson reviewed Dec 3, 2024

View reviewed changes

maureenlholland added 2 commits December 3, 2024 17:42

Use older media query syntax for better support

78d41fe

Remove all: unset in favour of more targeted overrides

f7ef8a3

janbrasna reviewed Dec 4, 2024

View reviewed changes

media/css/m24/flag.scss Outdated Show resolved Hide resolved

stephaniehobson reviewed Dec 4, 2024

View reviewed changes

media/css/m24/flag.scss Outdated Show resolved Hide resolved

stephaniehobson and others added 2 commits December 4, 2024 10:32

Update media/css/m24/flag.scss

1f0ba0a

Update media/css/m24/flag.scss

cf081a0

Co-authored-by: Jan Brasna <1784648+janbrasna@users.noreply.github.com>

stephaniehobson approved these changes Dec 4, 2024

View reviewed changes

stephaniehobson merged commit 7f84d19 into mozilla:main Dec 4, 2024
4 checks passed

This was referenced Dec 4, 2024

Home page hero: move flag after text on mobile #15597

Closed

Padding around Flag on Ipad #15640

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update hero with flag animation (fixes #15515 and #15597) #15525

Update hero with flag animation (fixes #15515 and #15597) #15525

maureenlholland commented Nov 19, 2024 •

edited by stephaniehobson

Loading

codecov bot commented Nov 20, 2024 •

edited

Loading

alexgibson commented Nov 21, 2024 •

edited

Loading

slightlyoffbeat commented Nov 22, 2024

slightlyoffbeat commented Nov 22, 2024

maureenlholland Dec 2, 2024

maureenlholland Dec 2, 2024

maureenlholland Dec 2, 2024

maureenlholland Dec 3, 2024

maureenlholland Dec 3, 2024

craigcook Dec 3, 2024

maureenlholland Dec 3, 2024

maureenlholland commented Dec 3, 2024 •

edited

Loading

stephaniehobson Dec 3, 2024

stephaniehobson Dec 4, 2024

stephaniehobson left a comment

		@@ -13,6 +13,8 @@ m24-home-page-desc = Did you know? { -brand-name-mozilla } — the maker of { -b

		## Intro

		m24-home-pause-animation = Pause animation

Update hero with flag animation (fixes #15515 and #15597) #15525

Update hero with flag animation (fixes #15515 and #15597) #15525

Conversation

maureenlholland commented Nov 19, 2024 • edited by stephaniehobson Loading

One-line summary

Significant changes and points to review

Expected behaviour

Issue / Bugzilla link

Testing

codecov bot commented Nov 20, 2024 • edited Loading

Codecov Report

alexgibson commented Nov 21, 2024 • edited Loading

slightlyoffbeat commented Nov 22, 2024

slightlyoffbeat commented Nov 22, 2024

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

maureenlholland commented Dec 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephaniehobson left a comment

Choose a reason for hiding this comment

maureenlholland commented Nov 19, 2024 •

edited by stephaniehobson

Loading

codecov bot commented Nov 20, 2024 •

edited

Loading

alexgibson commented Nov 21, 2024 •

edited

Loading

maureenlholland commented Dec 3, 2024 •

edited

Loading