Shopify Cart Drawer Animation Generator

{%- comment -%}
  Yokaify Cart Drawer Animation
  Pattern: Slide in from right
  Trigger: On add to cart
  Drop into:  sections/cart-drawer.liquid  (or wherever your drawer lives).
  Skips animations in the Theme Editor so saves don't replay them.
  Bundle: < 2 KB. CLS: 0. Respects prefers-reduced-motion.
{%- endcomment -%}

<style>
/* Yokaify cart-drawer animation — slide in from right */
#CartDrawer {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 320ms ease-out;
  will-change: transform, opacity;
}
#CartDrawer.is-open,
#CartDrawer[aria-hidden="false"] {
  transform: translateX(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #CartDrawer { transition: opacity 80ms linear; transform: none; }
}
</style>

{%- unless request.design_mode -%}
<script>
(function () {
  var drawer = document.querySelector('#CartDrawer');
  if (!drawer) return;
  function openDrawer() {
    drawer.classList.add('is-open');
    drawer.setAttribute('aria-hidden', 'false');
  }
  // Listen for add-to-cart events fired by Shopify section rendering API or theme JS.
document.addEventListener('cart:item-added', () => openDrawer());
document.querySelectorAll('form[action*="/cart/add"]').forEach((f) => {
  f.addEventListener('submit', () => setTimeout(openDrawer, 60));
});
})();
</script>
{%- endunless -%}

What this does

Pick a pattern, trigger, drawer selector, and duration. The generator gives you copy-paste Liquid and CSS for an animated Shopify cart drawer. No app, no framework.

A good cart-drawer animation:

• Confirms the add-to-cart so it feels like "yes, got it."
• Pulls the eye toward the Checkout button.
• Signals that the rest of the store is polished too.

Keep it subtle. A heavy, wobbly animation feels cheap and can annoy returning shoppers.

It will not break the Theme Editor

Shopify sets request.design_mode to true inside the Theme Editor. The snippet wraps its script in {% unless request.design_mode %}, so:

• On your live store, the drawer animates.
• In the Theme Editor, it stays still, so saving an unrelated section will not make it fly around.

More on this in request.design_mode.

Choosing a pattern

• Slide is the safe default. Calm and professional. Good for DTC, B2B, and luxury.
• Bounce is playful, with a small overshoot. Good for apparel, food, and pet. Avoid it where playful undercuts trust.
• Fade is minimalist. Use it when the drawer is busy with images or upsells.

If you are not sure, start with slide. You can tune the spring feel in the Framer Motion Spring Slider Builder.

Triggers

• On add to cart is the default and most useful. It confirms the action right away.
• On cart page load is only for the dedicated /cart page, not the drawer.
• On any cart update fires on add, remove, and quantity changes. It can feel busy if the cart updates often.

Accessibility

For visitors with prefers-reduced-motion: reduce, the animation drops to an 80 ms opacity fade. That meets WCAG 2.3.3 by default. The drawer should also be keyboard-operable (focusable close button, Escape to close), which is handled at the theme level.

What to do next

1. Pick pattern, trigger, drawer selector, and duration above.
2. Copy the generated Liquid block.
3. Paste it at the bottom of sections/cart-drawer.liquid in your theme code editor.
4. Save, then add a product on the storefront. The drawer should animate.
5. In the Theme Editor, click Save. The drawer should NOT replay.
6. Toggle reduced motion on your OS and confirm it drops to an opacity fade.