Overrides Add animations and interactions to any Frame with Code Overrides, and build entire projects with state to communicate between different components.
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" ;
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: consolelog"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).
Let’s create a code override to animate the scale of a Frame on a click.
import OverrideAnimatableanimate from "framer"; const scaleValue = Animatable1; export const scaleUp: Override = props =>returnscale: scaleValue: animatespringscaleValue1.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 OverrideAnimatableanimate from "framer";const scaleValue = Animatable1;let toggle = false;export const scaleUp: Override = props =>returnscale: scaleValue ;; export const scaleButton: Override = props =>return:if toggleanimatespringscaleValue1;toggle = false;elseanimatespringscaleValue1.5;toggle = true;;;