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