Reset Element Without Stopping Its Animation

[Lark]

Hello!

I'm trying to make a rain effect that's is at least midly efficient. In the below example, when an element reaches its destination it is deleted, then a new element is created.

I would like to, instead, have an element reshuffle its size and color, then move to a new initial position and just fall again.

I tried rewriting the generateRainDrop function, to have it take an existing drop and just set its size , color, and position.

This worked to the extent that the boxes did reshuffle, but then they stopped spinning - they just fell down.

I tried using pause and play in between setting, and also tried using invalidate, to varying degrees of failure.

At no point could I get a box to: randomly change size, color and initial position then continue falling and spinning, without recreating the box fully.

See the Pen ZEXemXg by LarkRanger (@LarkRanger) on CodePen

[_Greg _]

Hi!

Not sure that this is right way, i think is simple way to use `repeatRefresh`

 

Check 

See the Pen dyVvaaY?editors=0010 by gregOnCodePen (@gregOnCodePen) on CodePen

 

duration, delay, and stagger you can't update with this method.

[Lark]

That is actually really cool.

I tried repeatRefresh but couldn't get it to work with the randomizer functions being outer scope, but I guess that if you implement all the colors like this it works just fine, haven't tried that. Thanks!

[Carl]

you were on the right track with using the onComplete to call a function that did stuff again.

I separated the animating and generating functions so that when each drop was done animating it would call a function that would reposition it and animate it again.

 

I was working quickly so I hacked some things up a bit. But this should show the general idea and I'm sure you can add back in some of your other things without any trouble

 

See the Pen MWEpxbR?editors=0010 by snorkltv (@snorkltv) on CodePen