Confetti on scroll

[fernandocomet 3 Likes (Newbie)]

I wonder if this can be done better. 

 

Want to play the Confetti when user scrolls at "launcher"

How to stop it?

See the Pen abjEJvW by fernandocomet (@fernandocomet) on CodePen

[Cassie 5,412 Likes (Superhero)]

Hey there! Are you asking how to stop the confetti?

Looks like the lib has a confetti.reset() option

https://www.npmjs.com/package/canvas-confetti

Does that help?

 

[fernandocomet 3 Likes (Newbie)]

Mmmm, not sure if it is working, I added onLeave:

 

 let tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".launcher",
        onEnter: myConfetti,
        onLeave: confetti.reset(),
        toggleActions: "restart pause resume pause"
      }
 })

 

See the Pen abjEJvW by fernandocomet (@fernandocomet) on CodePen

[Rodrigo 5,436 Likes (Superhero)]

Hi

 

I see the confetti stopping at some point. Is that where you want it to stop? You need the confetti to stop at some specific point?

 

Let us know if you have more questions.

 

Happy Tweening!

[fernandocomet 3 Likes (Newbie)]

Thanks again!

 

For example I want the confetti effect just when user is over that section.

 

So if I have this structure:

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

 

I added another ScrollTrigger to stop it once you enter the spacers

 let tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".launcher",
        onEnter: myConfetti,
        onLeave: confetti.reset(),
        toggleActions: "restart pause resume pause"
      }
 })
 
 let tl2 = gsap.timeline({
      scrollTrigger: {
        trigger: ".spacer",
        onEnter: confetti.reset(),
        toggleActions: "restart pause resume pause"
      }
 })

 

I don´t think that is doing nothing, the Confetti lasts for 3 seconds anyway:

function myConfetti() {var end = Date.now() + (3 * 1000);
 

Updated Codepen 

See the Pen abjEJvW by fernandocomet (@fernandocomet) on CodePen

[akapowl 5,225 Likes (Superhero)]

 

Hello there.

 

So, if you don't want the confetti to play for a certain duration of time, don't make it request a new animationFrame depending on wether a certain amount of time has passed - but instead make it dependent on wether a certain scenario is the case / condition is met.

 

You could e.g. set up a boolean variable (playConfetti in this case below) and toggle that variable to true/false depending on wether you enter or leave the section. When you enter the section, also call the function that plays the confetti - inside that function call the requestAnimationFrame only when the playConfetti variable is true (checked with the if condition that earlier had the check on the time passed, in your demo).

 

Something like this maybe:

 

See the Pen NWByZqg by akapowl (@akapowl) on CodePen

 

[fernandocomet 3 Likes (Newbie)]

Thanks a lot! That works