[bug]: useTrail does not work correctly (spring values are weaker the more trails you have)

[zroper]

🤓 Question

What is the proper way to loop a Trail in v9.0? I've had success with the loop prop for Springs but I'm having difficulty using it with a Trail.

const paths = [...]

<Trail
   loop
   items={paths}
   from={{ opacity: 0.2, y: 0, stroke: 'rgba(255,75,75,1)'}}
   to={{ opacity: 1, y: 30, stroke: 'rgba(80,80,80,.35)'}}
>
   {(item, index) => ({ y, opacity, stroke }) => (
      <animated.path
         style={{
            opacity,
            transform: y.interpolate(y => `translateY(${ y}px`),
         }}
         d={item}
         fill="black"
         stroke={stroke}
         stroke-width={3}
      />
   )}
</Trail>

This code runs the full animation once, but on subsequent loops, only the first few elements in the array are animated. I've tried playing around with delay and duration and it seems to improve the animation somewhat but the latter items in the array only partially animate. I also tried initially setting loop to false, then toggling it to true in the onRest function, but this doesn't loop at all.

Here is a link to the sandbox: https://codesandbox.io/s/tender-https-55nmz?file=/src/LoopedTrail.js

[aleclarson]

Seems like a bug that loop={true} doesn't work, but I would need to dig deeper to confirm that.

loop={{ reverse: true }} seems to work as expected, though.

[zroper]

Thanks for looking into this. It does seem like there is weird behavior going on with loop={true}.

[xzilja]

Not working via hook api either, but seems its only related to usage with state, using to / from works

i.e. this doesn't loop (loding here is from const [loading, setLoading] = useState(true))

 const spinerProps = useSpring({
    rotate: loading ? 360 : 0,
    config: { duration: 1000 },
    loop: true
  });

but this does

const spinerProps = useSpring({
    from: { rotate: 0 },
    to: { rotate: 360 },
    config: { duration: 1000 },
    loop: true
  });

[joshuaellis]

@iljadaderko do you have a codesandbox you could share? Preferably using our most up to date version of the library.