fx-toggle-button.ts

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

const data = Data({
  button1Bg: Animatable("red"),
  button2Bg: Animatable("white")
});

let activeButtonBg = data.button1Bg;
let inactiveButtonBg = data.button2Bg;

function toggleActiveButton() {
  animate.ease(activeButtonBg, "white", { duration: 0.3 });
  animate.ease(inactiveButtonBg, "red", { duration: 0.3 });
  // swap buttons
  const temp = activeButtonBg;
  activeButtonBg = inactiveButtonBg;
  inactiveButtonBg = temp;
}

export const Button1: Override = () => {
  return {
    background: data.button1Bg,
    onTap() {
      toggleActiveButton();
    }
  };
};

export const Button2: Override = () => {
  return {
    background: data.button2Bg,
    onTap() {
      toggleActiveButton();
    }
  };
};