Pause/Resume Animation: Framer X Code Overrides

gistfile1.txt

import { Data, animate, Override, Animatable } from "framer";

const data = Data({
  rotation: Animatable(0),
  buttonColor: Animatable("#EE45BA"),
  buttonScale: Animatable(1)
});
let animation;

export const SecondHandRotate: Override = () => {
  animation = animate.linear(data.rotation, 360, { duration: 10 });
  return {
    rotation: data.rotation,
    originY: 1
  };
};

export const PauseButton: Override = () => {
  return {
    background: data.buttonColor,
    scale: data.buttonScale
    onTapStart() {
      animate.easeOut(data.buttonScale, 0.9, { duration: 0.1 });
    },
    onTapEnd() {
      animate.easeOut(data.buttonScale, 1, { duration: 0.1 });
    },
    onTap() {
      if (animation.playStateSource === "running") {
        animation.cancel();
        animate.easeOut(data.buttonColor, "#22AA99", { duration: 0.1 });
      } else {
        animation.play();
        animate.easeOut(data.buttonColor, "#EE45BA", { duration: 0.1 });
      }
    }
  };
};