Snow effect with random repositions on loop

[AmbrosiaDevelopments]

Hello fellow tweeners! I've been trying to make a snow fall effect that loops and randomizes the cx attribute on the SVG element I'm using. I have 3 codepens to try and explain my issue if you wouldn't mind indulging me for a moment. I am confused as to what I am doing wrong in the first two instances and how they could be fixed to have the same effect as the third instance. Additionally what I am hoping to be able to add is an effect of the particle staying on the ground for a little time before the loop repeats, this way it looks like snow is hitting the ground, building up and then melting while more snow continues to fall. Could anyone advise how I could achieve this with any of the pens provided please? Thank you so much! I just started using this library yesterday and I love it!

 

The first (xxyyKrM) is using a timeline with `progress()` and a repeating stagger. I'm attempting to use `repeatRefresh` to change the `x` value but because the repeat is in the stagger section it doesn't work. Because I'm not using an array of elements and a `forEach` loop I don't have access to the element that is being processed so I can't add an `onRepeat` function and pass in the element to it to have it set the values after each run. The effect is nice but it's not randomizing the positions on repeat and after a while becomes very noticeable.

See the Pen xxyyKrM by AmbrosiaDevelopments (@AmbrosiaDevelopments) on CodePen

 

The second attempt (JjmaqEx) I made is using a `forEach` loop and `gsap.to()` that has `onRepeat` which calls a function to randomize the `cx` value. This randomizing works now but upon first load, all snow is dumped at the same time, there is no stagger effect until each particle hits the ground, then it works fine.

See the Pen JjmaqEx by AmbrosiaDevelopments (@AmbrosiaDevelopments) on CodePen

 

In my third attempt (yLRRBqE) I stopped using `stagger` and `repeat` and instead used a `delay` with a `forEach()` loop. I use `onComplete` and call a function to randomize the position and then at the end of that call the function wrapper for the original `gsap.to()` call. Now I have the effect I want and it is randomizing the position each loop. Only drawback is that there is less snow in the frame at any one time compared to the other codepens.

 

 

 

See the Pen yLRRBqE by AmbrosiaDevelopments (@AmbrosiaDevelopments) on CodePen

[Rodrigo]

Hi @AmbrosiaDevelopments and welcome to the GreenSock Forums!

 

I'm not an expert in particle animations and normally they're not the simplest thing to achieve, but for what I can see what you need is just some delay between replays.

 

In your first two examples adding a repeatDelay option to the stagger config seems to work:

stagger: {
  each: 0.05,
  repeat: -1,
  repeatDelay: 5, // amount of seconds before it repeats
}

In your last example maybe this:

onComplete: () => gsap.delayedCall(5, () => setCx(dot, delay))

Also you can learn from the masters themselves (@Carl and  @OSUblake)

 

See the Pen BjNZYP by osublake (@osublake) on CodePen

 

Hopefully this helps.

Happy Tweening!

[AmbrosiaDevelopments]

Thank you! I've stuck with the third option and just added a `delayedCall`. I'm amazed by how a solution is always just around the corner with GSAP and there's nothing much it can't do. You just have to know what keywords to use to search the documentation!