Using Events through Overrides

Note: This article uses Framer’s code features. Find out how to enable code features in your project.

Events can be used 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. 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.

Working with events through Interactions

If you prefer to turn elements interactive without using any code, you can also decide to instead prototype with the events provided in the Interactions Menu.

These built-in events allow you to turn elements interactive in your own way, for instance by navigating between screens while you hover, or after a video file finishes playing.

Learn more about Interactions ›