Adding Confetti Effects with JavaScript: A Fun Walkthrough

Want to add celebratory moments to your web app? JavaScript confetti animations turn ordinary interactions into memorable experiences. Whether you’re celebrating a successful purchase, form completion, or achievement unlock, confetti adds that extra spark of delight users remember.

This walkthrough covers two practical approaches: building a lightweight HTML Canvas confetti effect from scratch, and using production-ready libraries like js-confetti and canvas-confetti for faster implementation.

Choosing Your Confetti Approach

Quick Library Integration (2 Minutes to Deploy)

For most production applications, established confetti animation JavaScript libraries offer the best balance of features and simplicity.

js-confetti stands out for its zero-dependency architecture and emoji support:

<!-- CDN installation -->
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>

// Basic usage
const jsConfetti = new JSConfetti()

// Trigger colorful confetti
jsConfetti.addConfetti({
  confettiColors: ['#ff0a54', '#ff477e', '#ff7096'],
  confettiNumber: 100
})

// Or use emojis
jsConfetti.addConfetti({
  emojis: ['🎉', '✨', '💫', '🎊'],
  emojiSize: 50,
  confettiNumber: 30
})

canvas-confetti offers more physics customization:

<!-- CDN installation -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@latest/dist/confetti.browser.min.js"></script>

// Fireworks effect from specific origin
confetti({
  particleCount: 100,
  spread: 70,
  origin: { x: 0.5, y: 0.6 }, // Center, slightly below middle
  colors: ['#bb0000', '#ffffff']
})

Both libraries are lightweight, well-maintained, and handle cleanup automatically. The js-confetti library returns a Promise when animations complete, making it perfect for chaining actions:

await jsConfetti.addConfetti()
console.log('Celebration complete!')
// Proceed with next action

Building Vanilla Canvas Confetti (Zero Dependencies)

For complete control or when every byte counts, a vanilla HTML Canvas confetti implementation requires minimal code:

const canvas = document.getElementById('confetti-canvas')
const ctx = canvas.getContext('2d')
const particles = []

// Resize canvas to window
canvas.width = window.innerWidth
canvas.height = window.innerHeight

// Create particle with random properties
function createParticle() {
  return {
    x: Math.random() * canvas.width,
    y: -10,
    vx: (Math.random() - 0.5) * 2,
    vy: Math.random() * 3 + 2,
    color: `hsl(${Math.random() * 360}, 70%, 50%)`,
    size: Math.random() * 3 + 2
  }
}

// Animation loop
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  particles.forEach((p, index) => {
    p.x += p.vx
    p.y += p.vy
    p.vy += 0.1 // Gravity
    
    ctx.fillStyle = p.color
    ctx.fillRect(p.x, p.y, p.size, p.size)
    
    // Remove off-screen particles
    if (p.y > canvas.height) {
      particles.splice(index, 1)
    }
  })
  
  if (particles.length > 0) {
    requestAnimationFrame(animate)
  }
}

// Trigger confetti burst
function triggerConfetti() {
  for (let i = 0; i < 100; i++) {
    particles.push(createParticle())
  }
  animate()
}

This approach gives you complete control over physics, particle shapes, and rendering. However, you’ll need to handle cleanup, performance optimization, and browser compatibility yourself.

Production Best Practices for Confetti Effects

Respect User Preferences

Always check for motion sensitivity before triggering confetti animation JavaScript effects:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

if (!prefersReducedMotion) {
  jsConfetti.addConfetti()
} else {
  // Show static celebration message instead
  showSuccessMessage()
}

Optimize for Mobile Performance

Keep particle counts reasonable for smooth mobile experiences:

const isMobile = window.innerWidth < 768
const particleCount = isMobile ? 50 : 150

jsConfetti.addConfetti({
  confettiNumber: particleCount
})

Clean Up After Celebrations

canvas-confetti handles cleanup automatically. js-confetti provides a clearCanvas() method to reset the canvas, though it doesn’t cancel animations already in progress. For vanilla implementations, always clear resources:

// For js-confetti
jsConfetti.clearCanvas()

// For vanilla implementation
function cleanup() {
  particles.length = 0
  ctx.clearRect(0, 0, canvas.width, canvas.height)
}

Strategic Usage Patterns

Confetti effects work best when reserved for genuinely celebratory moments:

• ✅ Purchase completion
• ✅ Account creation success
• ✅ Achievement unlocked
• ✅ Milestone reached
• ❌ Every button click
• ❌ Page loads
• ❌ Minor interactions

Implementation Examples

Button Click Celebration

document.getElementById('purchase-btn').addEventListener('click', async () => {
  // Process the action first
  const success = await processPurchase()
  
  if (success) {
    // Then celebrate
    jsConfetti.addConfetti({
      confettiColors: ['#00ff00', '#ffffff'],
      confettiNumber: 75
    })
  }
})

Position-Based Confetti

Only canvas-confetti supports triggering confetti from precise screen positions. With js-confetti, confetti always fills the canvas without origin control.

// canvas-confetti: Trigger from mouse click coordinates
element.addEventListener('click', (e) => {
  confetti({
    particleCount: 80,
    spread: 70,
    origin: {
      x: e.clientX / window.innerWidth,
      y: e.clientY / window.innerHeight
    }
  })
})

This allows you to create effects like bursts from a clicked button, side cannons, or fireworks at specific locations.

Conclusion

JavaScript confetti effects transform routine interactions into memorable moments. While vanilla Canvas implementations offer complete control, libraries like js-confetti and canvas-confetti provide production-ready solutions that handle the complexities of cross-browser compatibility, performance optimization, and cleanup.

Choose libraries when you need quick, reliable implementation with good defaults. Build vanilla when you need precise control or zero dependencies. Either way, remember that the best confetti is used sparingly—save it for moments that truly deserve celebration.

FAQs

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.