From 79af51e8446979e568307355fb85d1a6cef94b1a Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Tue, 19 Nov 2024 14:52:59 -0500 Subject: [PATCH] Initial animation testing --- .../templates/mozorg/home/home-m24.html | 4 + .../mozorg/home/includes/m24/hero.html | 27 +++++- media/css/m24/flag.scss | 93 ++++++++++++++++++- media/img/home/2024/hero-symbol-white.svg | 1 - media/js/m24/animation-play-state.es6.js | 36 +++++++ media/static-bundles.json | 6 ++ 6 files changed, 162 insertions(+), 5 deletions(-) delete mode 100644 media/img/home/2024/hero-symbol-white.svg create mode 100644 media/js/m24/animation-play-state.es6.js diff --git a/bedrock/mozorg/templates/mozorg/home/home-m24.html b/bedrock/mozorg/templates/mozorg/home/home-m24.html index da53dbeca91..631e283a684 100644 --- a/bedrock/mozorg/templates/mozorg/home/home-m24.html +++ b/bedrock/mozorg/templates/mozorg/home/home-m24.html @@ -53,3 +53,7 @@ {% include 'includes/protocol/footer/footer.html' %} {% endwith %} {% endblock %} + +{% block js %} + {{ js_bundle('m24-animation') }} +{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html index 7823a0d9157..6265e68663b 100644 --- a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html +++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html @@ -5,9 +5,32 @@ #}
-
+
+ + +
- + + + + + + + + + + + + + + + + + +

Welcome to Mozilla

diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss index fc8265844c5..0b14667bb45 100644 --- a/media/css/m24/flag.scss +++ b/media/css/m24/flag.scss @@ -27,8 +27,10 @@ display: block; margin-bottom: 16px; - img { + svg { width: 100px; + height: auto; + fill: $m24-color-black; // inverts to black in dark theme section } } @@ -50,7 +52,7 @@ grid-column: 1/3; margin-bottom: 0; - img { + svg { width: 100%; max-width: 216px; } @@ -89,3 +91,90 @@ .m24-c-products { background-color: $m24-color-white; } + +// Animation +.no-js .c-animation-button { + display: none; +} + +// Accessibility check: +// Does the approach of changing label display + aria live region work + +/* +Note from Inclusive Components, "Changing labels": https://inclusive-components.design/toggle-button/ +As a rule of thumb, you should never change pressed state and label together. +If the label changes, the button has already changed state in a sense, +just not via explicit WAI-ARIA state management. +*/ +[data-animation-running="false"] { + .c-animation-button-pause { + display: none; + } + + .flag-one, .flag-two, .flag-three, .flag-four, .flag-five { + animation-play-state: paused; + } +} + +[data-animation-running="true"] { + .c-animation-button-play { + display: none; + } + + .flag-one, .flag-two, .flag-three, .flag-four, .flag-five { + animation-play-state: running; + } +} + +// with thanks to Elise: https://codepen.io/oleaceae/pen/GRVzVdE?editors=1100 +.flag-one, .flag-two, .flag-three, .flag-four, .flag-five { + animation-duration: 1.5s; + animation-fill-mode: forwards; + animation-timing-function: steps(1); // jump between transforms, no interpolation + animation-delay: 0.5s; + animation-iteration-count: infinite; + transition: none; +} + +.flag-one { animation-name: flag-one } +@keyframes flag-one { + 0% { transform: translateY(0);} + 16% { transform: translateY(0.5rem);} + 41% { transform: translateY(0);} + 66% { transform: translateY(-0.5rem);} + 92% { transform: translateY(0); } +} + +.flag-two { animation-name: flag-two } +@keyframes flag-two { + 0% { transform: translate(0,0); } + 25% { transform: translate(0,.5rem); } + 50% { transform: translate(0,0); } + 75% { transform: translate(0,-.5rem); } + 100% { transform: translate(0,0); } +} + +.flag-three { animation-name: flag-three } +@keyframes flag-three { + 0% { transform: translate(0,-.5rem); } + 8% { transform: translate(0,0); } + 33% { transform: translate(0,.5rem); } + 58% { transform: translate(0,0); } + 83% { transform: translate(0,-.5rem); } +} + +.flag-four { animation-name: flag-four } +@keyframes flag-four { + 0% { transform: translate(0,-.5rem); } + 16% { transform: translate(0,0); } + 50% { transform: translate(0,.5rem); } + 66% { transform: translate(0,0); } +} + +.flag-five { animation-name: flag-five} +@keyframes flag-five { + 0% { transform: translate(0,-.5rem); } + 25% { transform: translate(0,0); } + 50% { transform: translate(0,.5rem); } + 75% { transform: translate(0,0); } +} diff --git a/media/img/home/2024/hero-symbol-white.svg b/media/img/home/2024/hero-symbol-white.svg deleted file mode 100644 index 93be3814d15..00000000000 --- a/media/img/home/2024/hero-symbol-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/js/m24/animation-play-state.es6.js b/media/js/m24/animation-play-state.es6.js new file mode 100644 index 00000000000..4e20560cd83 --- /dev/null +++ b/media/js/m24/animation-play-state.es6.js @@ -0,0 +1,36 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +const ANIMATION_RUNNING = 'data-animation-running'; + +function togglePlayState(e) { + const animationContainer = e.target.closest(`[${ANIMATION_RUNNING}]`); + if (animationContainer.getAttribute(ANIMATION_RUNNING) === 'true') { + animationContainer.setAttribute(ANIMATION_RUNNING, 'false'); + } else { + animationContainer.setAttribute(ANIMATION_RUNNING, 'true'); + } +} + +function init() { + // play animations if motion is allowed + if (window.Mozilla.Utils.allowsMotion()) { + const animationContainers = document.querySelectorAll( + `[${ANIMATION_RUNNING}]` + ); + animationContainers.forEach((container) => + container.setAttribute(ANIMATION_RUNNING, 'true') + ); + } + + // play or pause animations on button click + const playStateButtons = document.querySelectorAll('.c-animation-button'); + playStateButtons.forEach((button) => + button.addEventListener('click', (e) => togglePlayState(e)) + ); +} + +init(); diff --git a/media/static-bundles.json b/media/static-bundles.json index 25de5151a53..3b36a090004 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -1795,6 +1795,12 @@ ], "name": "monitor-banner" }, + { + "files": [ + "js/m24/animation-play-state.es6.js" + ], + "name": "m24-animation" + }, { "files": [ "js/mozorg/rise25/rise25.js"