Anime.js reverse animation with FIFO method

Question

I have three span elements that I want to simply move from A to B on the X axis with loop turned on, also direction: 'alternate' with some staggered delay.

They go out like intended: 1st..2nd..3rd

But they come back like: 3rd..2nd..1st

I want the first span to also be the first one to come back: 1st..2nd..3rd <-> 1st..2nd..3rd

FIFO = 'First In First Out' method.

anime({
    targets: '.box span',
    translateX: '90%',
    delay: anime.stagger( 300 ),
    easing: 'linear',
    loop: true,
    direction: 'alternate',
    duration: 1500,
})

Answer 1

Got it. If someone needs it, use the Timeline method instead:

var tl = anime.timeline({
    targets: '.box span',
    easing: 'linear',
    loop: true,
    duration: 2000,
    delay: anime.stagger(300)
});

tl
.add({
    translateX: '90%'
})
.add({
    translateX: 0
})