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

Related Articles

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

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

  • 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