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