What you will learn

Code Overrides

Overrides are bits of code that you apply to layers on Framer’s canvas. With them, you can use Framer Motion’s animation API and let frames, canvas components, and code components talk to each other.

 

Fades in when appearing, plus has ‘while hover’, ‘while tap’, and ‘while drag’ animations

Add animations

With overrides, you can animate layers without adding extra screens for each animation state.

Create animation sequences, keyframe animations, animations that cycle, staggered animations, and many more.

 

A single override gave this box four animations: When it appears, when you hover over it, when you pick it up, and when you drag it. (View the code)

Add interactivity

Make layers on your canvas talk to each other, whether they’re frames, canvas components, or code components.

You can put the bits of data they need to share in a CreateStore data store.

Separate frames on the canvas communicating through a data store

Enhance canvas components

With overrides, you can change a canvas component’s variables and have it animate between different variants.

 

This example has three canvas components:

  • The ‘Good Morning’ button
  • The ‘Good Night’ button
  • The lamp button

The Good Morning and Good Night buttons can flip the lamp buttons, while the lamp buttons also work independently. The values for the good morning and good night states are saved in a CreateStore data store.

Connect code components

Framer has built-in code components, and you can add others. With overrides, you can change their properties dynamically or let them change other elements on the screen.

A simple example: A Toggle starts and stops Framer’s Ticker component.

Here you can adjust the colors of Framer’s Conic component with Sliders.

Plus: You can change the center point of the Conic’s gradient by tapping it.