Framer-Motion Introduction and Installation

Last Updated : 03 Jun, 2022

Framer-motion is an open-source, production-ready animation and gesture library for React. It provides a low-level API to simplify animation and gesture integration into the application while maintaining HTML and SVG semantics.

Features:

Animations: It will automatically generate animations by setting values in the animate prop.
Gestures: It supports gestures like hover, tap, pan, and drag.
Variants: These are used to animate entire sub-trees of components with a single animate prop that declaratively orchestrates the animations.
Server-Side Rendering: The animated state of a component will be rendered on the server-side to prevent flashes of re-styled content after the JavaScript loads.
MotionValues: It creates a declarative and reactive chain of values to update the result of animations or gestures.

Additionally,

It supports CSS variables.
It has Accessibility options.
Option to unmount animations easily.
Provides position transitions.

Note: It requires React 16.8 or the higher versions to use Motion.

Components:

Motion: Motion Components are the core of the Motion API. For every HTML and SVG element, there is a motion component present.
For example: For a div element, <motion.div/> component and for a circle,<motion.circle/> components are present. These work the same as earlier, but it offers props that allow to add gestures or animate the element via simple props.
AnimatePresence: These components use to integrate the unmount animations. It animates our components by detecting the direct child components removed from the React tree.
LayoutGroup: It groups motion components that should perform layout animations together. By default, motion components with a layout prop will attempt to detect and animate layout changes every time they commit a React to render.
LazyMotion: These components reduce bundle size by synchronously or asynchronously loading some, or all, of the motion component’s features.
MotionConfig: These components set configuration options for all child motion components.
Reorder: These components create drag-to-reorder effects with a simple set of components or lists like reorderable tabs or to-do items.

Let’s see a simple animation using Framer-motion and ReactJs.

Creating React Application: Create a React application using the following command:

npx create-react-app demo

After creating your project folder i.e. demo, move to it using the following command:
```
cd demo
```
Install the framer-motion from npm:
```
npm i framer-motion
```

Project Structure: The project should look like this:

Example: Now, import motion from the framer-motion in the App.js and add animation to a div element. Here, we will scale the div while hovering.

App.js

import React from "react"; 
import { motion } from "framer-motion"; 
  
function App() { 
    return ( 
        <motion.div style={{ 
            color: 'green', 
            fontSize: 20, 
            width: '300px', 
            height: '30px', 
            textAlign: 'center', 
            border: '2px solid green', 
            margin: '40px'
        }} 
  
            whileHover={{ scale: 0.5 }} 
        > 
            GeeksforGeeks 
        </motion.div> 
    ); 
} 
  
export default App;