Anime.js animate multiple objects around same path with different starting points

Question

Animate.js motion path

Can I animate multiple objects to the same path but each object has a different starting point? I have these properties:

var path = anime.path('.path-slider__path__second');
var easings = ['linear'];

var motionPath = anime({
    targets: '.path-slider__circle__bullet, .path-slider__circle__bullet__second',
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    easing: function (el, i) {
        return easings[i];
    },
    duration: 60000,
    loop: true
});

Answer 1

I know two ways that can help you archive it

1st method: create multiple SVG paths and rotate them manually, especially path like circle is very easy to make

2nd method: combine setTimeout and opacity to give a nice visual effect

both methods are in my codepen

Answer 2

you can also use the timeline() and the seek() method

const path = anime.path("#demo-svg #path1");
const elements = document.querySelectorAll(".element");

const duration = 5000;

elements.forEach((element, index) => {
  const timeline = anime.timeline({
    duration: duration,
    loop: true,
    autoplay: false
  });

  timeline.add({
    targets: element,
    translateX: path("x"),
    translateY: path("y"),
    easing: "linear",
    loop: true
  });

  timeline.seek((duration / elements.length) * index);
  timeline.play();
});

.element {
  background: blue;
  height: 10px;
  width: 10px;
  position: absolute;
  top: -5px;
  left: -5px;
}

.wrapper {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
<div class="wrapper">
  <svg id="demo-svg" width="1000" height="500">
    <path id="path1" stroke="red" fill="none" d="M 400 300 A 50 50 0 1 1 650 300 A 50 50 0 1 1 400 300 Z"></path>

    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>