Jump to content
Search Community

Snow effect with random repositions on loop

AmbrosiaDevelopments test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 4
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...