// Traditional approach (slow, causes repaints)
function traditionalApproach(frameNumber) {
  const img = document.querySelector('.product-image');
  img.src = frames/frame-${frameNumber}.jpg; // Causes entire DOM repaint
}
// Canvas approach (fast, GPU-accelerated)
function canvasApproach(frameNumber, canvas, ctx, images) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(images[frameNumber], 0, 0, canvas.width, canvas.height);
  // Only canvas pixels update, not DOM layout
}

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// ScrollTrigger configuration
const animation = gsap.timeline({
  scrollTrigger: {
    trigger: '#canvas-container',
    start: 'top top',          // Start when container hits top of viewport
    end: 'bottom bottom',       // End when container bottom hits viewport bottom
    scrub: 1,                   // Smooth scrubbing with 1s delay
    pin: true,                  // Pin container during animation
    anticipatePin: 1,           // Prevent jump when pinning starts
  }
});
// Map scroll progress (0-1) to frame number (0-totalFrames)
animation.to(frameObj, {
  frame: totalFrames - 1,
  snap: 'frame',                // Snap to integer frame numbers
  ease: 'none',                 // Linear progression
  onUpdate: () => {
    // Render current frame to canvas
    renderFrame(Math.floor(frameObj.frame));
  },
});

Image sequence structure
/frames/
  ├── frame-000.jpg
  ├── frame-001.jpg
  ├── frame-002.jpg
  ...
  └── frame-279.jpg
Optimization requirements
•Format: JPEG (balance quality vs. size) or WebP (better compression)
•Resolution: 2000px-4000px width (retina displays)
•Compression: 70-85% quality (balance sharpness vs. file size)
•Total frames: 100-300 (more frames = smoother, but larger download)

// Complete scroll zoom architecture
class ScrollZoomAnimation {
  constructor(config) {
    this.canvas = config.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.frameCount = config.frameCount;
    this.images = [];
    this.currentFrame = 0;
    this.init();
  }
  async init() {
    // 1. Preload all images
    await this.preloadImages();
    // 2. Set canvas size
    this.resizeCanvas();
    // 3. Set up GSAP ScrollTrigger
    this.setupScrollTrigger();
    // 4. Render first frame
    this.renderFrame(0);
  }
  async preloadImages() {
    const promises = [];
    for (let i = 0; i < this.frameCount; i++) {
      const img = new Image();
      const promise = new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = reject;
      });
      img.src = ./frames/frame-${String(i).padStart(3, '0')}.jpg;
      this.images[i] = img;
      promises.push(promise);
    }
    await Promise.all(promises);
    console.log(Preloaded ${this.frameCount} frames);
  }
  setupScrollTrigger() {
    const frameObj = { frame: 0 };
    gsap.to(frameObj, {
      frame: this.frameCount - 1,
      snap: 'frame',
      ease: 'none',
      scrollTrigger: {
        trigger: this.canvas.parentElement,
        start: 'top top',
        end: 'bottom bottom',
        scrub: 0.5,
        onUpdate: (self) => {
          const frame = Math.floor(frameObj.frame);
          this.renderFrame(frame);
        },
      },
    });
  }
  renderFrame(frameNumber) {
    if (this.currentFrame === frameNumber) return; // Skip if already rendered
    this.currentFrame = frameNumber;
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    const img = this.images[frameNumber];
    if (!img || !img.complete) return;
    // Center and scale image to cover canvas
    const scale = Math.max(
      this.canvas.width / img.width,
      this.canvas.height / img.height
    );
    const x = (this.canvas.width - img.width * scale) / 2;
    const y = (this.canvas.height - img.height * scale) / 2;
    this.ctx.drawImage(
      img,
      x, y,
      img.width * scale,
      img.height * scale
    );
  }
  resizeCanvas() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
  }
}
// Usage
const animation = new ScrollZoomAnimation({
  canvas: document.querySelector('#scroll-canvas'),
  frameCount: 280,
});

Create project structure
mkdir scroll-zoom-animation
cd scroll-zoom-animation
Initialize npm project
npm init -y
Install GSAP
npm install gsap
Create directory structure
mkdir -p public/frames src
touch src/index.html src/main.js src/styles.css

  
  
  
  


  
  

    
Experience the Future
    
