How can one-way animation looping be implemented?

[gtolarc]

Here is my sample code. If loop is implemented as the following, 1-> 10, 10-> 1, 1-> 10, ... are repeated. But I want to repeat 1-> 10, 1-> 10, 1-> 10. Is there any way?

const LED = props => {
  const [spring, set] = useSpring(() => ({
    from: { number: 1 },
    to: async next => {
      while (1) {
        await next({ number: 10 });
        await next({ number: 1 });
      }
    },
    config: {
      duration: 3000
    }
  }));

  return <a.div>{spring.number}</a.div>;
};

[aleclarson]

In the latest canary, you can use the loop prop:

useSpring({
  loop: true,
  from: { n: 1 },
  to: { n: 10 },
})

Note: I have some bug fixes for the loop prop ready for the next canary, so bugs might exist in the latest canary that prevent the example above from working as expected.

[gtolarc]

Thank you and look forward to the next release :)

[aleclarson]

Now available in v9.0.0-rc.2 #985

[shubhamkes]

u can do so in v8 as well by reset flag

useSpring({
    reset: true,
    from: { n: 1 },
    to: { n: 10 },
})

[aleclarson]

@shubhamkes Sort of. That requires you to rerender for each repetition.

[shubhamkes]

oh is it? thought they are same. is v9.0.0-rc.2 recommended for prod?