Jump to content
Search Community

Confetti on scroll

fernandocomet test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

 

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

  • Solution

 

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

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...