Animating with Overrides

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

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

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.

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

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
        },
    }
}

Click on the square in this interactive example below to see how this works.

const data = Data({
    rotate: 0,
})