Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
}
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment