Framer Motion | Introduction - Part 1

Introduction

Framer Motion is a library that allows you to easily add animations to your React applications. It is used to add animation effects such as transitions and drag interactions.

Creator

It was created by the company Framer. Framer is a company that develops tools specifically for user interface (UI) design and prototyping.

Installation

Framer supports React 18 and higher versions. To install it via npm, run the following command:

npm install framer-motion

The Framer Motion library has no dependencies and you can start using it with a single package.

As of July 10, 2024, Framer Motion has approximately 3.4 million weekly downloads on npm and 22,700 stars on GitHub, indicating significant appreciation from its users.

Usage

Within your desired component, you can import the motion object from the framer-motion library and add a motion component for any HTML or SVG element.

import { motion } from "framer-motion";

export default function App() {
  return <motion.div />;
}