Installation Process

To begin, you can easily install Framer Motion by executing the following command:

npm install framer-motion

Getting Started with Basic Animation

Let's create a simple div that will move across the screen. We can achieve this by utilizing the following code:

import React from "react";

import { motion } from "framer-motion";

export default function App() {

return (

<motion.div

animate={{ x: 100 }}

/>

);

}

In this example, we set the animate property to an object containing the x attribute, allowing the div to move horizontally.

Making an Element Draggable

To enable dragging capabilities, we can use the drag and dragConstraints properties. Here’s how to implement it:

import React from "react";

import { motion } from "framer-motion";

export default function App() {

return (

<motion.div

drag="x"

dragConstraints={{ left: -100, right: 100 }}

/>

);

}

By setting drag to 'x', we allow the div to be dragged horizontally, while dragConstraints restricts movement to between -100 and 100 pixels.

Animating Lists

Framer Motion also allows for animated lists by utilizing the motion.ul and motion.li components. Below is an example:

import React from "react";

import { motion } from "framer-motion";

export default function App() {

const listVariants = { hidden: { opacity: 0 } };

const itemVariants = { hidden: { x: -10, opacity: 0 } };

return (

<motion.ul initial="hidden" animate="visible" variants={listVariants}>

<motion.li variants={itemVariants}>Item 1</motion.li>

<motion.li variants={itemVariants}>Item 2</motion.li>

<motion.li variants={itemVariants}>Item 3</motion.li>

</motion.ul>

);

}

In this snippet, we define variants to control the visibility and positioning of list items. The opacity is set to 0 to conceal the items initially, while the x property moves the items slightly to the left.

Combining Drag with Animation

We can further enhance our animations by integrating drag functionality with Framer Motion hooks. Here’s an example code snippet:

import React from "react";

import { motion, useMotionValue, useTransform } from "framer-motion";

export default function App() {

const x = useMotionValue(0);

const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0]);

return (

<motion.div

style={{ x, opacity }}

drag

/>

);

}

In this case, we create a red div that animates its opacity based on the distance dragged. The useMotionValue allows tracking the distance, while useTransform adjusts opacity in response to movement.

Explore the fundamentals of animations in React with the Framer Motion library in this comprehensive tutorial.

Dive deeper into Framer Motion with this crash course, covering advanced techniques for animating your React applications.