How to chain / queue animations programtically?

[hoestreich]

Hi all,

I'm not sure if this is the right place to discuss this issue... I already wrote a response on @aleclarson question regarding feedback on the new release canidate for react-spring v.9.0.0 (pmndrs/react-spring#985 (comment)) but did not receive a response yet.

I'm using react-three-fiber and react-spring to animate a rubics cube. The cube consists of 26 cube elements.
If one side of the cube should be rotated, these cube elements have to be selected and are attached to a pivot object. Afterwards the rotation of the pivot object is animated by using a spring (useSpring) and its imperative set() function.

So far so good. My problem: If the rotations are triggered fast after another, the animation is sometimes interrupted and the cubeelements are detached from the pivot altough the rotation is not finshed to a complete 90 degrees turn.

Is there something I could do differently? I extracted the relevant code fragments to the following sandbox. The problem can be recreated, if the rotate button is triggered several times.

https://codesandbox.io/s/loving-bush-1t2ui

Hope someone can help me, thanks for the great work with the two packages!

[drcmda]

i think the view should just reflect state, animation is intermediary, but it looks like the animation is influencing the view.
if your state model says 90deg, then it animates there, suddenly it goes 120deg, fine, it animates there. i dont understand why you would want to stack actions are stacked like that.

the code also looks curiously big, i cant put my finger on it but my gut feeling is that this shouldnt be thousands and thousands of lines.

[hoestreich]

Hi Paul,
thanks for the fast response!
The code might include some clutter because its part of some bigger architecture which on the one side should mirror the movements of a real rubics cube and on the other side should be capable of animating predefined animations to provide some kind of instruction.
State management of the cube gets quite messy is my problem...

But the stacking of the animations is necessary since the movements of the real cube can be quite fast and the UI should animate the same movement (maybe slower, but the state of the real cube and the UI have to match in the end).

[stephencorwin]

@hoestreich I am chaining animations together using a mutable array of arrays.

const animations = {
  current: [{name: 'DRAW', target: 'a1', state: 'IN PROGRESS'}], // currently drawing 1 card
  queue: [
    [{name: 'DRAW', target: 'a2', state: 'READY'}],  // draw 1 card
    [{name: 'DRAW', target: 'a3', state: 'READY'}, {name: 'DRAW', target: 'a4', state: 'READY'}] // then draw 2 cards at the same time
  ]
}

I have a useFrame() which looks at the current animation stack. It does any lerping/mutations required while the property representing its state is READY or IN_PROGRESS. Once it has finished, it then sets a property representing its "state" to COMPLETE.

I then have a separate addAfterEffect() checking to see if the state of all animations in the current stack are COMPLETE. In this case, I progress to the next animation stack in the queue.

The benefit of addAfterEffect() is that it waits until all rendering is finished, so it helps mitigate stuttering caused by any rerenders within your app that might be happening at the same time as your animation.

Hopefully that helps. I can try and lift out an example from my code base if you need a more in-depth example :P

[hoestreich]

Thanks for your reply! I have been on vacation the last two weeks, sorry for the late response.

We used a similar approach in the meantime, with only one array from which the animations are consumed and in which the are queued during our process. Making these arrays read only (ReadonlyArray<Animation>) solved the problem for us, that the animations were interrupted.

[neciszhang]

Can you help me with a simple case, I also have this trouble when I am doing animation, I didn’t think of the problem caused by how to trigger the animation continuously

[drcmda]

i successfully made animation chains in react-spring, that seemed to me relatively straight forward. i have also tried to do the same with lerping: https://codesandbox.io/s/r3f-basic-demo-bzbs8?file=/src/index.js but it's still a little buggy because it doesn't have a "start" point yet, it starts whereever the timestamp is at