Hidden

Accessing the Framer Motion API in Framer.

Hidden

At Framer, we’re always trying to support new functionality via our UI, but sometimes you need something that isn’t supported natively just yet. Luckily, there’s always an escape hatch: code. There are multiple ways to add custom code to your Framer site. You can access the head, you can override properties of specific layers, and you can render your own custom React components.

Within the Settings tab, you’ll find a Custom Code section. Here, you can write custom code that will be added to the head of your site. Pasting in the following line will allow you to add a reference any image URL with your custom icon.

Hidden

// Paste a code snippet
import { motion } from "framer-motion";

function Component() {
    return (
        <motion.div
            transition={{ ease: "linear" }}
            animate={{ rotate: 360, scale: 2 }}
        />
    );
}