Merge remote-tracking branch 'shopify/main' into next

* shopify/main:
  [Video] Add fade in on scroll animation (Shopify#2495)
  Animate rich text and email signup (Shopify#2408)
  [Gift card] Add help doc link and change label for translation (Shopify#2471)
  Add prettier config to support format-on-save (Shopify#2323)
  Announcements slideshow (Shopify#2394)
  fix: Update Follow on Shop Option Text (Shopify#2463)
  Enable "per-PR" async PR mode (Shopify#2488)
  Animate multicolumn (Shopify#2409)
  Fix improper image sizes in the collage section (Shopify#2478)
  Replaced depreciated liquid property/value (Shopify#2480)

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "printWidth": 120,
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["shopify.theme-check-vscode"]
+  "recommendations": ["shopify.theme-check-vscode", "esbenp.prettier-vscode"]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

assets/animations.js

@@ -6,17 +6,15 @@ function onIntersection(elements, observer) {
     if (element.isIntersecting) {
       const elementTarget = element.target;
       elementTarget.classList.add(SCROLL_ANIMATION_ACTIVE_CLASSNAME);
-      if (elementTarget.hasAttribute("data-cascade"))
+      if (elementTarget.hasAttribute('data-cascade'))
         elementTarget.setAttribute('style', `--animation-order: ${index};`);
       observer.unobserve(elementTarget);
     }
-  })
+  });
 }
 
 function initializeScrollAnimationTrigger(rootEl = document) {
-  const animationTriggerElements = Array.from(
-    rootEl.getElementsByClassName(SCROLL_ANIMATION_TRIGGER_CLASSNAME)
-  );
+  const animationTriggerElements = Array.from(rootEl.getElementsByClassName(SCROLL_ANIMATION_TRIGGER_CLASSNAME));
   if (animationTriggerElements.length === 0) return;
 
   const observer = new IntersectionObserver(onIntersection, {