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 }} > neveropen </motion.div> ); } export default App; |
Start the application: You can run the server up by the following command:
npm start
Output:
