[FEATURE] coordinate durations of types animate with spring

[jedierikb]

I want to coordinate two animations to complete at the same time.

One is a type: 'spring' and the other is a type: 'animate', duration: x.

Can I solve for duration x given different parameters to the spring?

[mattgperry]

You can give individually named transitions to any transition prop, with “default” as a fallback for any you didn’t explicitly mention

[jedierikb]

Maybe this sandbox will help demonstrate what feature I am suggesting:
https://codesandbox.io/s/motion-duration-sync-8kh3o?file=/src/App.tsx

[mattgperry]

Oh I see. Thanks for that example, yeah spring accepts duration. If you set duration you can change its feel by setting bounce from between 0 and 1

[jedierikb]

Explicitly setting duration on spring works and bounce allows you to tweak. Nice.
https://codesandbox.io/s/motion-duration-sync-forked-ydcp4?file=/src/App.tsx

Can you go the other way, and get an estimated duration (probably from a utility function) for a spring with fine tuned parameters like

{         type: 'spring',
          stiffness: 550,
          damping: 30,
          restDelta: 0.01,
          restSpeed: 10,
}

[jedierikb]

Is this is a bug with type: spring being set with duration, or is it user error?
#1094

If it is a bug, any suggestions where I could investigate to help fix?

[mattgperry]

No, this isn't possible and probably won't ever be. You have to use duration bounce to achieve this.