Confetti Scripts for UpViral

Here’s some samples for putting confetti on your UpViral campaign.

First, you want to put these ONLY on the sharing page in the Advanced settings section. AND – put the script in the “Social Share Page Footer codes” section (not in the header – not 100% sure why, but the confetti won’t load if in the header).

Instructions

Confetti – comes from left and right

<!-- Confetti from Mitch Aunger and source: https://www.kirilv.com/canvas-confetti/ -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>

<script type="text/javascript">

// change duration here - first number is the number of seconds you want the confetti to display
var duration = 3 * 1000;
var end = Date.now() + duration;
 
(function frame() {
  // launch a few confetti from the left edge
  confetti({
    particleCount: 7,
    angle: 60,
    spread: 55,
    origin: { x: 0 }
  });
  // and launch a few from the right edge
  confetti({
    particleCount: 7,
    angle: 120,
    spread: 55,
    origin: { x: 1 }
  });
 
  // keep going until we are out of time
  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());</script>

confetti – pops randomly on the page (like fireworks)

<!-- Fireworks (random) confetti from Mitch Aunger and original source: https://www.kirilv.com/canvas-confetti/ -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>

<script type="text/javascript">
	
	// change duration here - first number is the number of seconds you want the confetti to display
	var duration = 10 * 1000;
	var animationEnd = Date.now() + duration;
	var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
	
	function randomInRange(min, max) {
	  return Math.random() * (max - min) + min;
	}
	
	var interval = setInterval(function() {
	  var timeLeft = animationEnd - Date.now();
	
	  if (timeLeft <= 0) {
	    return clearInterval(interval);
	  }
	
	  var particleCount = 100 * (timeLeft / duration);
	  // since particles fall down, start a bit higher than random
	  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
	  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
	}, 250);
</script>

General confetti – comes from left and right

<!-- Confetti from Mitch Aunger and source: https://www.kirilv.com/canvas-confetti/ -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>

<script type="text/javascript">

// do this for 3 seconds
var duration = 3 * 1000;
var end = Date.now() + duration;
 
(function frame() {
  // launch a few confetti from the left edge
  confetti({
    particleCount: 7,
    angle: 60,
    spread: 55,
    origin: { x: 0 }
  });
  // and launch a few from the right edge
  confetti({
    particleCount: 7,
    angle: 120,
    spread: 55,
    origin: { x: 1 }
  });
 
  // keep going until we are out of time
  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());</script>