framer-motion
A simple and powerful JavaScript animation library. Use when: Simple API: First-class React, JavaScript, and Vue packages; Hybrid engine: Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations; Production-ready: TypeScript, extensive test suite, tree-shakable, tiny footprint. NOT for: server-side CLI utilities; database access layer.
Install
npx skillscat add yusenthebot/skills-pack/framer-motion Install via the SkillsCat registry.
SKILL.md
framer-motion
Overview
A simple and powerful JavaScript animation library. ✨ Sponsors ## Why Motion? - Simple API: First-class React, JavaScript, and Vue packages.
Installation
npm install framer-motionCore API / Usage
npm install motionimport { motion } from "motion/react"
function Component() {
return <motion.div animate={{ x: 100 }} />
}Common Patterns
Pattern 1
import { animate } from "motion"
animate("#box", { x: 100 })Configuration
See the official documentation for configuration options and advanced settings.
Tips & Gotchas
- Includes built-in TypeScript type definitions.
- Works in both Node.js and browser environments.