How can I use Framer Motion with TypeScript?

How can I use Framer Motion with TypeScript?

You can use Framer Motion with TypeScript by installing the library and defining types for your animations.

What are the basic animations I can create with it?

You can create basic animations like fade, slide, and scale using the motion components provided by Framer Motion.

Can you show me a simple code example?

Sure! Here's a simple example:

import { motion } from 'framer-motion';

const MyComponent = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello, Framer Motion!
    </motion.div>
  );
};

This will fade in the text when the component mounts.

What if I want to add a hover effect?

You can add a hover effect by using the whileHover prop. For example:

<motion.div
  whileHover={{ scale: 1.1 }}
>
  Hover over me!
</motion.div>