Animation on JQ, Slider?

Question

JavaScript

Hello. Do not prompt how to implement such piece:

We have a slider where on one slide there are three elements (div for example).

This slider scrolls through 3 elements at once, it turns out one slide (1 slide = (contains) 3 elements)

So here's how to make an animation when scrolling similar to this description:

1. These three elements on the active slide seem to go one after another, for example, to the left)
   
2. Then, on the right, three new elements leave one after another, with a train)))
   

And exactly one after another, they first see the first element of the slide, not long after it the second ... when the first reaches the end and stops, the second still goes to its place. => It turns out that the animation is applied with a delay to each element of the slide.

How to roll a stack or balls into a hole: 1 stop goes - 2nd stop goes (near the first one). (moreover, the second one appears when the first one has not reached the end and at some point in time they both move to the final position on the slide)

Maybe there is a ready-made slider with such an implementation? I'm not asking for ready-made code, just an algorithm/approach how to do it?
Thank you!

Answer 1

jsfiddle.net/6um669xf