Easter egg

14 views

3 min

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

Learn how to trigger confetti when a visitor finishes reading your Webflow article with canvas-confetti.

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to trigger confetti when a visitor reaches the end of your Webflow article.

Example

Test both trigger modes

End of article

Fireworks from both corners

Progressive milestones

Light confetti at 50%, full confetti at 100%

Parameter	Value	Description
Trigger	scroll >= total - 100px	100px before the end of the page
fired	Boolean	Prevents the confetti from repeating
Origin	x: 0 and x: 1	Fireworks from both corners

1. Load canvas-confetti in the head

// In Page Settings > Head :
//

2. Add an end message (optional)

Create a Div with the ID article-finished and set it to display none at the end of your article. It will show when the reader reaches the end. Put your end-of-article CTA in it.

3. Add the script in Footer code

(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 });
})();

4. Variation: progressive stars

For a subtler effect at the 50% and 100% milestones:

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 });

good to know

The total - 100px threshold (100px before the end of the page) keeps the confetti from firing only when the user scrolls to the very last pixel, which almost never happens. Adjust this threshold based on the length of your footer: if your footer is 400px tall, raise the threshold to total - 500px so it fires at the end of the real content.

Conclusion

End-of-article confetti creates a moment of celebration and memorability. Use cases:

Long, dense articles that reward people for reading all the way through
Tutorials with a completion reward
Landing pages with scroll storytelling

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss