CardFlip.ts

import { Data, Override } from "framer";

const data = Data({ cardFocus: "number" }); // => App state

export const Flip: Override = () => {
  return {
    onTap() {
      // toggle card focus which determines the visible side of the card
      data.cardFocus = data.cardFocus === "number" ? "cvc" : "number";
    }
  };
};

export const ChangeFocus: Override = () => {
  return {
    // This goes to set the "focused" prop of the card component
    focused: data.cardFocus
  };
};