[PR feature request] Add offsetProgress feature for animation start point at X%

[misterbridge]

I'd like to have a way to have multiple animations on a single path, but at different positions.

My use case is a road with multiple vehicules on it.

I could not find a good solution using current features such as timeline, as the loop, restart the whole thing, offset delays included. I just want for offsets to apply as "path starting point". Also I've tried other solutions, but when animejs loops, while the window is out of focus, animations wait at start point (tween.start) and start when the window is back on focus: that means that if multiple animation end one after each other, they will all wait at the same point and then restart all at the same position, one above each other.

My PR feature request allows, on the same path, to add multiple animations that run at the same time and that can loop, but are not at the same position.

Used with that kind of code:

    const animeUpParams = {
      translateX: pathUp('x'),
      translateY: pathUp('y'),
      rotate: pathUp('angle'),
      easing: 'linear',
      duration: 45000,
      loop: true,
    };
    anime({
      ...animeUpParams,
      targets: '.vehicules-up #vehicule1',
      offsetProgress: 0,
    });
    anime({
      ...animeUpParams,
      targets: '.vehicules-up #vehicule2',
      offsetProgress: 15,
    });
    anime({
      ...animeUpParams,
      targets: '.vehicules-up #vehicule3',
      offsetProgress: 30,
    });
    anime({
      ...animeUpParams,
      targets: '.vehicules-up #vehicule4',
      offsetProgress: 45,
    });
    anime({
      ...animeUpParams,
      targets: '.vehicules-up #vehicule5',
      offsetProgress: 60,
    });
    anime({
      ...animeUpParams,
      targets: '.vehicules-up #vehicule6',
      offsetProgress: 75,
    });
    anime({
      ...animeUpParams,
      targets: '.vehicules-up #vehicule7',
      offsetProgress: 90,
    });

[different55]

Ran into a problem with this one, on the last frame the progress will be 1, and will wrap back around to 0. Every animation gets thrown back to frame 1 when it ends.