How can I integrate Framer Motion with TypeScript?

How can I integrate Framer Motion with TypeScript?

To integrate Framer Motion with TypeScript, you need to install the library and its types. Use npm install framer-motion @types/framer-motion.

What are the basic animations I can create with Framer Motion?

You can create various animations like fade, slide, scale, and rotate. Framer Motion provides simple APIs for these.

Can you show me a code example of a simple fade-in effect?

Sure! Here's a basic example:

import { motion } from 'framer-motion';

const FadeInComponent = () => {
  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
      Hello, I fade in!
    </motion.div>
  );
};

This will create a fade-in effect when the component mounts.

What if I want to add a hover effect?

You can easily add a hover effect by using the whileHover prop. Here's an example:

<motion.div 
  whileHover={{ scale: 1.1 }}
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}>
  Hover over me!
</motion.div>