juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.4k stars 3.68k forks source link

Anime.js reverse animation with FIFO method #849

Closed monolithMktg closed 1 year ago

monolithMktg commented 1 year ago

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, })