[Announcement bar] Slides animation. #2595

eugenekasimov · 2023-05-01T15:38:13Z

PR Summary:

This PR adds animation for slides in the announcement bar.

Why are these changes introduced?

Fixes #2550.

What approach did you take?

Changed scroll-behavior: from smooth to auto to prevent the current way of visual animation.
Added classes describing animation behaviour and keyframed them.
In JS added a few methods to apply animation and update the current slide in the announcement bar. Added a delay for changing slides to give some time for animation.

Other considerations

Visual impact on existing themes

Before

After

Testing steps/scenarios

Add a few announcements to the announcement bar.
Go through slides back and forth and make sure that it responds right. When you click for the next slide it should be shifting to the left and vice versa.
Make sure that when you reach the last slide and keep clicking next it should return you to the first slide with opposite animation as though you clicked to the previous one. Same rule applies when clicking backward.
In the settings set the slider for auto-rotating. Make sure that animation works properly.
Add the slideshow section and make sure that the current changes don't affect it.

Demo links

Editor

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

ludoboludo

Just reviewed the CSS, sharing some initial thoughts

assets/base.css

KaichenWang

The animation looks good! Left some code suggestions.

Also, I noticed if I click next a few times quickly, the animation for returning to the 1st announcement is not playing at the correct moment anymore (between slide 4 -> 5, instead of 5 -> 1)

screencast.2023-06-06.18-33-45.mp4

assets/base.css

assets/global.js

KaichenWang · 2023-06-06T17:30:16Z

assets/global.js

