360 Secure SkillHub
360 安全技能中心

Motion.dev Complete Documentation

汇总 Motion.dev（原 Framer Motion）动画库文档：安装命令 npm install motion、React/JS/Vue 基础动画、弹簧、滚动与手势用法，并列官方站点、GitHub 与示例链接。内容以说明和少量示例为主，依赖需用户自行安装。

leonaaardob
leonaaardob
热度 93.32
最近更新 2026-05-11 15:54:35
分类：知识依赖：纯提示词应用场景：概念解释

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add lb-motion-skill
Metadata
name
motion
version
1.0.0
description
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
author
Leonardo Balland
tags
["motion","animation","react","javascript","vue","framer-motion","transitions","gestures","scroll","spring","keyframes"]
read_when
["Working with Motion animations or Framer Motion","Implementing animations in React, Vue, or vanilla JavaScript","Creating scroll-linked or scroll-triggered animations","Building gesture-based interactions","Optimizing animation performance","Migrating from Framer Motion to Motion"]

Motion.dev Documentation

Motion is a modern animation library for React, JavaScript, and Vue. It's the evolution of Framer Motion, offering:

  • Tiny size: Just 2.3kb for the mini HTML/SVG version
  • High performance: Hardware-accelerated animations
  • Flexible: Animate HTML, SVG, WebGL, and JavaScript objects
  • Easy to use: Intuitive API with smart defaults
  • Spring physics: Natural, kinetic animations
  • Scroll animations: Link values to scroll position
  • Gestures: Drag, hover, tap, and more

Quick Reference

Installation

npm install motion

Basic Animation

import { animate } from "motion"

// Animate elements
animate(".box", { rotate: 360, scale: 1.2 })

// Spring animation
animate(element, { x: 100 }, { type: "spring", stiffness: 300 })

// Stagger multiple elements
animate("li", { opacity: 1 }, { delay: stagger(0.1) })

React

import { motion } from "motion/react"

<motion.div
  animate={{ rotate: 360 }}
  transition={{ duration: 2 }}
/>

Scroll Animations

import { scroll } from "motion"

scroll(animate(".box", { scale: [1, 2, 1] }))

Documentation Structure

  • quick-start.md - Installation and first animation
  • More docs to be added...

When to Use This Skill

Use this skill when:

  • Implementing animations in web applications
  • Optimizing animation performance
  • Creating scroll-based effects
  • Building interactive UI with gestures
  • Migrating from Framer Motion to Motion

External Resources