Getting Started with the Motion Library for Animations in React

Getting Started with the Motion Library for Animations in React

Animating elements in React has never been easier thanks to the Motion library. Created by the team behind Framer, Motion is a powerful yet simple-to-use animation library that helps developers bring their UI to life with smooth, high-performance animations.

Motion provides an intuitive API for creating both simple and complex animations in React. It allows you to animate not only CSS properties but also SVG elements, styles, and even the layout of components. With motion components and a variety of animation utilities, the Motion library can help you create everything from subtle UI transitions to interactive animations and complex timelines.

Why Use the Motion Library?

The Motion library offers a range of features that make it a popular choice among React developers:

  • Declarative API: Motion uses a declarative syntax, allowing you to describe animations directly in your JSX. This makes animations easier to read and manage.
  • Powerful Animation Features: From basic animations like fading and scaling to more complex animations like staggered animations and keyframes, Motion can handle it all.
  • Smooth Performance: Motion is optimized for performance, even when animating complex scenes or a large number of elements.
  • Easy to Integrate: Motion works seamlessly with React, including handling the animation of components when they enter or leave the DOM.

Let’s dive into how you can get started with Motion and create your first animations in React.

Installation

To use the Motion library in your project, you'll need to install the framer-motion package:

npm install framer-motion

Or, if you're using Yarn:

yarn add framer-motion

Once installed, you're ready to start using Motion in your React components!

Basic Animations with Motion

Motion provides special motion components that are used to wrap regular HTML elements. These motion components accept animation-related props, which can be used to animate the element.

Example: Fading In and Out

Let’s create a simple animation where an element fades in when it mounts and fades out when it unmounts.

import { motion } from "framer-motion"; function FadeInOut() { return (

initial={{ opacity: 0 }} // Starting state animate={{ opacity: 1 }} // Final state exit={{ opacity: 0 }} // Final state on exit transition={{ duration: 1 }} // Animation duration > Welcome to Motion Animations! ----------------------------- ); } export default FadeInOut;

In this example:

  • initial: Defines the initial state of the element (before the animation starts).
  • animate: Specifies the end state of the animation (when the element is fully rendered).
  • exit: Defines the state when the element is exiting the DOM (if you’re using the AnimatePresence component for conditional rendering).
  • transition: Specifies the timing of the animation, like the duration.

Key Properties for Motion Animations

Here are some key properties you can use for animating elements with Motion:

  • initial: Sets the initial values of the properties when the element first renders.
  • animate: Defines the final values of the properties.
  • exit: Used for elements that are being removed from the DOM.
  • transition: Allows you to control the timing of the animation (e.g., duration, delay, easing functions).
  • whileHover: Triggers animations when the element is hovered.
  • whileTap: Defines animations when the element is tapped or clicked.

Advanced Animations: Animating Multiple Elements

Motion also allows you to animate multiple elements in sequence or in parallel, which is great for building complex animations. Let's create an example where we animate a list of items with a staggered delay.

Example: Staggered List Animation

import { motion } from "framer-motion"; const list = ["Item 1", "Item 2", "Item 3", "Item 4"]; function StaggeredList() { return (

initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }} > {list.map((item, index) => (

key={item} initial={{ opacity: 0, y: 50 }} // Start from below and invisible animate={{ opacity: 1, y: 0 }} // End up visible and in place transition={{ delay: index * 0.2, // Stagger animation delay duration: 0.5, }} > {item} ))} ); } export default StaggeredList;

In this example:

  • delay: Each item in the list has a staggered delay based on its index, so they animate one after the other.
  • The y: 50 to y: 0 animation creates a slide-in effect, while opacity makes the items fade in.
  • transition defines the timing of the animation.

Dragging and Gestures

Motion makes it incredibly easy to add interactive elements to your app by supporting dragging and other gestures. Let's look at a simple draggable box.

Example: Dragging an Element

import { motion } from "framer-motion"; function DraggableBox() { return (

drag // Enables dragging dragConstraints={{ left: 0, right: 300, top: 0, bottom: 300 }} // Set drag bounds dragElastic={0.2} // Apply elasticity to the drag style={{ width: 100, height: 100, backgroundColor: "tomato", cursor: "grab" }} /> ); } export default DraggableBox;

Here, the drag prop makes the element draggable. The dragConstraints prop defines the limits of the drag area, and dragElastic adds some elastic behavior to the drag. This makes for a smooth and responsive dragging experience.

Layout Animations

Motion’s layout animations make it easy to animate changes in layout when components move or resize. Using the layout prop, you can animate the layout of elements as they change position or size.

Example: Layout Animation on Resize

import { motion } from "framer-motion"; import { useState } from "react"; function ResizableBox() { const [isExpanded, setIsExpanded] = useState(false); return (

layout onClick={() => setIsExpanded(!isExpanded)} style={{ width: isExpanded ? 300 : 150, height: isExpanded ? 300 : 150, backgroundColor: "skyblue", cursor: "pointer", }} transition={{ duration: 0.5 }} /> ); } export default ResizableBox;

In this example, when the box is clicked, it animates between two sizes. The layout prop enables the animation of layout changes, making it smooth and visually appealing.

Combining Motion with React Router

You can also use Motion for animated route transitions, which is great when you’re using React Router or other routing solutions. Here's an example of how to add page transition animations with Motion:

import { motion } from "framer-motion"; import { Route, Switch } from "react-router-dom"; function App() { return (

initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.5 }} >

initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.5 }} > ); }

Key Features for Route Transitions:

  • initial, animate, exit: Control the animation for when the component enters and exits.
  • transition: Defines how long the animation lasts.

Conclusion

The Motion library provides a simple yet powerful way to add animations and transitions to your React apps. With its intuitive API, you can create complex animations, handle gestures, and even animate layout changes—all while maintaining high performance and a smooth user experience.

Whether you're looking to animate simple UI elements, create complex transitions, or add interactive features like drag-and-drop, Motion offers the tools you need to bring your designs to life with minimal code.

Start exploring Motion today and take your React apps to the next level with beautiful, interactive animations!