Confetti

confetti.markdown

Confetti

A Pen by Bhakti Budiman Novanda on CodePen.

License.

index.html

<div class="clicker" id="clicker"> Clicker </div>
<div class="spacer"> Spacer </div>
<div class="launcher" id="launcher"> Launcher </div>
<div class="spacer">Spacer</div>

script.js

let playConfetti = true

function myConfetti() {
  
  // change colors
  var colors = ['#8f00ff', '#fbf9fc'];

  (function frame() {
    
    console.log('confetti-ing')
    
    confetti({
      particleCount: 2,
      angle: 60,
      spread: 40,
      origin: { x: 0 },
      colors: colors
    });
    confetti({
      particleCount: 2,
      angle: 120,
      spread: 40,
      origin: { x: 1 },
      colors: colors
    });

    if (playConfetti) {
      requestAnimationFrame(frame);
    }

  }());
  
}

ScrollTrigger.create({
  
  trigger: ".launcher",
  start: 'top center',
  end: 'bottom center',
  markers: true,
  onEnter: () => { 
    playConfetti = true 
    myConfetti()
  },
  onEnterBack: () => { 
    playConfetti = true 
    myConfetti()
  },
  onLeave: () => { playConfetti = false },
  onLeaveBack: () => { playConfetti = false },
  
})

scripts

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

style.css

.clicker{
  width: 100%;
  height: 6rem;
  background-color: gold;
}
.spacer{
  width: 100%;
  height: 300vh;
  background-color: tomato;
}
.launcher{
  width: 100%;
  height: 10rem;
  background-color: greenyellow;
  overflow: hidden;
}