Framer
  • Support
  • Using Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Using Code Overrides
  • Deprecated Code Component Width and Height Props
  • Code Editor
  • Can I put my components on Storybook?
  • Using JSON data in Framer

Animating with Overrides

The Framer API contains a library of high-performance declarative animations that can be applied to elements on the canvas through code overrides.

import { Override } from "framer";
export function Hover(): Override {
return {
whileHover: { scale: 0.8 }
}
}

The example below uses a code override to animate the scale of a Frame on hover. You can use the whileHover property and animate any visual property.

You can also trigger animations within event functions. In the example below, the Frame will rotate by 90 degrees on every tap, while also storing its current rotation value using Data.

import { Data, Override } from "framer"
const data = Data({
rotate: 0,
})
export function Rotate(): Override {
return {
animate: { rotate: data.rotate },
onTap() {
data.rotate = data.rotate + 90
},
}
}
Helpful?Was this article helpful?

0

0

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement