How to toggle smoothly between a infinite amimation and a stopped animation

[carstenheisterkamp]

I am trying to animate a continuous animation of a SVG in a react component for a muted and not muted audio. I want to toggle between the animated state and not animated (paused / minimized ) variant, if audio is allowed / not allowed. The animation should smoothly do a transition between the two states.

I am currently using variants for the individual paths but already tried to use animation controls and whatnot. But either I can only achieve an abrupt change between the two states or like in the below example the animation does not stop at all.

I am not sure what I am missing and how to achieve a smooth transition betweeen a Infinite Animation and a stopped Animtion, with all three paths in the minimized state. Any help appreciated! Sandox of the below code

import "./styles.css";
import { motion } from "framer-motion";
import { useState } from "react";

export default function App() {
  const [audioAllowed, setAudioAllowed] = useState(false);
  const variantsLeft = {
    minimized: { d: "M 20, 25 L 20, 23" },
    maximized: { d: "M 20, 34 L 20, 14" }
  };

  const variantsCenter = {
    minimized: { d: "M 24, 25 L 24, 23" },
    maximized: { d: "M 24, 34 L 24, 14" }
  };

  const variantsRight = {
    minimized: { d: "M 28, 25 L 28, 23" },
    maximized: { d: "M 28, 34 L 28, 14" }
  };

  const randomizedTransistion = () => {
    return {
      duration: 1 + Math.random() * 2,
      ease: "easeInOut",
      repeat: Infinity,
      repeatType: "mirror"
    };
  };

  return (
    <div className="App">
      <button
        className="button"
        onClick={() => {
          setAudioAllowed(!audioAllowed);
        }}
      >
        <motion.svg
          animate={audioAllowed ? "maximized" : "minimized"}
          initial="minimized"
          width="48"
          height="48"
          viewBox="0 0 48 48"
          strokeWidth={"2px"}
          stroke="#000000"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <motion.path
            variants={variantsLeft}
            transition={randomizedTransistion()}
          />
          <motion.path
            variants={variantsCenter}
            transition={randomizedTransistion()}
          />
          <motion.path
            variants={variantsRight}
            transition={randomizedTransistion()}
          />
        </motion.svg>
      </button>
      <div>
        <p>Audio allowed?</p>
        <p>{audioAllowed ? "true" : "false"}</p>
      </div>
    </div>
  );
}