Framer
  • Support
  • Using Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Code Editor
  • Using Code Overrides
  • Using JSON data in Framer
  • Working with live data
  • Using SVGs in code

Using Events through Overrides

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 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")
},
}
}
Helpful?Was this article helpful?

0

0

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement