1

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 react-spring@8.0.27 and react-three-fiber@5.3.1

Keris
  • 384
  • 2
  • 8
  • 1
    Please provide a minimal example of code that reproduces the problem – KBriggs Apr 05 '21 at 03:00
  • I've already done that. There is a link to cdesandbox in my post. – Keris Apr 05 '21 at 08:20
  • please provide a minimal example of code that reproduces the problem in code tags in the post itself. Linking out to sites that die in the future is not helpful to others who may encounter the same problem and is generally frowned upon here. Full disclosure, I do not know how to solve your problem - but I do know that better presenting it in accordance with community guidelines will make it much more likely that someone will take the time to help. – KBriggs Apr 05 '21 at 15:59

1 Answers1

0

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]
    }
  });
Fernando Lopez
  • 18
  • 2