framer-motion
Advanced tools
npm install motion
Motion is available for React, JavaScript and Vue.
import { motion } from "motion/react"
function Component() {
return <motion.div animate={{ x: 100 }} />
}
Get started with Motion for React.
Note: Framer Motion is now Motion. Import from motion/react instead of framer-motion.
import { animate } from "motion"
animate("#box", { x: 100 })
Get started with JavaScript.
<script>
import { motion } from "motion-v"
</script>
<template> <motion.div :animate={{ x: 100 }} /> </template>
Get started with Motion for Vue.
Browse 330+ official examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
Over 100 examples come with a full step-by-step tutorial.
A one-time payment, lifetime-updates membership:
Motion is sustainable thanks to the kind support of its sponsors.
Motion powers the animations for all websites built with Framer, the web builder for creative pros. The Motion website itself is built on Framer, for its delightful canvas-based editing and powerful CMS features.
Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.
React-spring is a spring-physics based animation library that allows for a wide range of animations in React applications. It is similar to framer-motion in that it provides a way to create animations, but it uses spring physics for a more natural motion. React-spring is more focused on physics-based animations, whereas framer-motion offers a wider range of animation utilities, including gesture handling and drag.
React-motion is another animation library for React that provides a powerful way to create animations using spring configurations. It is less declarative and more configuration-based compared to framer-motion, which might be preferred by developers who want more control over the animation physics.
GSAP (GreenSock Animation Platform) is a robust JavaScript animation library that works well with React and other frameworks. It is not specifically designed for React like framer-motion, but it offers a wide range of animation capabilities and fine-grained control over animations. GSAP is known for its performance and flexibility, but it has a steeper learning curve compared to framer-motion.
Anime.js is a lightweight JavaScript animation library that can be used with any web framework, including React. It is similar to framer-motion in terms of providing a simple API for animations, but it does not offer React-specific features like framer-motion does. Anime.js is a good choice for developers looking for a general-purpose animation library that is easy to use and extend.
FAQs
A simple and powerful JavaScript animation library
The npm package framer-motion receives a total of 38,710,269 weekly downloads. As such, framer-motion popularity was classified as popular.
We found that framer-motion demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.
Security News
The supply chain control that delays freshly published gems now covers lockfile generation and gem vendoring in Ruby projects.
Security News
During a UK cyber test, a Mythos 5 agent used sockpuppets, social engineering, and prompt injection to try to get a maintainer to merge malware.