How to Add an Override in Framer

import type { ComponentType } from "react"

export function withRotateOnHover(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                whileHover={{ rotate: 360 }}
                transition={{ duration: 1 }}
            />
        )
    }
}

Applying the override to a Framer Component

Now that you’ve written your override, it’s time to connect it to an element or a Framer Component in your design.

• Select a Component: Click on the component you want to apply the override to, such as a button.
• Assign the Override: In the right-hand properties panel, locate the “Override” section. Click the dropdown, and select the override function you just created (e.g., RotateOnHover).
• Test Your Override: Preview your project, and hover over the button to see it rotate dynamically.

Using Pre-Made Framer Overrides

Multiple online libraries provide free pre-made overrides that you can copy and paste directly into your project (including those available on our site). These libraries offer ready-to-use solutions. If the code doesn’t work as expected, you might need to format it using a JavaScript beautifier to fix indentation errors.