React-three-fiber, useSpring - Run 2 different animations one after another on one element

Question

I am pretty green in three fiber and react springs and I have a little problem...

I'm trying to animate my cube with onClick to go up and then right like this: brief explanation in image. But I cannot think any way of making animation2 run after the animation1: what my cube is doing image

If it's possible to do it with react spring, how? Thank you very much.

Link to codesandbox: https://codesandbox.io/s/silly-lovelace-y8tjt?file=/src/Logo.js

Note: I'm using older versions of [email protected] and [email protected]

Answer 1

You must create a "sequence", or how the doc call it: script (https://react-spring.io/hooks/use-spring#this-is-how-you-create-a-script)

In your code, modify the animation:

const animation1 = useSpring({
    to: async (next) => {
      if (clicked) {
        await next({ position: [0, 1, 0] }),
        await next({ position: [0, 1, 2] });
      }
    },
    from: {
      position: [0, 0, 0]
    }
  });