All of these have been applied to the “Day” component. So each element on the “All Days” menu slider.

1

import { useState } from "react";
import { Data, Override } from "framer";

const state = Data({ selectedDay: 1 }); // Start with Day 1 selected

export function makeDayOverride(dayIndex) {
  return {
    onTap() {
      state.selectedDay = dayIndex;
    },
    animate: state.selectedDay === dayIndex ? "On" : "Off",
  };
}

2

import { Data, Override } from "framer"

const appState = Data({ selectedDay: 1 })

export function makeDayOverride(dayNumber) {
  return {
    onTap() {
      appState.selectedDay = dayNumber
    },
    animate: appState.selectedDay === dayNumber ? "Day On" : "Day Off",
  }
}

3

import { Data, Override } from "framer"

const appState = Data({ selectedDay: 1 })

export function makeDayOverride(dayNumber, onClick) {
  return {
    onTap() {
      appState.selectedDay = dayNumber
      if (onClick) onClick() // triggers internal Day logic too
    },
    animate: appState.selectedDay === dayNumber ? "Day On" : "Day Off",
  }
}

4

import { Data, Override } from "framer"

const appState = Data({ selectedDay: 1 })

export function makeDayOverride(dayNumber: number): Override {
  return {
    onTap() {
      appState.selectedDay = dayNumber
    },
    animate: appState.selectedDay === dayNumber ? "Day On" : "Day Off",
  }
}

5

// /code/makeDayOverride.tsx
import { Data, Override } from "framer"

const state = Data({ selectedDay: 1 })

export function makeDayOverride(dayIndex: number): Override {
  return {
    onTap() {
      state.selectedDay = dayIndex
    },
    // IMPORTANT: use `variant`, not `animate`
    variant: state.selectedDay === dayIndex ? "Day On" : "Day Off",
    // Don't return any other props (no width, height, style, transition, etc.)
  }
}

Tried having it just set the current day to “Off”.

6

// /code/makeDayOverride.tsx
import { Data, Override } from "framer"

const state = Data({ selectedDay: 1 })

export function makeDayOverride(dayIndex: number): Override {
  return {
    // The component already switches itself ON when clicked,
    // so we only update the shared state here.
    onTap() {
      state.selectedDay = dayIndex
    },

    // This forces every other Day to display "Off"
    variant: state.selectedDay === dayIndex ? undefined : "Day Off",
  }
}

7 (Latest Version)

// /code/makeDayOverride.tsx
import { Data, Override } from "framer"

const state = Data({ selectedDay: 1 })

// Apply this SAME override to every Day instance.
export function dayAutoOverride(props: any): Override {
  // Read the day number from your component variable "Day #"
  const dayIndex = Number(props["Day #"]) || 0

  return {
    onTap() {
      state.selectedDay = dayIndex
    },
    // Your visual editor already turns the clicked item "On".
    // We only force others to "Off" and leave the clicked one alone.
    variant: state.selectedDay === dayIndex ? undefined : "Day Off",
  }
}