From 6aafa46ea64613f1f74da27346e277de6e208117 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 11 Feb 2025 13:52:45 +0000 Subject: [PATCH] Update flag animation (fixes #15677) (#15822) * 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 --------- Co-authored-by: Alex Gibson --- .../mozorg/home/includes/m24/hero.html | 53 +++---- media/css/m24/flag.scss | 139 +++++------------- media/img/m24/icon-play.svg | 2 +- 3 files changed, 62 insertions(+), 132 deletions(-) diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html index 8b01dd49872..a67355c7c2d 100644 --- a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html +++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html @@ -6,9 +6,13 @@
-

{{ ftl('m24-home-welcome-to-mozilla') }}

@@ -17,35 +21,22 @@

{{ ftl('m24-home-welcome-to-mozilla') }}

{{ ftl('m24-home-alt-flag') }} - + {{ ftl('m24-home-alt-flag') }} - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + +
diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index fd091a2e8a2..d4195d787ae 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -30,11 +30,7 @@ } .m24-c-flag-media { - --delay: 1s; // leave some space to read before introducing movement - --wave-h: 8px; - svg { - transform: translateZ(0); width: 100px; height: auto; fill: $m24-color-green; // zilla green @@ -43,17 +39,17 @@ .m24-c-flag-button { $font-size: 0.75; - background-color: $m24-color-dark-mid-gray; - border-color: transparent; // High Contrast Mode support + background-color: $m24-color-alt-white; + border: 1px solid $m24-color-light-gray; box-shadow: none; - color: $m24-color-white; + color: $m24-color-black; font-family: $primary-font; font-size: calc(#{$font-size} * 1rem); font-weight: 600; line-height: $font-size; padding: 8px; cursor: pointer; - transition: background-color $fast; + transition: background-color $fast, border-color $fast; // Focused button is always visible: https://bugzilla.mozilla.org/show_bug.cgi?id=1936862 &:focus { @@ -62,18 +58,23 @@ } &:hover, - &:focus { + &:focus-visible { background-color: $m24-color-black; // inverts to white in dark theme section + border-color: $m24-color-black; + color: $m24-color-white; // inverts to white in dark theme section } &:active { background-color: $m24-color-dark-mid-gray; + border-color: $m24-color-dark-mid-gray; + color: $m24-color-white; } // High Contrast Mode Support: https://bugzilla.mozilla.org/show_bug.cgi?id=1936865 @media (forced-colors) { background-color: ButtonFace; color: ButtonText; + border-color: transparent; &:focus { outline-color: CanvasText; @@ -88,11 +89,9 @@ gap: 8px; } -.m24-c-flag-button-pause { - .m24-c-flag-button-text { - position: relative; - top: 0.0175rem; // flex alignment isn't totally centered, so we're manually adjusting - } +.m24-c-flag-button-text { + position: relative; + top: 0.0175rem; // flex alignment isn't totally centered, so we're manually adjusting } @media screen and (max-width: #{$screen-lg - 1}) { @@ -206,12 +205,14 @@ just not via explicit WAI-ARIA state management. display: none; } - .flag-one, - .flag-two, - .flag-three, - .flag-four, - .flag-five { - animation-play-state: paused; + // only show the static path + .m24-c-flag-media-animation-paused{ + opacity: 1; + } + + // reset animation + .m24-c-flag-media-animation-frame { + animation: none; } } @@ -220,94 +221,32 @@ just not via explicit WAI-ARIA state management. display: none; } - .flag-one, - .flag-two, - .flag-three, - .flag-four, - .flag-five { - animation-play-state: running; + // don't show the static path + .m24-c-flag-media-animation-paused { + opacity: 0; } } -/* Common Element Styles */ -.flag, -.flag-one, -.flag-two, -.flag-three, -.flag-four, -.flag-five, -.pole, -.head, -.pole-one, -.pole-two, -.eye, -.mouth { - shape-rendering: crispEdges; - -webkit-font-smoothing: none; - -moz-osx-font-smoothing: none; -} - -/* Wave Animations Base */ -.flag-one, -.flag-two, -.flag-three, -.flag-four, -.flag-five { - animation: 1s var(--delay) $bezier infinite; - will-change: transform; - filter: url("#dilate"); -} - -/* Flag Animation Names */ -.flag-one { animation-name: flag-one; } -.flag-two { animation-name: flag-two; } -.flag-three { animation-name: flag-three; } -.flag-four { animation-name: flag-four; } -.flag-five { animation-name: flag-five; } - - -/* Flag Movement Keyframes */ -@keyframes flag-one { - 0%, 15% { - transform: translate3d(0, 0, 0); - animation-timing-function: ease-in; -} - 16%, 40% { transform: translate3d(0, var(--wave-h), 0); } - 41%, 65% { transform: translate3d(0, 0, 0); } - 66%, 91% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } - 92%, 100% { transform: translate3d(0, 0, 0); } +.m24-c-flag-media-animation-frame { + --base-delay: 0.1s; + animation: 1.2s linear infinite wave; + opacity: 0; } -@keyframes flag-two { - 0%, 24% { transform: translate3d(0, 0, 0); } - 25%, 49% { transform: translate3d(0, var(--wave-h), 0); } - 50%, 74% { transform: translate3d(0, 0, 0); } - 75%, 99% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } - 100% { transform: translate3d(0, 0, 0); } -} -@keyframes flag-three { - 0%, 7% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } - 8%, 32% { transform: translate3d(0, 0, 0); } - 33%, 57% { transform: translate3d(0, var(--wave-h), 0); } - 58%, 82% { transform: translate3d(0, 0, 0); } - 83%, 100% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } -} - -@keyframes flag-four { - 0%, 15% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } - 16%, 49% { transform: translate3d(0, 0, 0); } - 50%, 65% { transform: translate3d(0, var(--wave-h), 0); } - 66%, 100% { transform: translate3d(0, 0, 0); } +// stagger frame visibility +@for $i from 1 through 12 { + .m24-c-flag-media-animation svg:nth-of-type(#{$i}) { + animation-delay: calc(var(--base-delay) * #{$i - 1}); + } } -@keyframes flag-five { - 0%, 24% { transform: translate3d(0, calc(-1 * var(--wave-h)), 0); } - 25%, 49% { transform: translate3d(0, 0, 0); } - 50%, 74% { transform: translate3d(0, var(--wave-h), 0); } +@keyframes wave { + 0%, 8.333% { + opacity: 1; + } - 75%, 100% { - transform: translate3d(0, 0, 0); - animation-timing-function: ease-out; + 8.4%, 100% { + opacity: 0; } } diff --git a/media/img/m24/icon-play.svg b/media/img/m24/icon-play.svg index 707ee641df0..8b063fe96b2 100644 --- a/media/img/m24/icon-play.svg +++ b/media/img/m24/icon-play.svg @@ -1 +1 @@ - +