Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Image banner] Add ambient movement to background #2342

Merged
merged 12 commits into from
Mar 13, 2023
Merged

[Image banner] Add ambient movement to background #2342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3dd6246
[Image banner] Add ambient movement to background
kjellr Feb 28, 2023
58984b1
Polish up the animation
kjellr Feb 28, 2023
002c12d
Support prefers-reduced-motion
kjellr Feb 28, 2023
c1a0ec4
Reorder schema entries.
kjellr Feb 28, 2023
51e6579
Tidy up header names.
kjellr Feb 28, 2023
4b2e85e
Try a faster animation.
kjellr Mar 3, 2023
4738f82
Load in higher-res images when ambient animation is active.
kjellr Mar 3, 2023
01dc560
Change both the sizes and widths properties.
kjellr Mar 8, 2023
291a05e
Merge branch 'main' into ambient-animation-in-image-banner
kjellr Mar 8, 2023
20ad896
Fix unintended change to the first stacked conditional.
kjellr Mar 8, 2023
812104f
Update 20 translation files
translation-platform[bot] Mar 10, 2023
b402853
Merge branch 'main' into ambient-animation-in-image-banner
kjellr Mar 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3120,3 +3120,17 @@ details-disclosure > details {
.rte blockquote > * {
margin: -0.5rem 0 -0.5rem 0;
}

/* Ambient animation */

@media (prefers-reduced-motion: no-preference) {
.animate--ambient > img,
.animate--ambient > svg {
animation: animateAmbient 30s linear infinite;
Copy link
Contributor

@melissaperreault melissaperreault Mar 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was at 40s before, had a feeling it was a little more perceivable without too much in your face. I am curious how others feel about it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I keep going back and forth. 😄 I'll leave it at this setting for a minute and let folks weigh on whether they think it's too fast or not.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would using the .animate--ambient selector on its own be enough here? Why do we specifically need to target img and svg elements?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to target the image or svg so that element can rotate around inside of its banner__media container. (We can't have the banner__media move around inside of the parent banner, because when two images are present the 50/50 split would not be preserved throughout the animation).

I could have assigned the .animate--ambient class directly to the image or svg, but I chose this path so that we can ideally use a single animate--{{ section.settings.image_behavior }} class assignment for all of the different image_behavior selections. While the ambient animation only targets the children of that, the fixed animation in #2345 does target the parent.

If there's hesitation around targeting img and svg specifically, I could assign and target a second class and target that. We don't currently assign a class to the img element in there, so doing this felt more verbose to me.

}

@keyframes animateAmbient {
0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); }
100% { transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤯 This is neat, I guess it pivots the image around clockwise with a 1em diameter?

What about doing translateX(10%) or something to ensure the translation is always relative to the image width? You could also potentially request a slightly larger image in the Liquid template to ensure no blurriness, although that would be on a section-by-section basis.

If you use translateX(10%) you could be more precise with scaling - scale(1.15) should cover it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that's right! It's pretty fun.

The percentage-based translate() value is a good thought, but in practice it introduces too much variability — moving an image 10% on a big desktop screen is a lot more than moving 10% on a small phone screen. Since the animation duration isn't variable, the difference in animation speed can be really drastic. 1em seemed to be a good steady value, and the 1.2 scale (while kinda random) seemed to eliminate any edges appearing in my testing.

Good point about the image size! That could be worth exploring for sure. I'll look into it later this week, but if someone else would like to beat me to it, that's totally cool.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stufreen I pushed 4738f82 to conditionally load higher-res images when ambient is active. Can you take a look and let me know if you have a different recommendation for implementation? From what I can tell, it's working alright:

Ambient Off Ambient On
before after
Loaded image is 2000px Loaded image is 2400px

}
}
18 changes: 15 additions & 3 deletions locales/cs.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "Neprůhlednost překryvu obrázku"
},
"header": {
"content": "Mobilní rozvržení"
},
"show_text_below": {
"label": "Zobrazit kontejner na mobilním zařízení"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "Doprava"
},
"label": "Zarovnání obsahu v mobilním prostředí"
},
"animations": {
"content": "Animace"
},
"image_behavior": {
"options__1": {
"label": "Žádné"
},
"options__2": {
"label": "Krouživý pohyb"
},
"label": "Chování obrázku"
},
"mobile": {
"content": "Mobilní rozvržení"
}
},
"blocks": {
Expand Down
18 changes: 15 additions & 3 deletions locales/da.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "Billedoverlejringens uigennemsigtighed"
},
"header": {
"content": "Mobillayout"
},
"show_text_below": {
"label": "Vis container på mobiltelefon"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "Højre"
},
"label": "Justering af indhold på mobil"
},
"animations": {
"content": "Animationer"
},
"image_behavior": {
"options__1": {
"label": "Ingen"
},
"options__2": {
"label": "Omgivende bevægelse"
},
"label": "Billedadfærd"
},
"mobile": {
"content": "Mobillayout"
}
},
"blocks": {
Expand Down
18 changes: 15 additions & 3 deletions locales/de.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "Deckkraft der Bildüberlagerung"
},
"header": {
"content": "Mobiles Layout"
},
"show_text_below": {
"label": "Container auf Mobilgerät anzeigen"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "Rechts"
},
"label": "Mobile Inhaltsausrichtung"
},
"animations": {
"content": "Animationen"
},
"image_behavior": {
"options__1": {
"label": "Keins"
},
"options__2": {
"label": "Atmosphärische Bewegung"
},
"label": "Bildverhalten"
},
"mobile": {
"content": "Mobiles Layout"
}
},
"blocks": {
Expand Down
14 changes: 13 additions & 1 deletion locales/en.default.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1170,7 +1170,19 @@
"color_scheme": {
"info": "Visible when container displayed."
},
"header": {
"animations": {
"content": "Animations"
},
"image_behavior": {
"options__1": {
"label": "None"
},
"options__2": {
"label": "Ambient movement"
},
"label": "Image behavior"
},
"mobile": {
"content": "Mobile Layout"
},
"mobile_content_alignment": {
Expand Down
18 changes: 15 additions & 3 deletions locales/es.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "Opacidad de la sobreposición de imagen"
},
"header": {
"content": "Diseño para móviles"
},
"show_text_below": {
"label": "Mostrar contenedor en el móvil"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "Derecha"
},
"label": "Alineación del contenido en el móvil"
},
"animations": {
"content": "Animaciones"
},
"image_behavior": {
"options__1": {
"label": "Ninguno"
},
"options__2": {
"label": "Movimiento de ambiente"
},
"label": "Comportamiento de la imagen"
},
"mobile": {
"content": "Diseño para móviles"
}
},
"blocks": {
Expand Down
18 changes: 15 additions & 3 deletions locales/fi.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "Peittokuvan läpikuultavuus"
},
"header": {
"content": "Mobiiliasettelu"
},
"show_text_below": {
"label": "Näytä säilö mobiililaitteessa"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "Oikealla"
},
"label": "Mobiilisisällön tasaus"
},
"animations": {
"content": "Animaatiot"
},
"image_behavior": {
"options__1": {
"label": "Ei mitään"
},
"options__2": {
"label": "Ympäristön liike"
},
"label": "Kuvan käyttäytyminen"
},
"mobile": {
"content": "Mobiilipohja"
}
},
"blocks": {
Expand Down
18 changes: 15 additions & 3 deletions locales/fr.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "Opacité de la superposition d'images"
},
"header": {
"content": "Mise en page mobile"
},
"show_text_below": {
"label": "Afficher le conteneur sur le mobile"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "Droite"
},
"label": "Alignement du contenu sur mobile"
},
"animations": {
"content": "Animations"
},
"image_behavior": {
"options__1": {
"label": "Aucun"
},
"options__2": {
"label": "Mouvement ambiant"
},
"label": "Comportement de l’image"
},
"mobile": {
"content": "Mise en page sur mobile"
}
},
"blocks": {
Expand Down
18 changes: 15 additions & 3 deletions locales/it.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "Opacità della sovrapposizione immagine"
},
"header": {
"content": "Layout dispositivo mobile"
},
"show_text_below": {
"label": "Mostra contenitore su dispositivo mobile"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "A destra"
},
"label": "Allineamento contenuto su dispositivi mobili"
},
"animations": {
"content": "Animazioni"
},
"image_behavior": {
"options__1": {
"label": "Nessuno"
},
"options__2": {
"label": "Scorrimento lento"
},
"label": "Comportamento delle immagini"
},
"mobile": {
"content": "Layout dispositivo mobile"
}
},
"blocks": {
Expand Down
18 changes: 15 additions & 3 deletions locales/ja.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "画像のオーバーレイ不透明率"
},
"header": {
"content": "モバイルのレイアウト"
},
"show_text_below": {
"label": "モバイル上にコンテナを表示"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "右"
},
"label": "モバイルのコンテンツアライメント"
},
"animations": {
"content": "アニメーション"
},
"image_behavior": {
"options__1": {
"label": "なし"
},
"options__2": {
"label": "周囲の挙動"
},
"label": "画像の挙動"
},
"mobile": {
"content": "モバイルのレイアウト"
}
},
"blocks": {
Expand Down
18 changes: 15 additions & 3 deletions locales/ko.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "이미지 오버레이 투명도"
},
"header": {
"content": "모바일 레이아웃"
},
"show_text_below": {
"label": "모바일에서 컨테이너 표시"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "오른쪽"
},
"label": "모바일 콘텐츠 정렬"
},
"animations": {
"content": "애니메이션"
},
"image_behavior": {
"options__1": {
"label": "없음"
},
"options__2": {
"label": "잔잔한 움직임"
},
"label": "이미지 동작"
},
"mobile": {
"content": "모바일 레이아웃"
}
},
"blocks": {
Expand Down
18 changes: 15 additions & 3 deletions locales/nb.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "Gjennomsiktighet for bildeoverlegg"
},
"header": {
"content": "Mobillayout"
},
"show_text_below": {
"label": "Vis beholder på mobil"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "Høyre"
},
"label": "Innholdsjustering på mobiltelefon"
},
"animations": {
"content": "Animasjoner"
},
"image_behavior": {
"options__1": {
"label": "Ingen"
},
"options__2": {
"label": "Bevegelse i omgivelsene"
},
"label": "Bildeatferd"
},
"mobile": {
"content": "Mobillayout"
}
},
"blocks": {
Expand Down
18 changes: 15 additions & 3 deletions locales/nl.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,9 +970,6 @@
"image_overlay_opacity": {
"label": "Dekking van afbeeldingsoverlay"
},
"header": {
"content": "Mobiele opmaak"
},
"show_text_below": {
"label": "Container op mobiel weergeven"
},
Expand Down Expand Up @@ -1045,6 +1042,21 @@
"label": "Rechts"
},
"label": "Uitlijning van content op mobiel"
},
"animations": {
"content": "Animaties"
},
"image_behavior": {
"options__1": {
"label": "Geen"
},
"options__2": {
"label": "Bewegingen van de omgeving"
},
"label": "Gedrag van afbeeldingen"
},
"mobile": {
"content": "Opmaak op mobiel"
}
},
"blocks": {
Expand Down
Loading