Framer X » Overrides » The simplest possible override

The simplest possible override

The ChangeColor override below just changes the background of the frame you attach it to. That’s all, no animation, there’s not even a tap needed to trigger it.

On the Canvas
In the Preview window

It’s the plainest possible override function.

import { Override } from "framer";

export const ChangeColor: Override = () => {
  return {
    background: "red"
  };
};
download the example project

Here’s what’s happening.

  • First, we import Override from the Framer Library.
  • Then we create an ES6 Arrow function (=>),
  • that we save in a const variable with the name of ChangeColor,
  • while giving it the (TypeScript) type of Override.
  • Our function returns a JavaScript object which contains only one key-value pair: the key is background with a value of "red".
  • Ah, and we make sure to export our function.

Okay, step by step, in more detail.

Importing another JavaScript file

import { Override } from "framer";

We import Override from the Framer library so that we can create an override function. That’s also all we need from that library, for now.

Importing is like the script src statement you would use to add a JavaScript library to your webpage, like, e.g., the jQuery library.

<script src="js/jquery-3.3.1.min.js"></script>

An ES6 Arrow function

In JavaScript, you can write functions, like, e.g., an add function, this way:

function add(number1, number2) {
  return number1 + number2
}

This is called a function declaration.

The add function above takes two numbers and returns their sum. You would use it like this:

add(4,5);

You can try it in a Codepen here.

When you type the above line (at the bottom of that Codepen, in its Console), the function will return:

> 9

But can also write functions like this, in what they call a function expression:

add = function(number1, number2) {
  return number1 + number2
}

Note how the name, add, and the function keyword switched place.

But we’ll use an Arrow (=>) function, something new in ES6, which—with this same add example—looks like this:

add = (number1, number2) => {
  return number1 + number2
}

(ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the official name for JavaScript, and version 6 was finalized in June 2015. You might also see it being referred to as ‘ECMAScript 2015’)

And when the Arrow function doesn’t need any input values, like our ChangeColor example, you can leave the parentheses empty.

TheAnswer = () => {
  return 42;
}

(Try this example on Codepen.)

By the way, when you call the function, you do have to write the parentheses.

TheAnswer();

> 42

Back to our ChangeColor function:

ChangeColor = () => {
  return {
    background: "red"
  };
};

And what does our function do? It return‘s the properties that should be changed on the frame.

Our function returns an object

The updated properties are returned as a JavaScript object.

{
  background: "red"
}

This means that you can set several properties at once. You could, for instance, also change the rotation of the frame:

ChangeColor = () => {
  return {
    background: "red",
    rotation: 45
  };
};

Our function is saved in a const

Our ChangeColor variable, which contains the function, is a const. This stands for ‘constant,’ a variable that cannot be changed afterward.

const ChangeColor = () => {
  return {
    background: "red"
  };
};

The other option in ES6 is let, and those variables can be changed.

let is like the new version of what used to be var in old school JavaScript, a variable that can be changed afterward.

It’s always better to use const, though, because if you then (accidentally) try to use the same variable name for something else, VS Code will warn you.

Here I try to save a text string in our ChangeColor variable:

ChangeColor = "A text string, for example.";

Which results in VS Code putting a squiggly red line under the variable to signal an error.

Hovering over the error brings up more information. Here: “Cannot assign to ‘ChangeColor’ because it is a constant.” (and above that, just to make it clear, the code I wrote to define ChangeColor).

Our function has a TypeScript type of Override

In Framer Classic we used CoffeeScript, a language built on top of JavaScript that was easier to use and looked cleaner (no curly braces).

In Framer X we use TypeScript.

While CoffeeScript looked quite different from JavaScript, TypeScript is JavaScript. Well, with a few additions.

The main advantage of TypeScript is that you can give variables a predefined shape, a ’type’ (hence the name of the language).

You can define, for instance, that a variable should always contain a String, or a Number, or a Boolean.

Say you have a (let) variable called totalPrice, with a type of number, that initially contains 0:

let totalPrice: number = 0;

When you then give it another numeric value…

// updating the price
totalPrice = 100;

… everything will work fine.

But when you try to set it to a String…

totalPrice = "one hundred bucks";

… VS Code will complain.

You can also define which types of parameters a function will accept. Remember our simple addition function from higher up?

We can say that the number1 and number2 parameters it accepts should always be numbers.

const addNumbers = (number1: number, number2: number) => {
  return number1 + number2
}

Back to our ChangeColor function. We give our function the type of Override.

const ChangeColor: Override = () => {
  return {
    background: "red"
  };
};

This enables VS Code to check if our code is kosher because it knows what an Override can and should contain. (That’s what we imported higher up: all the details about this Override type.)

Setting the type to Override also makes the function discoverable by Framer. Only functions of this type will appear inside Framer’s Code tab. (And, by extension, only files that contain Override functions will show up in that Code tab.)

We ‘export’ the function

By writing export before defining the function you make it so that Framer can import it and show it in its Code menu.

export const ChangeColor: Override = () => {
  return {
   background: "red"
  };
};

So if you’re writing an override and it doesn’t show up in the Code menu, one of the following statements will be true:

  1. You forgot to type it as an Override (easy to solve)
  2. You forgot to export the function (piece of cake)
  3. Your function has an error

Errors are harder to fix, but that’s why we have VS Code. Any error in your code will be underlined with a scribbly red line. Hover over it for more information.

A bit more about const

To be honest, const isn’t always a synonym for ‘immutable.’ It depends on what you’ve put inside that ‘const’ variable.

When it’s a String, Number, Boolean, or in our case, a function, then it’s true that the value can’t be ‘mutated.’

But when it contains an Array or Object, then the values inside that Array or Object can be changed.

const justAnObject = {
  text: "I’m a text string"
};

justAnObject.text = "I’m now a different text string.";

More info: Use const and make your JavaScript code better


2 comments on “The simplest possible override”

Leave a Reply