← All libraries

Motion / Framer Motion

JavaScript
↗ Official site

Motion & animation

Simple, powerful animation library — works with or without React.

What it does

Motion (formerly Framer Motion) makes it easy to add spring animations, gestures, and layout transitions. The React version is especially popular for animating UI components.

When to use it

Use this when you're building in React and want polished UI transitions without writing complex GSAP timelines.

Real example

You're building a React portfolio and want project cards to fade + slide up as they appear in view. Prompt: 'Use Framer Motion to animate each .project-card with initial opacity 0 and y 30, animating to opacity 1 y 0 when it enters the viewport using whileInView.'

Good to know

Has two flavors: the React version (Framer Motion) and the vanilla JS version (Motion One). Both are excellent.

Alternatives

Install

$ npm install motion

Use cases

UI animationpage transitionsgestureReact

Language

JavaScript

Category

Motion & animation

More in Motion & animation

Other tools in the same category

JS GSAP

The gold standard for smooth, complex animations on the web.

scroll animationhero animationSVG animation
JS Anime.js

Lightweight animation library with a clean, simple API.

CSS animationSVG animationlightweight
JS Lenis

Smooth scroll library that makes your page feel silky.

smooth scrollscroll animationmarketing