Framer-Motion Introduction and Installation

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;

Start the application: You can run the server up by the following command:

npm start

Output: