Overrides

Add animations and interactions to any Frame with Code Overrides, and build entire projects with state to communicate between different components.

Code overrides are simple JavaScript functions that facilitate communication between components. You can write them yourself and apply to any Frame or Component on your canvas. These functions allow you to override styling properties like opacity and fill — but they also allow for interactivity and animation.

Code overrides can live in any code file in your project. They get discovered as they use the Override type specifier (see example below). You can apply any code override to any Frame (or Component) on the canvas from the properties panel under “Code”.

See a simple example below. This will reset the color of a Frame to red, regardless of the background you set on the canvas.

 
  import { Override } from "framer"; ​
 
  export const makeRed: Override = props => {
    return { background: "red" };
  }

Events

For anything interactive, you need events. Events are “things that happen” like a click, tap, swipe, but also 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 event handler from the interface in Framer X (today), you need to set them with a code override. Event types in Framer follow the same style as in JavaScript (or React) like onClick, onTap, onScroll, etc.

Let’s create a very simple event handler that logs a message to the console with console.log when you click it.

  import { Override } from "framer"; ​
  export const logTap: Override = props => {
    return {
      onTap: () => console.log("Hello") };
    };

Apply the code override to any Frame on the canvas and click it in the preview. If you open the preview console (right bottom icon in the main window) you will see multiple “Hello” messages (in the Console tab).

Animations

The Framer JavaScript Library comes with a set of advanced animation helpers for high performant accelerated graphics that work well with Framer X. They work very well with overrides to animate any Frame on your canvas.

Let’s create a code override to animate the scale of a Frame on a click.

  import { Override, Animatable, animate } from "framer"; ​
  const scaleValue = Animatable(1); ​
  export const scaleUp: Override = props => {
    return {
      scale: scaleValue,
      onTap: () => animate.spring(scaleValue, 1.5)
    };
  };

After we import the right parts from the Framer Library, we create a new Animatable number called scaleValue with a default value of 1. We use this value to set the scale property initially, and we animate it with a spring curve after a click.

You can also separate the animation from the click event so you can click on one Frame and animate another. Just connect the scaleUp code override to one of the Frames so it sets the scale property to the scaleValue value. Connect the other Frame to scaleButton, which animates the scaleValue on a click.

  import { Override, Animatable, animate } from "framer";
 
  const scaleValue = Animatable(1);
  let toggle = false;
 
  export const scaleUp: Override = props => {
    return {
      scale: scaleValue };
    }; ​
 
    export const scaleButton: Override = props => {
      return {
        onTap: () => {
          if (toggle) {
            animate.spring(scaleValue, 1);
            toggle = false;
          } else {
            animate.spring(scaleValue, 1.5);
            toggle = true;
          }
        }
      };
    };

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.