+          setTimeout(() => {
+            slide.classList.add(`announcement-bar-slider--fade-in-next`);
+          }, 200);
+          setTimeout(() => {


Can some of these setTimout be avoided if we leverage animation delay?

I tried but I couldn't find a way to make it work.

Ok I think we can keep the setTimeout. One other question is why we need to apply animation classes on every slide on every button click? Could we only need to apply animation on the outgoing and incoming slide?

assets/global.js

eugenekasimov · 2023-06-07T05:33:49Z

@ludoboludo @KaichenWang

I pushed updates. I tried to account for your suggestions regarding CSS and combined them.

@KaichenWang , regarding this quick clicking issue I think it's a very edge case and you really need to click faster than 200ms to reproduce it. I don't think it's reasonable to cover that case 🤔.

assets/global.js

KaichenWang · 2023-06-07T19:28:41Z

assets/global.js

+          setTimeout(() => {
+            slide.classList.add(`announcement-bar-slider--fade-in-next`);
+          }, 200);
+          setTimeout(() => {


Ok I think we can keep the setTimeout. One other question is why we need to apply animation classes on every slide on every button click? Could we only need to apply animation on the outgoing and incoming slide?

ludoboludo

Sharing my current feeling on the approach.

Curious of your thoughts as well as @KaichenWang's

assets/base.css

assets/global.js

KaichenWang · 2023-06-07T23:03:36Z

@eugenekasimov

regarding this quick clicking issue I think it's a very edge case and you really need to click faster than 200ms to reproduce it. I don't think it's reasonable to cover that case

We can open a separate issue for this. Agreed it's an edge case, but we should try to understand why it's happening.

assets/global.js

KaichenWang

Looks good!

Tested:

Announcement bar
Slideshow section
Complementary products

assets/global.js

* Rename announcement-bar to utility-bar section. Add basic logic for social-icons in the utility-bar. * Remove social icons from the utility bar for tablet Remove social icons snippet * Prevent auto-rotation after users interact with arrow buttons. Change the slider width for screens wider than 1200px. Rename back a file name from utility-bar to announcement-bar. * Prevent auto-rotation for mobile. Reduce social icons sizes for in the utility bar. Change grid system. * Prevent showing bottom-border when the utility bar is empty. * Add layout for screens under 1200px. * Adjust a separater line for max-width: 1199px * Revert announcement-bar name. Remove additional layout for desktop under 1120px. Remove JS logic. * Minor changes. * Refactor of css classes. Refactor of liquid logic. Use social-icons as a snippet. * Refactor in social-icons snippet. Change the naming in css accordingly BEM. * Update 14 translation files * Update 6 translation files * Change label for show_social. * Update 15 translation files * Update 5 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

* Use live region to announce recipient form * Inject text instead of toogling aria-hidden * Announce form collapsed when checkbox unticked * Update 20 translation files * Update 4 translation files * Update 6 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

ludoboludo

Most of my comments are nitpicks but there is one for iOS/Safari that I think we would sort before shipping ideally.

assets/base.css

assets/global.js

assets/base.css

ludoboludo · 2023-06-21T18:36:24Z

assets/global.js

+      this.slider.scrollTo({
+        left: position,
+      });


shouldn't we use the new function you added here ? setSlidePosition(position)

inside itself?

Oh no, I didn't realize. It got me confused cause the function is so similar for the SliderComponent and SlideshowComponent. And named the same way as well though does it differently, one with a timeout and one without.

assets/recipient-form.js

layout/theme.liquid

sections/announcement-bar.liquid

ludoboludo · 2023-06-21T19:08:39Z

assets/global.js

+    this.announcementBarSlider = this.querySelector('.announcement-bar-slider');
+    // Value below should match --duration-announcement-bar CSS value
+    this.delay = this.announcementBarSlider ? 250 : 0;
+    this.sliderTransitionSelector = 'slider--transition';


There is something I'm seeing on Safari for the last slide:

RPReplay_Final1687374243.MP4

assets/global.js

ludoboludo · 2023-06-23T20:27:47Z

assets/global.js

+    this.setSlidePosition(this.slideScrollPosition);
+
+    this.appleAnimationToAnnouncementBar(event.currentTarget.name);
+  }


One thing I noticed is that all the logic is added to be tackled onButtonClick when it should also be running on scroll/swipe 😬

If you use it on mobile and swipe instead of you will see that it doesn't apply all the changes necessary.

So I think you could either look into:

applying some of the announcement-bar-slider--fade-*** class in liquid by default. Since you know which slide will be showing on page load and which ones won't.

look at applying the same transitions in the update() function where it's checking what is the current page and what's the previous page. If you apply the logic you added to onButtonClick there it should work in all cases. Tho it might be triggered too late compared to when the button is clicked 🤔

From what I'm seeing it's working ok on page load. No animation is applied but at least all slides are being shown. If you click on the previous or next button though, and then swipe later, the slides are hidden. Ideally they would work whatever the method you're using to go to the next slide is.

RPReplay_Final1687551919.MP4

Thanks for flagging this Ludo.

This is happening because when you start scrolling/swiping we don't apply animation but some slides still have animation classes because we remove them only with the next cycle. I added code to prevent it. Now it looks good to me.

I would not apply animation for cases when we scroll/swipe because I think it looks better and more natural to have the effect we have now for scrolling.

Thoughts?

I think having the animation on scroll/swipe would be good but I don't think we should delay this PR more for it. It could be a thing we look into adding in the future.

ludoboludo

Looking good, just gotta remove a console log 👍

ludoboludo · 2023-06-27T16:14:01Z

assets/global.js

+    this.setSlidePosition(this.slideScrollPosition);
+
+    this.appleAnimationToAnnouncementBar(event.currentTarget.name);
+  }


I think having the animation on scroll/swipe would be good but I don't think we should delay this PR more for it. It could be a thing we look into adding in the future.

assets/global.js

KaichenWang

🚀

assets/global.js

* Add animation to the announcement bar. * Add animation for the current and next slides. * Make animation works for auto-rotating. * Ensure the slider rotates in reverse when it reaches the end/begining. * Add condition to apply delay for announcement-bar only * Refactor and update some logic. * Refactoring. * Remove unneccessary css code. * Refactor css. Change the order. * Refactor JS. * Refactor css. * Isolate all logic in slideshowComponent. * Simplify applyAnimation method. * Reuse currentPage * Apply animation on selected slides. * Adjust duration of animation and shifting. * Refactoring * Another refactoring * Remove timeout and add delay in css * Refactoring * Add no-js * Prevent snapping during animation * Fix auto-rotation positioning * Refactor applyAnimation * Refactor and remove unused elements * [Announcement bar] Add social icons (Shopify#2497) * Rename announcement-bar to utility-bar section. Add basic logic for social-icons in the utility-bar. * Remove social icons from the utility bar for tablet Remove social icons snippet * Prevent auto-rotation after users interact with arrow buttons. Change the slider width for screens wider than 1200px. Rename back a file name from utility-bar to announcement-bar. * Prevent auto-rotation for mobile. Reduce social icons sizes for in the utility bar. Change grid system. * Prevent showing bottom-border when the utility bar is empty. * Add layout for screens under 1200px. * Adjust a separater line for max-width: 1199px * Revert announcement-bar name. Remove additional layout for desktop under 1120px. Remove JS logic. * Minor changes. * Refactor of css classes. Refactor of liquid logic. Use social-icons as a snippet. * Refactor in social-icons snippet. Change the naming in css accordingly BEM. * Update 14 translation files * Update 6 translation files * Change label for show_social. * Update 15 translation files * Update 5 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Use live region to announce recipient form (Shopify#2672) * Use live region to announce recipient form * Inject text instead of toogling aria-hidden * Announce form collapsed when checkbox unticked * Update 20 translation files * Update 4 translation files * Update 6 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Safari fix and addressing feadback * Correct typo * Remove unnecessary code * Prevent applying animation when you scroll * Remove console.log * Refactoring --------- Co-authored-by: Ludo <[email protected]> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Fred Ma <[email protected]>

eugenekasimov force-pushed the animation-announcement-bar branch from f8bc819 to 758ccb6 Compare May 1, 2023 16:42

eugenekasimov added 5 commits May 10, 2023 09:24

Add animation to the announcement bar.

91326a8

Add animation for the current and next slides.

9b9de46

Make animation works for auto-rotating.

72ba2e2

Ensure the slider rotates in reverse when it reaches the end/begining.

beb668f

Add condition to apply delay for announcement-bar only

50069e5

eugenekasimov force-pushed the animation-announcement-bar branch from 6541e4e to 50069e5 Compare May 10, 2023 16:45

eugenekasimov added 2 commits May 12, 2023 14:10

Refactor and update some logic.

8d729b6

Refactoring.

1b40cdf

eugenekasimov force-pushed the animation-announcement-bar branch from 1932286 to 1b40cdf Compare May 15, 2023 18:35

eugenekasimov changed the title ~~[Announcement bar] Prototype of slider animation.~~ [Announcement bar] Slides animation. May 15, 2023

eugenekasimov and others added 2 commits May 15, 2023 13:33

Merge branch 'main' into animation-announcement-bar

4443433

Remove unneccessary css code.

2575861

eugenekasimov self-assigned this May 18, 2023

Merge branch 'main' into animation-announcement-bar

a683dec

ludoboludo self-requested a review June 5, 2023 16:22

eugenekasimov requested a review from YoannJailin June 5, 2023 16:25

YoannJailin approved these changes Jun 5, 2023

View reviewed changes

KaichenWang self-requested a review June 6, 2023 16:16

ludoboludo reviewed Jun 6, 2023

View reviewed changes

assets/base.css Outdated Show resolved Hide resolved

assets/base.css Outdated Show resolved Hide resolved

KaichenWang reviewed Jun 6, 2023

View reviewed changes

eugenekasimov added 2 commits June 6, 2023 22:26

Refactor css. Change the order.

aeae987

Refactor JS.

2931bc8

Merge branch 'main' into animation-announcement-bar

f472919

KaichenWang reviewed Jun 7, 2023

View reviewed changes

ludoboludo reviewed Jun 7, 2023

View reviewed changes

assets/base.css Outdated Show resolved Hide resolved

assets/global.js Outdated Show resolved Hide resolved

KaichenWang reviewed Jun 7, 2023

View reviewed changes

assets/global.js Outdated Show resolved Hide resolved

Refactor css.

120d4f3

eugenekasimov added 5 commits June 14, 2023 16:10

Refactoring

cc6972d

Another refactoring

7ef82a7

Remove timeout and add delay in css

9327404

Refactoring

e4b07e7

Add no-js

dbdd4f4

KaichenWang reviewed Jun 19, 2023

View reviewed changes

assets/global.js Outdated Show resolved Hide resolved

eugenekasimov added 3 commits June 20, 2023 08:56

Prevent snapping during animation

6f767bd

Fix auto-rotation positioning

94f243f

Refactor applyAnimation

66b85cc

KaichenWang approved these changes Jun 20, 2023

View reviewed changes

assets/global.js Outdated Show resolved Hide resolved

assets/global.js Outdated Show resolved Hide resolved

KaichenWang requested a review from ludoboludo June 20, 2023 21:02

eugenekasimov and others added 3 commits June 21, 2023 08:44

Refactor and remove unused elements

8dd224a

ludoboludo reviewed Jun 21, 2023

View reviewed changes

eugenekasimov and others added 3 commits June 21, 2023 12:18

Merge branch 'main' into animation-announcement-bar

455d26e

Safari fix and addressing feadback

6862e85

Merge branch 'main' into animation-announcement-bar

9975886

ludoboludo reviewed Jun 23, 2023

View reviewed changes

eugenekasimov added 3 commits June 23, 2023 14:41

Correct typo

7412b11

Remove unnecessary code

1013873

Prevent applying animation when you scroll

1c4dd25

ludoboludo approved these changes Jun 27, 2023

View reviewed changes

Remove console.log

419b151

KaichenWang approved these changes Jun 27, 2023

View reviewed changes

assets/global.js Outdated Show resolved Hide resolved

ludoboludo reviewed Jun 27, 2023

View reviewed changes

assets/global.js Outdated Show resolved Hide resolved

Refactoring

9af7783

eugenekasimov merged commit b9a36ab into main Jun 28, 2023

eugenekasimov deleted the animation-announcement-bar branch June 28, 2023 16:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Announcement bar] Slides animation. #2595

[Announcement bar] Slides animation. #2595

eugenekasimov commented May 1, 2023 •

edited

Loading

ludoboludo left a comment

KaichenWang left a comment

KaichenWang Jun 6, 2023

eugenekasimov Jun 7, 2023 •

edited

Loading

KaichenWang Jun 7, 2023 •

edited

Loading

eugenekasimov commented Jun 7, 2023

KaichenWang Jun 7, 2023 •

edited

Loading

ludoboludo left a comment

KaichenWang commented Jun 7, 2023

KaichenWang left a comment

ludoboludo left a comment

ludoboludo Jun 21, 2023

eugenekasimov Jun 23, 2023

ludoboludo Jun 23, 2023

ludoboludo Jun 21, 2023

ludoboludo Jun 23, 2023

eugenekasimov Jun 23, 2023 •

edited

Loading

ludoboludo Jun 27, 2023

ludoboludo left a comment

ludoboludo Jun 27, 2023

KaichenWang left a comment

[Announcement bar] Slides animation. #2595

[Announcement bar] Slides animation. #2595

Conversation

eugenekasimov commented May 1, 2023 • edited Loading

PR Summary:

Why are these changes introduced?

What approach did you take?

Other considerations

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

ludoboludo left a comment

Choose a reason for hiding this comment

KaichenWang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eugenekasimov Jun 7, 2023 • edited Loading

Choose a reason for hiding this comment

KaichenWang Jun 7, 2023 • edited Loading

Choose a reason for hiding this comment

eugenekasimov commented Jun 7, 2023

KaichenWang Jun 7, 2023 • edited Loading

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

KaichenWang commented Jun 7, 2023

KaichenWang left a comment

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eugenekasimov Jun 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KaichenWang left a comment

Choose a reason for hiding this comment

eugenekasimov commented May 1, 2023 •

edited

Loading

eugenekasimov Jun 7, 2023 •

edited

Loading

KaichenWang Jun 7, 2023 •

edited

Loading

KaichenWang Jun 7, 2023 •

edited

Loading

eugenekasimov Jun 23, 2023 •

edited

Loading