[BUG] SVG animation fails when no initial value set

Describe the bug When I don’t define default/initial values as attributes, the component fails with the error:

Uncaught TypeError: Cannot read property 'red' of null

To Reproduce As an example, this component/animation fails. This should be a looping spinner.

const animation = {
  strokeDasharray: ['1px, 200px', '100px, 200px', '100px, 200px'],
  strokeDashoffset: [0, -15, -125],
  transition: { duration: 1.4, ease: 'linear' },
};

const Spinner: FC = (): ReactElement => {
  const controls = useAnimation();

  const handleAnimationComplete = useCallback(() => {
    controls.start(animation);
  }, [controls]);

  useEffect(() => {
    controls.start(animation);
  }, [controls]);

  return (
    <svg viewBox='22 22 44 44'>
      <Circle
        animate={controls}
        onAnimationComplete={handleAnimationComplete}
        cx='44'
        cy='44'
        r='20.2'
        fill='none'
        strokeWidth='3.6'
      />
    </svg>
  );
};

Expected behavior Modifing the circle to the below works, but this is the only way to resolve the issue. Setting the styles in CSS (with styled-components as an example) does not help.

      <Circle
        animate={controls}
        onAnimationComplete={handleAnimationComplete}
        strokeDasharray='80px, 200px'
        strokeDashoffset='0'
        cx='44'
        cy='44'
        r='20.2'
        fill='none'
        strokeWidth='3.6'
      />

Desktop (please complete the following information):

• OS: MacOS 10.14.5 (18F132)
• Browser Version: Chrome 75.0.3770.100 (Official Build) (64-bit)

Additional context I had the same issue when trying to add a rotate animation to an SVG element. I could not find any workaround for this one, so any help would be greatly appreciated.

const Spinner: FC= (): ReactElement => {
  return (
    <motion.svg viewBox='22 22 44 44' animate={{ rotate: 100 }}>
      <Circle />
    </motion.svg>
  );
};

Other than this, I’m loving Framer Motion - amazing work!

[mattgperry]

Currently working on this bug but if anyone runs into similar, you can always explicitly set an initial value via the initial prop.

const Spinner = () => (
    <motion.svg viewBox='22 22 44 44' initial={{ rotate: 0 }} animate={{ rotate: 100 }}>
      <Circle />
    </motion.svg>
  )

[mrmckeb]

Thanks for this!