Framer X » Overrides

Overrides

Overrides (sometimes also called code overrides) are a way to quickly make elements on your canvas interactive. With Overrides you can animate Frames and Components and also have them react to events like a tap, hover, drag, etc.

In Framer’s beta version things work a bit differently. See here.

Applying an override

Open ‘Code’ in the properties panel to add an override to a (selected) frame.

In the Code tab you then pick which ‘File’ you want to use (there will be one with ‘Examples’), and also the exact ‘Override’ function inside that file.

Override files

From the same menu in the Code tab, you can open the existing ‘Example.tsx’ file in VS Code.

Selecting ‘New File…’ will create a new ‘App.tsx’ file which also contains an example override.

You can add more files if you want, and each file can contain many overrides. But you can only apply one override at a time to a frame.

What are you ‘overriding’?

With an override, you can dynamically change the properties of a Frame or Component. Any property that you can set in the Properties Panel can be changed (or sometimes animated) on the fly.

So you can change a frame’s size and position, but also its fill, border, shadow, etc.

This overriding happens between the Canvas and the Preview. Which means that the result of an override will only be visible in the Preview window.

As a simple example, here’s one that just changes the color of a frame:

export const ChangeColor: Override = () => {
  return {
    background: "red"
  };
};
On the Canvas
In the Preview window

download the example project

Whatever the frame’s Fill was on the Canvas (could be a color, gradient or image) will be overridden. The Frame will simply be red.

Overrides can also be set on Code Components, with a few limitations.

You’re overriding the Frame’s styling, its CSS properties, but you can also have it listen to events.

Events

By attaching an event to a frame, you can have it react to, for instance, a tap.

In the Framer docs is an example of an override that just listens to an event and doesn’t change anything on the frame itself, it just writes “Hello” to the Console.

import { Override } from "framer";

export const logTap: Override = props => {
  return {
    onTap() {
      console.log("Hello");
    }
  };
};
download this project

To see the Console, select Inspect ⌘I from the hamburger menu on the Preview window. Or you can also right-click in the preview window and choose ‘Inspect Element.’

The Console is one of the tabs in the Web Inspector that will appear.

When you now tap the frame a “Hello” message will appear in the Console.

And now you also know that whenever you want to find out what’s happening inside an Override that you can log values to the Console.

To see a frame’s current properties (props), for instance, you can do:

export const logProperties: Override = props => {
  return {
    onTap() {
      console.log(props);
    }
  };
};

The example ‘Scale’ override

When selecting ‘New File…’ (from the ‘File’ menu) in the ‘Code’ tab, you’ll get a fresh App.tsx file, with only one simple example override.

The override is named Scale, and when you attach it to a frame, it will scale up with a bounce upon tapping it.

Here’s the code:

import { Data, animate, Override, Animatable } from "framer"

const data = Data({ scale: Animatable(1) })

export const Scale: Override = () => {
  return {
    scale: data.scale,
    onTap() {
      data.scale.set(0.6)
      animate.spring(data.scale, 1)
    },
  }
}
download this project

What is happening here? A lot.

This override…

  • animates the scale property of the frame,
  • but not directly. It actually animates an Animatable value (also called scale) that is saved in an instance of Framer’s Data object.
  • The animation happens when the frame is tapped, it gets triggered by an onTap() event.
  • But because the animation is to the actual scale of the frame (1), the frame is first shrunk to 60% of its size (0.6), so that it can grow again.

Anyway, to make everything a bit more understandable, we’ll take another look at the very simple override mentioned above, and then expand on it to create more complicated overrides.


8 comments on “Overrides”

  • andy says:

    Can you explain the Framer Data object in the last example. Is that needed to share data in the whole project like a global variable?

    • tes34690 says:

      Edit: I’ve added a page: The Data object

      That’s what I though initially: that what you put in a Data object would also be readable in other (Override) files. But it doesn’t, I tried.

      What it does now is trigger React Updates, just like an Animatable does. You need to put your values in a Data object (or Animatable, or use both: an Animatable in a Data object), so that React can redraw the screen when the values change.

  • andy says:

    What is the difference between using
    “: Override = () => {”
    and

    “: Override = props => {”

    I get one is an anonymous function and the other if a function called props but it doesn’t point here when they should be used?

    Thanks

    • tes34690 says:

      All the functions above do have names: «ChangeColor», or «logProperties», or «Scale».

      Before the arrow => go the parameters that the function receives. Often it’s just empty, (), but sometimes you need the properties, props, of the frame. When you want an animation to start with the current position of the frame, for instance.

      It’s explained in Starting from the current value of a property. (Don’t know if you have access or not.)

  • azmi says:

    I am having diifficulty with creating a search component within one of my projects. My goal is to make other child frames searchable within a new frame entirely.

    Any help on this would be greatly appreciated, thanks!

Leave a Reply