Scroll to explore our product in 3D
  
  
  

    
    

      Scroll to explore
      

    
  

  
  

    
Product Details
    
Detailed information about the product...
  

  

/* src/styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #000;
  color: #fff;
}
.intro,
.details {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-align: center;
}
.intro h1 {
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
#canvas-container {
  position: relative;
  height: 300vh; /* Creates scroll range: 3x viewport height */
  width: 100%;
}
#scroll-canvas {
  position: sticky; /* Canvas stays in viewport while scrolling */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  animation: fadeIn 1s 1s forwards, bounce 2s 2s infinite;
}
.arrow-down {
  width: 30px;
  height: 30px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  margin: 1rem auto 0;
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  #canvas-container {
    height: 200vh; /* Shorter scroll range on mobile */
  }
}

// src/main.js
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
class ScrollZoomEffect {
  constructor(options) {
    this.canvas = document.querySelector(options.canvasSelector);
    this.ctx = this.canvas.getContext('2d', { alpha: false }); // Disable alpha for performance
    this.frameCount = options.frameCount;
    this.framePath = options.framePath;
    this.images = [];
    this.currentFrame = 0;
    this.loadedFrames = 0;
    // Bind methods
    this.handleResize = this.handleResize.bind(this);
    this.init();
  }
  async init() {
    // Show loading indicator
    this.showLoader();
    // Start preloading images
    await this.preloadImages();
    // Setup canvas and animation
    this.setupCanvas();
    this.setupScrollAnimation();
    // Handle window resize
    window.addEventListener('resize', this.handleResize);
    // Hide loader and render first frame
    this.hideLoader();
    this.render(0);
  }
  showLoader() {
    const loader = document.createElement('div');
    loader.id = 'loader';
    loader.innerHTML = 
      

        

        
Loading experience... 0%
      

    ;
    document.body.appendChild(loader);
  }

  hideLoader() {
    const loader = document.getElementById('loader');
    if (loader) {
      loader.style.opacity = '0';
      setTimeout(() => loader.remove(), 500);
    }
  }
  updateProgress() {
    const progress = Math.round((this.loadedFrames / this.frameCount) * 100);
    const progressEl = document.getElementById('progress');
    if (progressEl) progressEl.textContent = progress;
  }
  async preloadImages() {
    const imagePromises = [];
    for (let i = 0; i < this.frameCount; i++) {
      const img = new Image();
      const promise = new Promise((resolve, reject) => {
        img.onload = () => {
          this.loadedFrames++;
          this.updateProgress();
          resolve();
        };
        img.onerror = reject;
      });
      // Generate filename: frame-000.jpg, frame-001.jpg, etc.
      const frameNumber = String(i).padStart(3, '0');
      img.src = ${this.framePath}/frame-${frameNumber}.jpg;
      this.images[i] = img;
      imagePromises.push(promise);
    }
    try {
      await Promise.all(imagePromises);
      console.log(✓ Loaded ${this.frameCount} frames successfully);
    } catch (error) {
      console.error('Error loading frames:', error);
    }
  }
  setupCanvas() {
    this.canvas.width = window.innerWidth * window.devicePixelRatio;
    this.canvas.height = window.innerHeight * window.devicePixelRatio;
    this.canvas.style.width = ${window.innerWidth}px;
    this.canvas.style.height = ${window.innerHeight}px;
  }
  handleResize() {
    this.setupCanvas();
    this.render(this.currentFrame); // Re-render current frame
  }
  setupScrollAnimation() {
    const obj = { frame: 0 };
    gsap.to(obj, {
      frame: this.frameCount - 1,
      snap: 'frame',
      ease: 'none',
      scrollTrigger: {
        trigger: this.canvas.parentElement,
        start: 'top top',
        end: 'bottom bottom',
        scrub: 0.5, // Smooth scrubbing with 0.5s delay
        onUpdate: (self) => {
          const targetFrame = Math.round(obj.frame);
          this.render(targetFrame);
        },
      },
    });
    // Hide scroll indicator when animation starts
    ScrollTrigger.create({
      trigger: this.canvas.parentElement,
      start: 'top 80%',
      onEnter: () => {
        gsap.to('.scroll-indicator', { opacity: 0, duration: 0.5 });
      },
    });
  }
  render(frameNumber) {
    if (frameNumber === this.currentFrame) return; // Skip if frame unchanged
    this.currentFrame = frameNumber;
    const img = this.images[frameNumber];
    if (!img || !img.complete) {
      console.warn(Frame ${frameNumber} not loaded);
      return;
    }
    // Clear canvas
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    // Calculate scaling to cover canvas (like CSS background-size: cover)
    const scale = Math.max(
      this.canvas.width / img.width,
      this.canvas.height / img.height
    );
    const x = (this.canvas.width - img.width * scale) / 2;
    const y = (this.canvas.height - img.height * scale) / 2;
    // Draw image centered and scaled
    this.ctx.drawImage(
      img,
      x,
      y,
      img.width * scale,
      img.height * scale
    );
  }
}
// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  const scrollZoom = new ScrollZoomEffect({
    canvasSelector: '#scroll-canvas',
    frameCount: 280, // Total number of frames
    framePath: './frames', // Path to frame images
  });
});

/* Add to styles.css */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s;
}
.loader-content {
  text-align: center;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
#loader p {
  color: #fff;
  font-size: 1rem;
}

class ProgressiveLoader {
  constructor(config) {
    this.lowResPath = config.lowResPath; // e.g., './frames/lowres/'
    this.highResPath = config.highResPath; // e.g., './frames/highres/'
    this.frameCount = config.frameCount;
    this.lowResImages = [];
    this.highResImages = [];
  }
  async loadLowRes() {
    console.log('Loading low-res preview...');
    const promises = [];
    for (let i = 0; i < this.frameCount; i++) {
      const img = new Image();
      const promise = new Promise((resolve) => {
        img.onload = resolve;
      });
      img.src = ${this.lowResPath}/frame-${String(i).padStart(3, '0')}.jpg;
      this.lowResImages[i] = img;
      promises.push(promise);
    }
    await Promise.all(promises);
    console.log('✓ Low-res frames loaded');
  }
  async loadHighRes() {
    console.log('Loading high-res frames...');
    // Load high-res frames in the background
    for (let i = 0; i < this.frameCount; i++) {
      const img = new Image();
      img.onload = () => {
        this.highResImages[i] = img;
      };
      img.src = ${this.highResPath}/frame-${String(i).padStart(3, '0')}.jpg;
    }
  }
  getImage(frameNumber) {
    // Return high-res if available, otherwise low-res
    return this.highResImages[frameNumber] || this.lowResImages[frameNumber];
  }
}

function supportsWebP() {
  const canvas = document.createElement('canvas');
  return canvas.toDataURL('image/webp').startsWith('data:image/webp');
}
class SmartImageLoader {
  constructor(config) {
    this.format = supportsWebP() ? 'webp' : 'jpg';
    this.framePath = config.framePath;
    this.frameCount = config.frameCount;
  }
  getFrameURL(frameNumber) {
    const num = String(frameNumber).padStart(3, '0');
    return ${this.framePath}/frame-${num}.${this.format};
  }
  async preload() {
    const images = [];
    for (let i = 0; i < this.frameCount; i++) {
      const img = new Image();
      img.src = this.getFrameURL(i);
      images[i] = img;
    }
    await Promise.all(
      images.map(img => new Promise(resolve => {
        if (img.complete) resolve();
        else img.onload = resolve;
      }))
    );
    return images;
  }
}

