[Image with Text] Add ambient movement to image #2385

kjellr · 2023-03-13T15:24:39Z

PR Summary:

Adds an option for ambient animation to the Image with Text section's image.

ambient.mp4

Why are these changes introduced?

What approach did you take?

Uses the same approach (and existing CSS) that was added in #2342.

This implements a new dropdown menu #2341. When "Ambient movement" is selected, a CSS class is applied to the Image with Text's image element, triggering a long-duration CSS animation that slowly moves the image around within its frame. As this feature is purely aesthetic, it supports the visitor's prefers-reduced-motion preference.

Like #2342, it also conditionally loads in a slightly higher-res image when the ambient animation is active, in order to account for the scale effect that's applied to the image.

Visual impact on existing themes

This feature is off by default. When it's turned on, the image with text's image will slowly animate ambiently.

Decision log

#	Decision	Alternatives	Rationale	Downsides
1	Move section-specific animation-related strings to `sections.all.animation` to avoid duplication.	Repeat these string declarations every time they're used.	We're reusing the same strings across (at least) three sections, so declaring these in one place cuts down on duplicate code.	None, really.

Testing steps/scenarios

Visit the demo store.
Add and select an Image with Text.
Look for the new "Image behavior" dropdown underneath the new "Animations" header in the Image with Text's sidebar.
Select "Ambient movement" from that dropdown.
Add image backgrounds to individual slides, verify that they appear as expected.
Try various breakpoints, verify that they appear as expected.

Checklist

Added PR summary for release notes
Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
Followed theme code principles
Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

kjellr · 2023-03-13T15:26:02Z

locales/en.default.schema.json

+            "label": "Ambient movement"
+          },
+          "label": "Image behavior"
+        },


As noted in #2383 (comment), it might make sense to have these strings be global since they're re-used across a few Sections.

Just noting that after conferring with @kmeleta, I've updated this to use new strings declared in sections.all.animation (Commits 5fb7ea5 and fd8b916). We'll be using these for Image Banner, Image with Text, and Slideshow, so this cuts down on duplicate code.

The only new consideration here is just that we should focus on merging this before #2383, since that PR will also need to use these global strings.

kjellr · 2023-03-13T15:34:42Z

sections/image-with-text.liquid

+            {%- assign widths = '198, 432, 642, 900, 1284, 1800' -%}
+            {%- capture sizes -%}
+              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1.6667 }}px,
+              (min-width: 750px) calc((100vw - 130px) / 1.667), calc((100vw - 50px) / 1.667)


The 1.6667 number here is admittedly a little weird. I could alternatively do calc(((100vw - 50px) / 2) * 1.2) and get the same result if we think that's easier to read.

I think it is easier to read 😅 I'm switching it in my PR for collage's ambient movement

melissaperreault

Thank you Kjell!

Works well! I tested

metamoni · 2023-03-15T07:46:49Z

Not sure if this is something caused by your refactoring or just some code that snuck in, but the top padding of this section is larger than it used to be. Here's what it looks like on main:

and in this PR:

kjellr · 2023-03-15T12:37:25Z

Not sure if this is something caused by your refactoring or just some code that snuck in, but the top padding of this section is larger than it used to be. Here's what it looks like on main:

I'm unable to reproduce locally, or with a freshly-added section on the demo site. The padding value for that specific section on the demo site looks like it had been adjusted via the Sidebar. Mind giving it another look?

metamoni

LGTM 👍

LucasLacerdaUX

LGTM! :D

LucasLacerdaUX · 2023-03-15T14:21:16Z

locales/en.default.schema.json

@@ -386,6 +386,18 @@
  },
  "sections": {
    "all": {
+      "animation": {
+        "label": "Animations",


I wonder if we should use the key label here as this is used as a header content on the schema. We usually keep a similar structure to what's used in our schema to make mapping easier. However, I see that just below we're using a section_padding_heading which also doesn't map to anything, so, not a big deal right now 👀

No problem! We're waiting on translations anyway, so doesn't hurt to make it consistent now. Updated in e315fc6.

kjellr · 2023-03-16T13:57:47Z

The translations came back but it looks like they're missing sections.all.animation.content. I'll resubmit, and hopefully we can wrap this and #2383 up soon.

kjellr · 2023-03-20T14:43:16Z

🎉 Thanks, everyone!

* shopify/main: Gift cards/add recipient (Shopify#2412) Update 1 translation file (Shopify#2453) [Slideshow] Add ambient movement to background (Shopify#2383) Wrap calls to search results ind collection counts in paginate to reduce additional requests (Shopify#2421) [Header] Add app block in the header section (Shopify#2238) [Image with Text] Add ambient movement to image (Shopify#2385) Update 1 translation file (Shopify#2450) [Blog post section] Fix slides size on mobile (Shopify#2368) Duplicated scrollbar in drawer menu (Shopify#2400) [Header locales] Support gradients (Shopify#2386) [Image banner] Add ambient movement to background (Shopify#2342)

Add ambient movement to image with text.

b15da1a

kjellr added Category: Enhancement New feature or request motion labels Mar 13, 2023

kjellr requested review from stufreen, metamoni, melissaperreault and LucasLacerdaUX March 13, 2023 15:24

kjellr self-assigned this Mar 13, 2023

kjellr commented Mar 13, 2023

View reviewed changes

kjellr added 2 commits March 14, 2023 13:53

Switch to global animation string declarations.

5fb7ea5

Remove the old strings.

fd8b916

kjellr mentioned this pull request Mar 14, 2023

[Slideshow] Add ambient movement to background #2383

Merged

8 tasks

melissaperreault previously approved these changes Mar 14, 2023

View reviewed changes

metamoni previously approved these changes Mar 15, 2023

View reviewed changes

LucasLacerdaUX previously approved these changes Mar 15, 2023

View reviewed changes

Update header key for consistency.

e315fc6

kjellr dismissed stale reviews from LucasLacerdaUX, metamoni, and melissaperreault via e315fc6 March 15, 2023 15:36

Update 17 translation files

42de032

translation-platform bot added 3 commits March 16, 2023 14:09

Update 3 translation files

458401d

Update 18 translation files

518055d

Update 2 translation files

af63ab7

ludoboludo requested review from LucasLacerdaUX and metamoni March 20, 2023 14:23

Merge branch 'main' into ambient-animation-in-image-with-text

624ff4e

metamoni approved these changes Mar 20, 2023

View reviewed changes

LucasLacerdaUX approved these changes Mar 20, 2023

View reviewed changes

kjellr merged commit 5202ad7 into main Mar 20, 2023

kjellr deleted the ambient-animation-in-image-with-text branch March 20, 2023 14:43

ludoboludo mentioned this pull request Apr 20, 2023

[Collage] Add ambient effect on image block & general ambient tweaks #2547

Open

12 tasks

kimberlyoleiro mentioned this pull request Jun 26, 2023

Image with Text - Ambient Movement Animation Broken #2742

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Image with Text] Add ambient movement to image #2385

[Image with Text] Add ambient movement to image #2385

kjellr commented Mar 13, 2023 •

edited

kjellr Mar 13, 2023

kjellr Mar 14, 2023

kjellr Mar 13, 2023

ludoboludo Apr 20, 2023

melissaperreault left a comment •

edited

metamoni commented Mar 15, 2023 •

edited

kjellr commented Mar 15, 2023

metamoni left a comment

LucasLacerdaUX left a comment

LucasLacerdaUX Mar 15, 2023

kjellr Mar 15, 2023

kjellr commented Mar 16, 2023

kjellr commented Mar 20, 2023

[Image with Text] Add ambient movement to image #2385

[Image with Text] Add ambient movement to image #2385

Conversation

kjellr commented Mar 13, 2023 • edited

PR Summary:

Why are these changes introduced?

What approach did you take?

Visual impact on existing themes

Decision log

Testing steps/scenarios

Checklist

kjellr Mar 13, 2023

Choose a reason for hiding this comment

kjellr Mar 14, 2023

Choose a reason for hiding this comment

kjellr Mar 13, 2023

Choose a reason for hiding this comment

ludoboludo Apr 20, 2023

Choose a reason for hiding this comment

melissaperreault left a comment • edited

Choose a reason for hiding this comment

metamoni commented Mar 15, 2023 • edited

kjellr commented Mar 15, 2023

metamoni left a comment

Choose a reason for hiding this comment

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

LucasLacerdaUX Mar 15, 2023

Choose a reason for hiding this comment

kjellr Mar 15, 2023

Choose a reason for hiding this comment

kjellr commented Mar 16, 2023

kjellr commented Mar 20, 2023

kjellr commented Mar 13, 2023 •

edited

melissaperreault left a comment •

edited

metamoni commented Mar 15, 2023 •

edited