Jump to content


Reset Element Without Stopping Its Animation

Recommended Posts


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

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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


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