Synchronizing seperate Spring animations

[Eunanibus]

Hey folks,

I've been at this for about 48 hours now and I've still not found a solution, so posting here is my last attempt before I move on to another way to solve this.

I'm creating a login form that animates. The form works in a way similar to this:

As a result, I have two entirely separate divs that need to be animated with entirely different values.

So my attempt to do this was with two individual useSpring() instantiations. My assumption was that without useChain, these animations would execute together. What I found was that it was sequential instead. These are all dependent on a single boolean state value, but they still execute in sequence (from parent to child).

Provided I have several divs, all that need to be animated slightly differently; How do I go about synchronizing them? The examples in the documentation only provide references to lists which isn't exactly what I'm trying to achieve here.

Any advice?

Thanks

[slapxxi]

It's kind of rough, but it's a possible solution I guess: Demo

[GuiShenHe]

@Eunanibus Did you ever figure out how to go about this? Previous versions of popmotion offered this but has long since abandoned this.

[Eunanibus]

Sorry @GuiShenHe - Yes I did manage it, I can upload an example to a repo for you if you'd like?

[GuiShenHe]

That'd be great. Thanks!

[puopg]

For anyone coming here who is curious how to synchronize multiple springs, this is what the useSprings hook is designed for. THe API I must say is kinda weird, but essentially you give it a number of animations you want, and then a call back to return the "styles" for each animation index.

This gives you back an array of springStyles that you can index into for the animation you want for some element, and then you can apply that individual style to the element.

When you want to perform multiple animations, you need to give another callback that dictates the desired styles for each animation that you want to perform.