Skip to content

Commit

Permalink
Update flag animation (fixes #15677) (#15822)
Browse files Browse the repository at this point in the history 
* Update flag animation (fixes #15677)

* New animation button styles

* Update border color on state change too

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

Co-authored-by: Alex Gibson <alexgibson@users.noreply.github.com>

---------

Co-authored-by: Alex Gibson <alexgibson@users.noreply.github.com>
  • Loading branch information
@maureenlholland @alexgibson
maureenlholland and alexgibson authored Feb 11, 2025
1 parent e316d69 commit 6aafa46
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 132 deletions.
53 changes: 22 additions & 31 deletions bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,13 @@

<div class="m24-t-dark m24-t-alt" data-m24-hero-animation="{{ switch('m24-hero-animation') | lower }}">
<section class="m24-c-flag" data-animation-running="false">
<button class="m24-c-flag-button js-animation-button" aria-live="assertive">
<span class="m24-c-flag-button-pause"><img src="{{ static('img/m24/icon-pause.svg') }}" alt=""> <span class="m24-c-flag-button-text">{{ ftl('ui-pause-animation') }}</span></span>
<span class="m24-c-flag-button-play"><img src="{{ static('img/m24/icon-play.svg') }}" alt=""> <span class="m24-c-flag-button-text">{{ ftl('ui-play-animation') }}</span></span>
<button class="m24-c-flag-button js-animation-button hide-from-legacy-ie" aria-live="assertive">
<span class="m24-c-flag-button-pause">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="M4 1v12M10 1v12" stroke="currentColor" stroke-width="2"/></svg>
<span class="m24-c-flag-button-text">{{ ftl('ui-pause-animation') }}</span></span>
<span class="m24-c-flag-button-play">
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M12 7 4 0v6.121h1.69V3.776L9.374 7 5.69 10.224V7.879H4V14l8-7Z" /></g><defs><clipPath id="a"><path d="M0 0h14v14H0z"/></clipPath></defs></svg>
<span class="m24-c-flag-button-text">{{ ftl('ui-play-animation') }}</span></span>
</button>
<div class="m24-c-flag-text">
<h1 class="m24-c-flag-title">{{ ftl('m24-home-welcome-to-mozilla') }}</h1>
Expand All @@ -17,35 +21,22 @@ <h1 class="m24-c-flag-title">{{ ftl('m24-home-welcome-to-mozilla') }}</h1>
</div>
<div class="m24-c-flag-media">
<svg class="m24-c-flag-media-static" role="img" xmlns="http://www.w3.org/2000/svg" width="216" height="243" fill="none" viewBox="0 0 216 243"><title>{{ ftl('m24-home-alt-flag') }}</title><path d="M93.573 29v20.734h72.565v5.351l-61.196 22.238v18.728l61.196 22.237v5.352H72.172v20.734h115.367v-37.788l-49.826-17.224v-5.349l49.826-17.222V29H93.573ZM29.034 214.6h23.743V29H29.034v185.6ZM72.172 71.136h21.401V49.734H72.172v21.402Z" /></svg>
<svg class="m24-c-flag-media-animation" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.26 200.19" width="176" height="200">
<svg class="m24-c-flag-media-animation" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380">
<title>{{ ftl('m24-home-alt-flag') }}</title>
<defs>
<filter id="dilate" x="-10%" y="-10%" width="120%" height="120%">
<feMorphology operator="dilate" radius="0.3" in="SourceGraphic" result="dilated" />
</filter>
</defs>
<g class="wave">
<path shape-rendering="crispEdges" class="pole" d="M39.55,181.45h-20.77V19.06h20.77v162.4Z" />
<polygon shape-rendering="crispEdges" class="flag-five"
points="126.03 37.2 138.74 37.2 138.74 41.88 126.03 46.5 126.03 62.99 157.47 52.12 157.47 19.06 126.03 19.06 126.03 37.2" />
<polygon shape-rendering="crispEdges" class="flag-five"
points="126.03 101.87 126.03 120.01 157.47 120.01 157.47 86.94 126.03 76.08 126.03 92.56 138.74 97.18 138.74 101.87 126.03 101.87" />
<polygon shape-rendering="crispEdges" class="flag-four"
points="113.88 88.15 126.02 92.56 126.02 76.07 113.88 71.87 113.88 88.15" />
<rect shape-rendering="crispEdges" class="flag-four" x="113.88" y="101.87" width="12.15" height="18.14" />
<rect shape-rendering="crispEdges" class="flag-four" x="113.88" y="19.06" width="12.15" height="18.14" />
<polygon shape-rendering="crispEdges" class="flag-four"
points="113.88 50.92 113.88 67.19 126.02 62.99 126.02 46.5 113.88 50.92" />
<polygon shape-rendering="crispEdges" class="flag-three"
points="113.88 67.19 113.88 50.92 85.2 61.34 85.2 77.73 113.88 88.15 113.88 71.87 113.87 71.87 113.87 67.19 113.88 67.19" />
<rect shape-rendering="crispEdges" class="flag-three" x="85.19" y="101.87" width="28.68" height="18.14" />
<rect shape-rendering="crispEdges" class="flag-three" x="85.19" y="19.06" width="28.68" height="18.14" />
<rect shape-rendering="crispEdges" class="flag-two" x="75.16" y="101.87" width="10.02" height="18.14" />
<rect shape-rendering="crispEdges" class="flag-two" x="75.25" y="19.06" width="9.93" height="18.14" />
<rect shape-rendering="crispEdges" class="flag-one" x="56.52" y="101.87" width="18.63" height="18.14" />
<rect shape-rendering="crispEdges" class="flag-one" x="56.52" y="37.2" width="18.73" height="18.73" />
</g>
</svg>
<path class="m24-c-flag-media-animation-paused" d="M46.4,379.97H0V17.03h46.4v362.94ZM84.39,202.16h183.73v-10.43l-119.73-43.6v-36.59l119.73-43.44v-10.59H126.27V17.03h183.73v73.96l-97.47,33.63v10.43l97.47,33.63v73.96H84.39v-40.48ZM84.39,57.51h41.88v41.88h-41.88v-41.88Z"/>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect y="17.03" width="46.4" height="362.94"/><rect x="84.39" y="57.51" width="41.88" height="41.88"/><polygon points="309.91 74.02 309.91 .03 148.5 .03 148.5 17.03 126.27 17.03 126.27 57.51 148.5 57.51 148.5 40.51 268.12 40.51 268.12 51.1 148.5 94.5 148.5 131.17 268.12 174.73 268.12 185.16 148.5 185.16 148.5 202.16 84.39 202.16 84.39 242.64 148.5 242.64 148.5 225.64 309.91 225.64 309.91 151.65 212.53 118.05 212.53 107.62 309.91 74.02"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect y="17.03" width="46.4" height="362.94"/><rect x="84.39" y="57.51" width="41.88" height="41.88"/><polygon points="309.98 74.02 309.98 .03 212.63 .03 212.63 17.03 163.41 17.03 148.57 17.03 126.27 17.03 126.27 57.51 148.57 57.51 163.41 57.51 212.63 57.51 212.63 40.51 268.19 40.51 268.19 51.1 212.63 71.26 212.63 88.26 148.57 111.5 148.57 148.17 212.63 171.5 212.63 154.5 268.19 174.73 268.19 185.16 212.63 185.16 212.63 202.16 148.57 202.16 148.57 202.25 136.93 202.25 136.93 202.16 84.39 202.16 84.39 242.64 136.93 242.64 136.93 242.74 164.82 242.74 164.82 242.64 212.63 242.64 212.63 225.64 309.98 225.64 309.98 151.65 212.63 118.06 212.63 107.61 309.98 74.02"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect x="84.18" y="74.51" width="41.88" height="41.88"/><rect y="17.03" width="46.4" height="362.94"/><polygon points="212.63 124.61 240.75 114.91 240.75 97.97 309.98 74.08 309.98 .09 240.75 .09 240.75 17.03 212.63 17.03 163.19 17.03 148.57 17.03 126.27 17.03 126.27 57.51 148.57 57.51 163.19 57.51 212.63 57.51 240.75 57.51 240.75 40.57 268.19 40.57 268.19 51.16 240.75 61.11 240.75 78.06 212.63 88.26 148.57 111.5 148.57 148.17 212.63 171.5 240.75 181.74 240.75 164.79 268.19 174.79 268.19 185.22 240.75 185.22 240.75 202.16 212.63 202.16 146.57 202.16 146.57 202.25 126.06 202.25 126.06 219.16 84.18 219.16 84.18 259.64 126.06 259.64 126.06 242.64 146.57 242.64 148.29 242.64 212.63 242.64 240.75 242.64 240.75 225.7 309.98 225.7 309.98 151.71 240.75 127.82 240.75 144.76 212.63 135.06 212.6 135.05 212.6 124.62 212.63 124.61"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect y="17.03" width="46.4" height="362.94"/><rect x="84.39" y="74.51" width="41.88" height="41.88"/><polygon points="309.91 91.02 309.91 17.03 148.5 17.03 148.5 34.03 126.27 34.03 126.27 74.51 148.5 74.51 148.5 57.51 268.12 57.51 268.12 68.1 148.5 111.5 148.5 148.17 268.12 191.73 268.12 202.16 148.5 202.16 148.5 219.16 84.39 219.16 84.39 259.64 148.5 259.64 148.5 242.64 309.91 242.64 309.91 168.65 212.53 135.05 212.53 124.62 309.91 91.02"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect x="84.39" y="74.51" width="41.88" height="41.88"/><rect y="17.03" width="46.4" height="362.94"/><path d="M309.98,91.02V17.03h-97.35v17h-86.36v40.48h86.36v-17h55.56v10.59l-55.56,20.16v17l-64.06,23.24v36.67l64.06,23.32v-17l55.56,20.23v10.43h-55.56v17h-43.36v-.06h-84.88v40.48h64.18v.06h64.06v-17h97.35v-73.99l-97.35-33.59v-10.45l97.35-33.59Z"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect class="cls-2" x="84.39" y="57.51" width="41.88" height="41.88"/><rect y="17.03" width="46.4" height="362.94"/><polygon points="212.63 141.66 240.75 131.96 240.75 115.04 309.98 91.15 309.98 17.16 240.75 17.16 240.75 34.08 212.63 34.08 148.5 34.08 147.57 34.08 126.27 34.08 126.27 57.57 84.21 57.62 84.21 99.5 126.28 99.46 126.28 74.56 147.57 74.56 148.5 74.56 212.63 74.56 240.75 74.56 240.75 57.64 268.19 57.64 268.19 68.23 240.75 78.19 240.75 95.1 212.63 105.3 148.57 128.55 148.57 165.22 212.63 188.55 240.75 198.78 240.75 181.87 268.19 191.86 268.19 202.29 240.75 202.29 240.75 219.21 212.63 219.21 158.5 219.21 158.5 219.2 126.42 219.2 126.32 202.18 84.44 202.18 84.44 242.67 126.27 242.74 126.27 259.58 148.57 259.58 148.57 259.69 212.63 259.69 240.75 259.69 240.75 242.77 309.98 242.77 309.98 168.78 240.75 144.89 240.75 161.81 212.63 152.11 212.6 152.1 212.6 141.67 212.63 141.66"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect y="17.03" width="46.4" height="362.94"/><rect x="84.39" y="57.51" width="41.88" height="41.88"/><polygon points="309.91 108.02 309.91 34.03 148.5 34.03 148.5 17.03 126.27 17.03 126.27 57.51 148.5 57.51 148.5 74.51 268.12 74.51 268.12 85.1 148.5 128.5 148.5 165.17 268.12 208.73 268.12 219.16 148.5 219.16 148.5 202.16 84.39 202.16 84.39 242.64 148.5 242.64 148.5 259.64 309.91 259.64 309.91 185.65 212.53 152.05 212.53 141.62 309.91 108.02"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect class="cls-2" y="17.03" width="46.4" height="362.94"/><rect y="17.03" width="46.4" height="362.94"/><polygon points="309.98 108.02 309.98 34.03 212.63 34.03 212.63 17.03 148.57 17.03 148.57 17.04 126.27 17.04 126.27 57.51 84.39 57.51 84.39 99.4 126.27 99.4 126.27 57.52 158.5 57.52 158.5 57.51 212.63 57.51 212.63 74.51 268.19 74.51 268.19 85.1 212.63 105.26 212.63 88.26 148.57 111.5 148.57 148.17 212.63 171.5 212.63 188.5 268.19 208.73 268.19 219.16 212.63 219.16 212.63 202.16 138.57 202.16 138.57 202.25 126.27 202.25 126.27 202.16 84.39 202.16 84.39 242.64 126.27 242.64 138.57 242.64 148.5 242.64 212.63 242.64 212.63 259.64 309.98 259.64 309.98 185.65 212.63 152.06 212.63 141.61 309.98 108.02"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><polygon points="309.99 108.04 309.99 34.05 240.76 34.05 240.76 17 212.64 17 149.51 17 148.58 17 126.07 17 126.07 40.59 84.19 40.59 84.19 82.47 126.07 82.47 126.07 57.48 148.58 57.48 149.51 57.48 212.64 57.48 240.76 57.48 240.76 74.53 268.2 74.53 268.2 85.12 240.76 95.07 240.76 78.03 212.64 88.23 148.58 111.47 148.58 148.14 212.64 171.47 240.76 181.71 240.76 198.75 268.2 208.74 268.2 219.18 240.76 219.18 240.76 202.13 212.64 202.13 148.58 202.13 148.58 202.22 126.07 202.22 126.07 185.24 84.19 185.24 84.19 225.72 126.07 225.72 126.07 242.61 148.58 242.61 158.3 242.61 212.64 242.61 240.76 242.61 240.76 259.66 309.99 259.66 309.99 185.67 240.76 161.78 240.76 144.73 212.64 135.03 212.61 135.02 212.61 124.59 212.64 124.58 240.76 114.88 240.76 131.93 309.99 108.04"/><rect x=".01" y="17" width="46.4" height="362.94"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect x=".01" y="17" width="46.4" height="362.94"/><rect x="84.19" y="40.59" width="41.88" height="41.88"/><polygon points="309.99 91.1 309.99 17.11 240.76 17.11 240.76 17 212.64 17 148.51 17 148.51 0 126.28 0 126.28 40.48 148.37 40.48 148.51 57.31 212.64 57.48 240.76 57.48 240.76 57.59 268.2 57.59 268.2 68.18 240.76 78.13 240.76 78.03 212.64 88.23 148.58 111.47 148.58 148.14 212.64 171.47 240.76 181.71 240.76 181.81 268.2 191.8 268.2 202.24 240.76 202.24 240.76 202.13 212.64 202.13 148.58 202.13 148.58 185.22 126.07 185.22 126.07 185.24 84.19 185.24 84.19 225.72 126.07 225.72 126.07 225.61 148.58 225.61 148.58 242.61 212.64 242.61 240.76 242.61 240.76 242.72 309.99 242.72 309.99 168.73 240.76 144.84 240.76 144.73 212.64 135.03 212.61 135.02 212.61 124.59 212.64 124.58 240.76 114.88 240.76 114.98 309.99 91.1"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect x="84.19" y="40.59" width="41.88" height="41.88"/><rect x=".01" y="17" width="46.4" height="362.94"/><polygon points="309.99 91.1 309.99 17.11 240.76 17.11 240.76 17 212.64 17 212.64 0 157.55 0 148.58 0 126.28 0 126.28 40.48 148.58 40.48 157.55 40.48 212.64 40.48 212.64 57.48 240.76 57.48 240.76 57.59 268.2 57.59 268.2 68.18 240.76 78.13 240.76 78.03 212.64 88.23 212.64 71.23 148.58 94.47 148.58 131.14 212.64 154.47 212.64 171.47 240.76 181.71 240.76 181.81 268.2 191.8 268.2 202.24 240.76 202.24 240.76 202.13 212.64 202.13 212.64 185.13 147.58 185.13 147.58 185.22 126.07 185.22 126.07 185.24 84.19 185.24 84.19 225.72 126.07 225.72 126.07 225.61 147.58 225.61 148.3 225.61 212.64 225.61 212.64 242.61 240.76 242.61 240.76 242.72 309.99 242.72 309.99 168.73 240.76 144.84 240.76 144.73 212.64 135.03 212.64 124.58 240.76 114.88 240.76 114.98 309.99 91.1"/></svg>
<svg class="m24-c-flag-media-animation-frame" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 380" width="310" height="380"><rect x=".01" y="17" width="46.4" height="362.94"/><rect x="84.19" y="57.53" width="41.88" height="41.88"/><polygon points="309.99 91.1 309.99 17.11 240.76 17.11 240.76 0 212.64 0 149.51 0 148.58 0 126.28 0 126.28 40.48 148.58 40.48 149.51 40.48 212.64 40.48 240.76 40.48 240.76 57.59 268.2 57.59 268.2 68.18 240.76 78.13 240.76 61.03 212.64 71.23 148.58 94.47 148.58 131.14 212.64 154.47 240.76 164.71 240.76 181.81 268.2 191.8 268.2 202.24 240.76 202.24 240.76 185.13 212.64 185.13 148.58 185.13 148.58 185.22 126.07 185.22 126.07 202.18 84.19 202.18 84.19 242.66 126.07 242.66 126.07 225.61 148.58 225.61 149.3 225.61 212.64 225.61 240.76 225.61 240.76 242.72 309.99 242.72 309.99 168.73 240.76 144.84 240.76 127.73 212.64 118.03 212.61 118.02 212.61 107.59 212.64 107.58 240.76 97.88 240.76 114.98 309.99 91.1"/></svg>
</svg>
</div>
</section>
</div>
Expand Down
Loading

0 comments on commit 6aafa46

Please sign in to comment.