Framer
  • Support
  • Using Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Deprecated Code Component Width and Height Props
  • Code Editor
  • Using Code Overrides
  • Can I put my components on Storybook?
  • Using JSON data in Framer

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 },
}
}
Helpful?Was this article helpful?

0

0

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement