How can I make those circles animate ?

Question

I want to make these circles appear from top and then going into bottom with in a stipulated time like in this code https://code.sololearn.com/Wm198S0Ra8Xc/?ref=app. How can I acheive it using pure js ??
My try :
https://code.sololearn.com/WDlQoQDaOsVz/?ref=app

Answer 1

I tried to modify your canvas, added Ball class, initiatiated 100 balls at above screen positions and animate them downwards by using requestAnimationFrame function
https://code.sololearn.com/W0Fz9EoQPHt3/?ref=app

Answer 2

By Using Animate Elements !

Answer 3

Thx Toni Isotalo , Calviղ and Gordon for Ur answers.

Answer 4

https://code.sololearn.com/WFuNNvutXVxY

Answer 5

It's really good to see you progressing, Arushi.

While Calvin's example code specially coded for you is sufficient to solve your problem for one time, I recommend you still go through this step-by-step tutorial by 「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」for more understanding on loop.
https://code.sololearn.com/Wpd4P6GX7jUF/?ref=app