How to trigger useSprings() multiple animations, back to back

43 Views Asked by At

First started animating using @react-spring/three's useSpring(), and then got useSprings() working, but only for one animation at a time still.

  1. How do I queue one animation after another?
  2. Is there a better way to detect when an animation is done than .idle and !.isAnimating?
  3. How to avoid manually queueing the animations?

Currently viewable at https://demo.robotjs.org/

Setup Springs:

const [springs, api] = useSprings(
  1,
  () => ({
    jointAngles: jointAngles,
    config: {
      easing: easings.easeInOutQuad
    }
  }),
  []
)

Start a robot animation:

api.start({
  jointAngles: randomJointAngles()
})

Check if it is done:

if ( springs[0].jointAngles.idle ) {
  // end animation trigger
}

This is how I think it should be setup, but not sure how to trigger the different moves move[i] without api.start().

const moves = [
  ...
]

const [springs, api] = useSprings(
  moves.length,
  i => (
    {
      jointAngles: moves[i],
      config: {
        easing: easings.easeInOutQuad
      }
    }
  ),
  []
)

My intuition tells me to handle the animation states outside of useSprings(), or try out useChain().

0

There are 0 best solutions below