Initial animation testing

[maureenlholland]

One-line summary

Add waving 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.

• I used an AI to write some of this code.

Significant changes and points to review

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"
• if paused, animation plays and button text changes to "pause"

Unfinished

• exact animation TBD, needs work on subpixel tearing issues
• no styling or layout on animation button

Issue / Bugzilla link

#15515

Testing

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 78.82%. Comparing base (02db980) to head (a0559d7).
Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15525      +/-   ##
==========================================
+ Coverage   78.78%   78.82%   +0.03%     
==========================================
  Files         157      158       +1     
  Lines        8257     8282      +25     
==========================================
+ Hits         6505     6528      +23     
- Misses       1752     1754       +2     

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

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[alexgibson]

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]

Here is my attempt for the evening.

• using SVG filter to fix tearing
• fixing blink timing

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

[slightlyoffbeat]

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.