Page Navigation in Framer X.

App.tsx

import { Override } from "framer"
import { setCurrentPage } from "./Nav"

export function Page1Button(): Override {
    return {
        onTap: () => setCurrentPage(1)
    }
}

export function Page2Button(): Override {
    return {
        onTap: () => setCurrentPage(2)
    }
}


export function Page3Button(): Override {
    return {
        // Navigate after a one-second delay
        onTap: () => setTimeout(() => setCurrentPage(3), 1000)
    }
}

Nav.tsx

import { Override, Data } from "framer"

// Navigation ----------------

const navState = Data({
    currentPage: 0,
})

// Functions ---

// Change the navigation's current page
export function setCurrentPage(index) {
    const { currentPage } = navState

    if (currentPage !== index) {
        navState.currentPage = index
    }
}

// Overrides ---

export function Page(): Override {
    return {
        currentPage: navState.currentPage,
        onChangePage: index => setCurrentPage(index),
    }
}