How to Trigger Confetti at the End of an Article in Webflow

// In Page Settings > Head :
// <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1/dist/confetti.browser.min.js"></script>

(function() {
  if (typeof confetti !== 'function') return;
  var fired = false;

  window.addEventListener('scroll', function() {
    if (fired) return;
    var scrolled = window.scrollY + window.innerHeight;
    var total = document.documentElement.scrollHeight;
    if (scrolled >= total - 100) {
      fired = true;
      // Fireworks from both corners
      confetti({ particleCount: 80, angle: 60, spread: 55, origin: { x: 0, y: 0.8 } });
      confetti({ particleCount: 80, angle: 120, spread: 55, origin: { x: 1, y: 0.8 } });
      // Congratulations message
      var el = document.getElementById('article-finished');
      if (el) el.style.display = 'block';
    }
  }, { passive: true });
})();

var milestones = { 50: false, 100: false };
window.addEventListener('scroll', function() {
  var pct = Math.round((window.scrollY + window.innerHeight) / document.documentElement.scrollHeight * 100);
  if (pct >= 50 && !milestones[50]) {
    milestones[50] = true;
    confetti({ particleCount: 30, spread: 50, origin: { y: 0.6 } });
  }
  if (pct >= 100 && !milestones[100]) {
    milestones[100] = true;
    confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } });
  }
}, { passive: true });