Search code examples
javascriptreactjsframer-motion

Unable to install types for Framer motion

I have tried running the command npm install @types/framer-motion and also npm install @types/framer but both of them give a 404. How to install the types for framer motion.

I asked bing chat which asked me to run npm install @types/framer-motion but it gives 404. No entry in the registry.

Solution

  • framer-motion comes with types by default. you don't need to install type for it.

    You can check it under node_modules/framer-motion Folder struct

    Here is an example in how to use it:

    import { motion, Variants } from "framer-motion";
import React from "react";

const variants: Variants = {
    main: {
        left: 0,
    },
    left: {
        left: -500,
    },
};

interface Props {
    mode: "open" | "close";
}

const Test: React.FC<Props> = ({ mode }) => {
    return (
        <div className="container">
            <motion.div
                animate={mode === "open" ? "main" : "left"}
                variants={variants}
                transition={{ duration: 0.2 }}
                style={{
                    top: 30,
                    width: "100%",
                    height: "100%",
                    position: "absolute",
                }}
            ></motion.div>
        </div>
    );
};

export default Test;

    With const variants: Variants you now will have auto-completion. Tips: you can check other props type by hover to it. Import it and use it like Variants type in this case. Tips img