Communicating between Components

You can communicate between elements on the canvas by sharing data. The Framer Library includes a Data object that holds your data, and tells your component to update whenever its stored values change. For more on the Data object, you can check out our API Documentation.

Below is a simple example that includes two overrides. You can apply these to two separate Frames on your Canvas.

Then, when previewing both, tapping the Frame that has the Tap override applied will animate the rotation value (and increment it by 90 degrees) of the Frame that has the Rotate override applied.

import * as React from "react"
import { Override, Data } from "framer"

const data = Data({ rotate: 0 })

export function Tap(): Override {
    return {
        onTap() {
            data.rotate += 90
        },
    }
}

export function Rotate(): Override {
    return {
        animate: { rotate: data.rotate },
    }
}