I am using Anime.js to move a square back and forth along an SVG path. The square’s opacity needs to transition from 1 to 0 as it travels along the path, in both directions.
I am only able to make it transition from 1 to 0 on the forward direction, and from 0 to 1 in the reverse direction. This is the default for simple animations:

 anime({
   targets: ".square",
   translateX: path("x"),
   translateY: path("y"),
   rotate: path("angle"),
   opacity: [1, 0],
   loop: true,
   direction: 'alternate',
   easing: 'linear'
})

So I tried using a timeline:

anime.timeline({
  loop: true,
  duration: duration,
  })
  .add({
    targets: ".square",
    translateX: path("x"),
    translateY: path("y"),
    rotate: path("angle"),
    opacity: [1, 0],
    loop: true,
    direction: 'normal',
    easing: 'linear'        
  }).add({
    targets: ".square",
    translateX: path("x"),
    translateY: path("y"),
    rotate: path("angle"),
    opacity: [1, 0],
    loop: true,
    direction: 'reverse',
    easing: 'linear',  
    duration: duration,
  });
} 

… but this doesn’t work because the direction parameter can only be set on the timeline object itself.

I haven’t much experience with Anime.js and couldn’t find anything in the docs. Would anyone be able to help with this? Thanks in advance!