Overrides

Use overrides to add animations and interactions to Frames and establish communication between components.


Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation.

Code overrides can live in any code file in your project. Framer interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the properties panel.

See below for a simple example. This will reset the color of a Frame to red, regardless of the background you set on the canvas. If the code syntax below is new to you, be sure to check out our ES6 and React Guide and API Documentation too.

  import { Override } from "framer";
 
  export function makeRed(): Override {
      return {
          background: "red"
      }
  }

Events

Use events to make anything in Framer interactive. Events are things that happen, such as basic interactions like click, tap, and swipe, as well as things like “video ended” or “device rotated”. They consist of a type and a handler with code that needs to be run when the event happens. Because you can’t set an event handler from the interface in Framer X, you’ll need to set them with a code override. Event types in Framer X follow the same style as JavaScript and React — onClick, onTap, onScroll, etc.

Below is a simple example of an event handler that logs a message to the console with console.log every time you click the Frame that the override applies to.

  import { Override } from "framer"; ​
 
  export function LogTap(): Override {
      return {
          onTap: () => {
              console.log("Hello")
          },
      }
  }

You can apply this code override to any Frame on the canvas. If you open the console (the left-most icon in the preview window), you’ll see multiple “Hello” messages.

Animation

The Framer Library comes with a set of advanced animation functions. These also work well with overrides to animate any Frame on your canvas.

The example below uses a code override to animate the scale of a Frame on hover. You can use the whileHover property and animate any visual property.

  import { Override } from "framer"; ​
 
  export function Hover(): Override {
      return {
          whileHover: { scale: 0.8 }
      }
  }

You can also trigger animations within event functions. In the example below, the Frame will rotate by 90 degrees on every tap, while also storing its current rotation value using Data.

  import { Data, Override } from "framer"
 
  const data = Data({
      rotate: 0,
  })
 
  export function Rotate(): Override {
      return {
          animate: { rotate: data.rotate },
          onTap() {
              data.rotate = data.rotate + 90
          },
      }
  }

Data

You can communicate between components 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, see our API Docs.

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 },
      }
  }

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.