class LazyFrameLoader {
  constructor(config) {
    this.framePath = config.framePath;
    this.frameCount = config.frameCount;
    this.loadedFrames = new Map();
    this.loadingFrames = new Set();
    this.cacheSize = config.cacheSize || 50; // Keep 50 frames in memory
  }
  async getFrame(frameNumber) {
    // Return if already loaded
    if (this.loadedFrames.has(frameNumber)) {
      return this.loadedFrames.get(frameNumber);
    }
    // Wait if already loading
    if (this.loadingFrames.has(frameNumber)) {
      await this.waitForFrame(frameNumber);
      return this.loadedFrames.get(frameNumber);
    }
    // Load frame
    return this.loadFrame(frameNumber);
  }
  async loadFrame(frameNumber) {
    this.loadingFrames.add(frameNumber);
    const img = new Image();
    await new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = reject;
      img.src = ${this.framePath}/frame-${String(frameNumber).padStart(3, '0')}.jpg;
    });
    this.loadedFrames.set(frameNumber, img);
    this.loadingFrames.delete(frameNumber);
    // Manage cache size
    if (this.loadedFrames.size > this.cacheSize) {
      const oldestFrame = this.loadedFrames.keys().next().value;
      this.loadedFrames.delete(oldestFrame);
    }
    return img;
  }
  // Preload frames around current frame
  async preloadRange(currentFrame, range = 10) {
    const promises = [];
    for (let i = -range; i <= range; i++) {
      const frame = currentFrame + i;
      if (frame >= 0 && frame < this.frameCount) {
        promises.push(this.getFrame(frame));
      }
    }
    await Promise.all(promises);
  }
}

class MobileOptimizedScroll {
  constructor(config) {
    this.isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    this.isLowPower = this.detectLowPowerMode();
    // Adjust frame count for mobile
    if (this.isMobile) {
      config.frameCount = Math.floor(config.frameCount / 2); // Use half the frames
    }
    // Use static image fallback on low-power devices
    if (this.isLowPower) {
      this.useFallback(config);
      return;
    }
    this.init(config);
  }
  detectLowPowerMode() {
    // Heuristics for low-power devices
    const memory = navigator.deviceMemory; // GB of RAM
    const cores = navigator.hardwareConcurrency;
    return memory < 4 || cores < 4;
  }
  useFallback(config) {
    // Show static image instead of animation
    const img = document.createElement('img');
    img.src = ${config.framePath}/frame-140.jpg; // Middle frame
    img.style.width = '100%';
    img.style.height = '100vh';
    img.style.objectFit = 'cover';
    const canvas = document.querySelector(config.canvasSelector);
    canvas.replaceWith(img);
    console.log('Using static image fallback for low-power device');
  }
  init(config) {
    // Regular initialization
  }
}

// hooks/useScrollZoom.ts
import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
interface UseScrollZoomOptions {
  frameCount: number;
  framePath: string;
  scrollTriggerStart?: string;
  scrollTriggerEnd?: string;
}
export function useScrollZoom(options: UseScrollZoomOptions) {
  const canvasRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [loadProgress, setLoadProgress] = useState(0);
  const imagesRef = useRef([]);
  useEffect(() => {
    if (!canvasRef.current) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d', { alpha: false });
    if (!ctx) return;
    let scrollTriggerInstance: ScrollTrigger;
    // Preload images
    const loadImages = async () => {
      const images: HTMLImageElement[] = [];
      let loaded = 0;
      const promises = Array.from({ length: options.frameCount }, (_, i) => {
        return new Promise((resolve) => {
          const img = new Image();
          img.onload = () => {
            loaded++;
            setLoadProgress((loaded / options.frameCount) * 100);
            resolve();
          };
          img.src = ${options.framePath}/frame-${String(i).padStart(3, '0')}.jpg;
          images[i] = img;
        });
      });
      await Promise.all(promises);
      imagesRef.current = images;
      setIsLoaded(true);
      return images;
    };
    // Setup animation
    const setupAnimation = (images: HTMLImageElement[]) => {
      // Set canvas size
      canvas.width = window.innerWidth * window.devicePixelRatio;
      canvas.height = window.innerHeight * window.devicePixelRatio;
      canvas.style.width = ${window.innerWidth}px;
      canvas.style.height = ${window.innerHeight}px;
      const frameObj = { frame: 0 };
      const render = (frameNumber: number) => {
        const img = images[frameNumber];
        if (!img || !img.complete) return;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const scale = Math.max(
          canvas.width / img.width,
          canvas.height / img.height
        );
        const x = (canvas.width - img.width * scale) / 2;
        const y = (canvas.height - img.height * scale) / 2;
        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
      };
      gsap.to(frameObj, {
        frame: options.frameCount - 1,
        snap: 'frame',
        ease: 'none',
        scrollTrigger: {
          trigger: canvas.parentElement,
          start: options.scrollTriggerStart || 'top top',
          end: options.scrollTriggerEnd || 'bottom bottom',
          scrub: 0.5,
          onUpdate: () => {
            render(Math.round(frameObj.frame));
          },
        },
        onStart: () => {
          scrollTriggerInstance = ScrollTrigger.getById(
            scrollTriggerInstance?.vars?.id
          ) as ScrollTrigger;
        },
      });
      // Initial render
      render(0);
    };
    // Initialize
    (async () => {
      const images = await loadImages();
      setupAnimation(images);
    })();
    // Cleanup
    return () => {
      if (scrollTriggerInstance) {
        scrollTriggerInstance.kill();
      }
    };
  }, [options.frameCount, options.framePath, options.scrollTriggerStart, options.scrollTriggerEnd]);
  return {
    canvasRef,
    isLoaded,
    loadProgress,
  };
}

