useSteps and animations

[Manubi]

Hi,
I am looking for the best way to do an animation.
I want to have two columns. Left are 4 bullet points on the right is one image.

With the next step, (which I here need to trigger manually for the framer motion rectangle bg-red-200 animation) the rectangle moves down, the next text (bullet point) appears and a new image should appear on the right-hand side.

Thanks for your help.

[fritz-c]

Here's an example that might give you some ideas of how to start. I'm not familiar with the animation library you are using, but I think there should be a way to work it into this setup.
https://codesandbox.io/s/synchronized-animations-example-spectacle-0ri8iv

[fritz-c]

The key part is wrapping the entire contents of the slide in the <Stepper> component so you can synchronize the appearance of the image and the bullet point. I had to put the first value as the fallback value for when the stepper value was undefined so it would have the behavior of showing the first bullet point+image from the start.

[Manubi]

Thanks for the hints. That works with the image, but I still have a problem animating the background. I guess I would need the useSteps hook in order to execute it programmatically. The wanted effect is that the background of the text moves from the first item to the last item. And only the current item with highlighted background and the associated image is in the view. The former items don't have any background.

[Manubi]

Another question. What is the priority prop for in the <Appear> component? It doesn't allow to let two items appear at the same time in the dom. Which I thought it would. meaning <Appear priority={1} /> and <Appear priority={1} should appear at the same time in the dom...

[fritz-c]

From the time I've spent with it, the priority prop just seems to rearrange the order of the appearance relative to its current order. There is no way to make two overlap without them depending on the same step via the workaround I showed. useSteps is helpful in that case because you don't have to wrap everything in a Stepper to get it done.

As for useSteps being useful for animations, I'm afraid it would give you no more flexibility than the Stepper workaround I showed. The step will change based on internal logic in either case, and your component has to judge how to animate based on that step change. You might be able to use a useEffect and refs to trigger animations imperatively, but React animation libraries (spectacle uses react-spring internally for the Appear component) might be a cleaner way to go about it.

[Manubi]

thanks @fritz-c,
atm the useSteps hook doesn't work as it is not exported by the main package but I think the hook would help a lot as I would get access to the step value and could use that to trigger whatever animation I want to.