Popmotion: bounce animation with some durations / velocity updates to NaN

[jedierikb]

When starting a bounce animation with some configurations of duration and velocity can result in NaN update values. (The animations do successfully end at their to values though.)

For example: https://codesandbox.io/s/popmotion-velocity-nan-et3t3?file=/src/index.tsx:0-425

import { animate } from "popmotion";

const $root = document.getElementById('root');

const from = 1;
const to = 5;
const duration = 4000;
const type = 'spring';
const bounce = 0.5;
const velocity = 0.9988001159034534;

animate({
  from: from,
  to: to,
  duration: duration,
  type: type,
  bounce: bounce,
  velocity: velocity,
  onUpdate: latest => $root.innerHTML = 
  `from: ${from}<br>to ${to}<br>latest: ${latest}`
})

This animation should not have NaN values onUpdate

It seems that the actual Nan is created hereabouts: https://github.com/Popmotion/popmotion/blob/a1903c808757b31d26d876dc2d8d3dea2d131c12/packages/popmotion/src/animations/generators/spring.ts#L75 as a result of an invalid dampingRatio.

Please let me know how I could help with this issue. Thank you. This issue was initially discovered here https://github.com/framer/motion/issues/1094

[jedierikb]

Seems to happen when dampingRatio becomes NaN as a result of 0/0 here: https://github.com/Popmotion/popmotion/blob/a1903c808757b31d26d876dc2d8d3dea2d131c12/packages/popmotion/src/animations/generators/spring.ts#L78 Where the damping is 0 and the stiffness is 0.

And it seems 0 values can come from approximateRoot https://github.com/Popmotion/popmotion/blob/a1903c808757b31d26d876dc2d8d3dea2d131c12/packages/popmotion/src/animations/utils/find-spring.ts#L98

[jedierikb]

Can I help clarify this issue or help to patch?