Responsive confetti animation

[DanielLav]

Hello! I'm trying to implement confetti effect made with gsap to my project 💗

 

The problem is that when changing the window width / orientation, I need the width and height of the container where the confetti is located to be recalculated.

 

I tried to implement this with a timeline (instead of the usual gsap), but I couldn't do it because the Random property was removed from gsap version 3 (at least that's what my PhpStorm says).

 

Here is link to my codepen with code:

 

How can I implement a confetti animation that will adjust to the width of the user's window and that can be turned off by itself (for example, by clicking on a button)?

 

Many thanks in advance for your advice and help.
I believe that the GSAP team, as always, will come to the rescue

 

 

See the Pen ZEmKyPq by ProjectDCL (@ProjectDCL) on CodePen

[Rodrigo]

Hi,

 

6 hours ago, DanielLav said:

I tried to implement this with a timeline (instead of the usual gsap), but I couldn't do it because the Random property was removed from gsap version 3 (at least that's what my PhpStorm says).

Not at all, there's definitely something wrong with your PhpStorm config or the way is getting the information. From the gsap.to() docs:

Random values
Define random values as a string like "random(-100, 100)" for a range or like "random([red, blue, green])" for an array and GSAP will swap in a random value for each target accordingly! This makes advanced randomized effects simple. You can even have the random number rounded to the closest increment of any number! For example:

gsap.to(".class", {
  // chooses a random number between -100 and 100
  // for each target, rounding to the closest 5!
  x:"random(-100, 100, 5)"
});

Or use an array-like value and GSAP will randomly select one of those:

gsap.to(".class", {
  x:"random([0, 100, 200, 500])" // randomly selects one of the values (0, 100, 200, or 500)
}); 

Also the utils methods include a random method as well:

https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

You can also use function based values as well, a wide range of options here.

 

You could take a peek at GSAP MatchMedia:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Although GSAP Context could also be a good option here as well, if you want to reset everything on every resize event (I would debounce those resize events though for better performance):

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Something like this:

let ctx;

const createConfetti = () => {
  ctx && ctx.revert();
  ctx = gsap.context(() => {
    // Create your confetti in here
  });
};

window.addEventListener("resize", () => {
  // debounce and then call createConfetti again
});

Like that GSAP Context will take care of reverting every GSAP instance you create inside.

 

Hopefully this helps.

Happy Tweening!