## Installation First, install Framer Motion using npm: ```bash npm i framer-motion ``` ## Basic Setup To use Framer Motion, import the necessary components and types. Here's a basic setup: ```typescript import { FC } from 'react'; import { motion } from 'framer-motion'; interface Props { title: string; } const App: FC = ({ title }) => { return (

{title}

); }; export default App; ``` ## Example 1: Fade-In Animation Create a simple fade-in animation using the `initial`, `animate`, and `transition` props. ```typescript import { FC } from 'react'; import { motion } from 'framer-motion'; const FadeIn: FC = () => { return (

Fade-In Animation

); }; export default FadeIn; ``` ## Example 2: Slide-In Animation Create a slide-in animation using the `initial`, `animate`, and `transition` props. ```typescript import { FC } from 'react'; import { motion } from 'framer-motion'; const SlideIn: FC = () => { return (

Slide-In Animation

); }; export default SlideIn; ``` ## Example 3: Scale Animation Create a scale animation using the `whileHover` prop. ```typescript import { FC } from 'react'; import { motion } from 'framer-motion'; const Scale: FC = () => { return (

Hover to Scale

); }; export default Scale; ``` ## Example 4: Rotate Animation Create a rotate animation using the `whileTap` prop. ```typescript import { FC } from 'react'; import { motion } from 'framer-motion'; const Rotate: FC = () => { return (

Tap to Rotate

); }; export default Rotate; ``` ## Error Handling Always handle potential errors gracefully. For example, ensure that the component receives the correct props: ```typescript import { FC } from 'react'; import { motion } from 'framer-motion'; interface Props { title: string; } const App: FC = ({ title }) => { if (!title) { throw new Error('Title is required'); } return (

{title}

); }; export default App; ``` ## Conclusion Framer Motion is a powerful library for creating animations in React. By following this tutorial, you've learned how to set up Framer Motion and create four different types of animations. Experiment with these examples to enhance your React applications with smooth and engaging animations. For more advanced usage, refer to the [Framer Motion documentation](https://www.framer.com/motion/).