Scroll Animation for Shopify: The Complete Guide (2026)

// Manual scroll animation on Shopify — 47+ lines before mobile
const canvas = document.getElementById('scroll-canvas');
const ctx = canvas.getContext('2d');
const frames = [];
let currentFrame = 0;

async function preloadFrames(count) {
  await Promise.all(Array.from({ length: count }, (_, i) => {
    const img = new Image();
    const padded = String(i).padStart(4, '0');
    img.src = `https://your-cdn.com/frames/frame-${padded}.jpg`;
    frames.push(img);
    return new Promise((r) => { img.onload = r; img.onerror = r; });
  }));
}

function drawFrame(index) {
  if (!frames[index]) return;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(frames[index], 0, 0, canvas.width, canvas.height);
}

window.addEventListener('scroll', () => {
  const rect = canvas.parentElement.getBoundingClientRect();
  const scrolled = -rect.top;
  const total = rect.height - window.innerHeight;
  const progress = Math.max(0, Math.min(1, scrolled / total));
  const frameIndex = Math.floor(progress * (frames.length - 1));
  if (frameIndex !== currentFrame) {
    currentFrame = frameIndex;
    requestAnimationFrame(() => drawFrame(currentFrame));
  }
}, { passive: true });

// Still needed: resize handler, mobile touch events,
// Safari canvas fix, Liquid theme injection,
// CDN setup for 120+ JPEG files, lazy loading...
preloadFrames(120).then(() => drawFrame(0));