// components/ScrollZoomAnimation.tsx
import { useScrollZoom } from '@/hooks/useScrollZoom';
interface ScrollZoomAnimationProps {
  frameCount: number;
  framePath: string;
  height?: string;
}
export function ScrollZoomAnimation({
  frameCount,
  framePath,
  height = '300vh',
}: ScrollZoomAnimationProps) {
  const { canvasRef, isLoaded, loadProgress } = useScrollZoom({
    frameCount,
    framePath,
  });
  return (
    

      

      {!isLoaded && (
        

          

            

            
Loading... {Math.round(loadProgress)}%
          
        
      )}
    
  );
}

// app/product/page.tsx
import { ScrollZoomAnimation } from '@/components/ScrollZoomAnimation';
export default function ProductPage() {
  return (
    

      

        
Introducing Our Product
        
Scroll to explore
      

      
      

        
Product Details
        
Detailed information...
      
    
  );
}

// BAD: Hijacking scroll
function badScrollJacking() {
  let isScrolling = false;
  window.addEventListener('wheel', (e) => {
    e.preventDefault(); // DON'T DO THIS!
    // Custom scroll behavior
  });
}
// GOOD: Let native scroll work
function goodScrollHandling() {
  // GSAP ScrollTrigger handles scroll naturally
  // Users maintain full control
}

Use image optimization tools
ImageMagick example
for i in {000..279}; do
  magick frames/frame-$i.jpg \
    -resize 2000x \
    -quality 80 \
    optimized/frame-$i.jpg
done
Or use modern WebP format
for i in {000..279}; do
  cwebp -q 80 frames/frame-$i.jpg \
    -o frames/frame-$i.webp
done

// Priority loading strategy
class PriorityLoader {
  async load(frameCount, framePath) {
    // 1. Load first and last frames immediately (for preview)
    await this.loadPriority([0, frameCount - 1], framePath);
    // 2. Load every 10th frame (for low-quality preview)
    await this.loadPriority(
      Array.from({ length: frameCount / 10 }, (_, i) => i * 10),
      framePath
    );
    // 3. Load remaining frames
    await this.loadRemaining(frameCount, framePath);
  }
}

// Accessibility enhancements
function addAccessibility(containerSelector) {
  const container = document.querySelector(containerSelector);
  // Add keyboard navigation
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowDown') {
      window.scrollBy({ top: 100, behavior: 'smooth' });
    } else if (e.key === 'ArrowUp') {
      window.scrollBy({ top: -100, behavior: 'smooth' });
    }
  });
  // Add ARIA labels
  const canvas = container.querySelector('canvas');
  canvas.setAttribute('role', 'img');
  canvas.setAttribute('aria-label', 'Interactive 3D product view. Scroll to explore different angles.');
  // Provide alternative text content
  const altText = document.createElement('div');
  altText.className = 'sr-only';
  altText.textContent = 'This section shows an interactive 3D view of our product. You can scroll through to see the product from different angles.';
  container.appendChild(altText);
}

const costs = {
  development: '$5,000-$15,000', // 2-4 weeks of dev work
  design: '$3,000-$10,000', // 3D rendering or photography
  hosting: '$50-$200/month', // CDN for image delivery
  maintenance: '$1,000/year', // Updates and optimization
};
const benefits = {
  engagement: '+30-50% time on page',
  conversion: '+20-35% for premium products',
  brand_perception: 'Significant premium positioning',
  social_sharing: '+50-150% share rate',
};