Overview

Framer Motion is an open-source animation library designed for React applications, providing a declarative API for creating production-ready animations and interactive components. Established in 2018, the library aims to simplify the process of adding motion and gesture recognition to user interfaces, abstracting away much of the complexity typically associated with web animations. It is particularly suited for developers working on projects that require smooth UI transitions, draggable elements, or intricate animation sequences within a React environment.

The library integrates directly with React components, allowing developers to define animation properties and gestures as component props. This approach aligns with React's component-based architecture, promoting reusability and maintainability of animation code. Framer Motion handles the underlying performance optimizations, leveraging browser capabilities like hardware acceleration when possible, to ensure smooth animations even on complex UIs. Its architecture is built on a physics-based animation engine, which can yield natural-looking motion for elements that respond to user input or changes in application state.

Developers use Framer Motion to animate a range of properties, including position, scale, rotation, opacity, and color. It supports various animation types, such as keyframe animations, spring animations, and custom transitions. Beyond basic animations, Framer Motion offers robust support for gesture recognition, including drag, pan, hover, and tap events. This makes it a practical choice for building interactive elements like carousels, draggable cards, or expandable menus, where user interaction directly influences component behavior. For example, a developer can define a component that becomes draggable with just a few lines of code, and Framer Motion manages the physics of the drag operation, including momentum and boundaries.

The library also includes features for orchestration, allowing developers to sequence multiple animations, synchronize them with component lifecycle events, and create complex animation choreographies. This is useful for onboarding flows, page transitions, or any scenario where multiple elements need to animate in a coordinated manner. Error handling and accessibility considerations are also built into the library, with features like reduced motion preferences being respected by default, aligning with modern web development best practices for inclusive design. The declarative nature of Framer Motion allows developers to describe what they want to animate rather than how, reducing boilerplate code and improving readability.

Key features

  • Declarative Animation API: Define animations directly within React component props, simplifying complex motion sequences and reducing imperative code.
  • Gesture Recognition: Built-in support for drag, pan, hover, tap, and scroll gestures, enabling interactive components with minimal setup, as detailed in the Framer Motion Gestures documentation.
  • Physics-Based Animations: Utilizes spring physics for natural and fluid motion, offering control over stiffness, damping, and mass for realistic effects.
  • Variants: Define animation states as reusable variants, allowing for complex orchestration and easy toggling between different visual states of a component or its children.
  • Layout Animations: Automatically animates layout changes (e.g., position, size) when elements are added, removed, or reordered in the DOM, creating smooth transitions without manual calculation.
  • Scroll-Triggered Animations: Animate elements based on their visibility or position within the viewport, supporting effects like parallax scrolling and element reveals.
  • Server-Side Rendering (SSR) Support: Designed to work seamlessly with SSR frameworks like Next.js, ensuring animations are correctly hydrated on the client side.
  • Performance Optimizations: Leverages hardware acceleration and efficient rendering techniques to ensure smooth animations at 60 frames per second, as discussed in performance considerations for React rendering.

Pricing

Framer Motion is an open-source project and is available for free use under the MIT license. There are no licensing fees, subscriptions, or commercial tiers associated with the library itself. Development and maintenance are supported by the community and contributions from Framer.

Tier Cost Features
Open-Source Library Free Full access to all Framer Motion features, updates, and community support.

Pricing as of 2026-05-28. For the most current licensing details, refer to the Framer Motion introduction and documentation.

Common integrations

  • React: Framer Motion is built specifically for React, integrating directly with React components and hooks to manage animation state and lifecycle. Developers can utilize Framer Motion components like motion.div for animating HTML and SVG elements within their React applications, as demonstrated in the Framer Motion animation API reference.
  • Next.js: Compatible with Next.js for server-side rendered (SSR) and static-generated (SSG) applications, ensuring animations hydrate correctly on the client and maintain performance.
  • Gatsby: Integrates with Gatsby sites for creating animations in static and dynamically rendered pages, often used for page transitions and interactive elements.
  • TypeScript: Fully typed with TypeScript, providing strong type checking and auto-completion for a better developer experience in TypeScript projects. The Framer Motion TypeScript guide offers detailed usage information.
  • CSS-in-JS Libraries (e.g., Styled Components, Emotion): Can be used alongside CSS-in-JS solutions to manage styles and animation properties dynamically, offering flexibility in styling animated components.

Alternatives

  • React Spring: A physics-based animation library for React that focuses on flexible, performant animations, often used for more fine-grained control over animation properties.
  • GSAP (GreenSock Animation Platform): A professional-grade JavaScript animation library known for its high performance, extensive features, and broad browser compatibility, suitable for complex timelines and interactive experiences.
  • Anime.js: A lightweight JavaScript animation library that works with CSS properties, SVG, DOM attributes, and JavaScript Objects, providing a simple yet powerful API for various animation needs.

Getting started

To begin using Framer Motion in a React project, you first need to install it. This example demonstrates a basic fade-in animation for a div element.

npm install framer-motion
# or
yarn add framer-motion

Once installed, you can import motion from framer-motion and use it to transform any HTML or SVG element into an animatable component. The motion object provides components for all standard HTML and SVG elements (e.g., motion.div, motion.span, motion.svg). You then pass animation properties as props to these components.

Consider the following React component that animates a box to fade in and move from the left:

import React from 'react';
import { motion } from 'framer-motion';

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, x: -100 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.8, ease: "easeOut" }}
      style={{
        width: 150,
        height: 150,
        backgroundColor: '#007bff',
        borderRadius: 10,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
        fontSize: '1.2em'
      }}
    >
      Hello Framer Motion!
    </motion.div>
  );
}

export default AnimatedBox;

In this example:

  • initial defines the starting state of the animation (opacity 0, x position -100).
  • animate defines the target state (opacity 1, x position 0), which Framer Motion animates towards upon component mount.
  • transition specifies the animation properties, such as duration and easing function. Here, duration: 0.8 sets the animation to last 0.8 seconds, and ease: "easeOut" applies an easing curve that starts fast and slows down.

This setup allows for a declarative approach to animations. When AnimatedBox mounts, the div will smoothly transition from being invisible and off-screen to fully visible and in its final position. For more complex interactions, such as drag gestures, you can add properties like drag and dragConstraints to the motion.div component, defining the boundaries within which the element can be dragged. This modularity and direct integration into React's component model make Framer Motion a powerful tool for enhancing user interfaces with dynamic and interactive elements.