javascript – Scroll items along an axis

Question:

It is necessary to scroll the circles along the axis for 7 seconds and gradually reduce the speed of movement to zero with each second.

Initially, everything moves normally, but by the end of time the elements bump into each other.

function loop() {

    step = 1 / 60;
    speed -= step;

    if(speed <= 0) clearInterval(interval);
    for(var i = 0; i < angles.length; i++) {

        angle = angles[i].angle;

        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);

        $('.div').eq(i).css({left:x - radiusSat, top:y - radiusSat});

        angles[i].angle = angles[i].angle + speed;
        if (angles[i].angle > 360) angles[i].angle = 0;
    }
}

More details https://jsfiddle.net/bgntx9j1/

Answer:

if (angles[i].angle > 360) angles[i].angle = angles[i].angle - 360;

In the last line, the code is as I gave. Your value is not so small as to write it off to 0. So it comes over 🙂 Fiddle: https://jsfiddle.net/L5sbnmoq/