Motion

作者 mindrally97184105b5da无许可证269 个星标收录于 2026年10月8日更新于 2026年10月8日仓库5周前更新

Expert guidelines for building performant animations with Motion (formerly Motion One) vanilla JavaScript animation library

仅含说明Software DevelopmentDesign & Creative
AI 生成的概览

使用 Motion JavaScript 库构建高性能网页动画的指南。

功能
该技能提供使用 Motion（原 Motion One）这一原生 JavaScript 动画库创建动画的专业指导。内容涵盖基础动画、关键帧、时间线、滚动联动效果、进入视口触发、错峰动画、弹簧动画、缓动、播放控制、清理以及减少动态效果的无障碍处理。它产出的是代码示例与最佳实践建议，而非可执行产物。
适用场景
在编写或审查使用 Motion 的 JavaScript 或 TypeScript 网页动画时使用。适用于滚动效果、视口触发动画、序列时间线或动画性能调优等任务。当需要处理减少动态效果偏好等无障碍问题时也适用。
运行要求
需要在 JavaScript 或 TypeScript 项目中安装 Motion npm 包（npm install motion）。该技能不附带脚本，仅为说明文档与代码示例。

Motion Animation Guidelines

You are an expert in Motion (motion.dev), JavaScript, TypeScript, and web animation performance. Follow these guidelines when creating animations.

Core Principles

About Motion

  • Motion is the JavaScript animation library from the creator of Framer Motion
  • Use motion for vanilla JavaScript/TypeScript projects
  • Use motion/react for React projects (see framer-motion skill)
  • Designed for high performance with minimal bundle size

Installation

bash
npm install motion

Basic Import

javascript
import { animate, scroll, inView, timeline } from "motion";

Basic Animations

Simple Animation

javascript
import { animate } from "motion";
// Animate a single elementanimate(".element", { x: 100, opacity: 1 }, { duration: 0.5 });
// Animate with optionsanimate(  ".element",  { transform: "translateX(100px)" },  {    duration: 0.8,    easing: "ease-out"  });

Keyframes

javascript
animate(  ".element",  {    x: [0, 100, 50],      // Keyframe values    opacity: [0, 1, 0.5]  },  { duration: 1 });

Performance Optimization

Animate Transform Properties

javascript
// Best performance - GPU acceleratedanimate(".element", {  x: 100,           // translateX  y: 50,            // translateY  scale: 1.2,       // scale  rotate: 45,       // rotate  opacity: 0.5      // opacity});
// Avoid when possible - triggers layoutanimate(".element", {  width: 200,       // Causes layout recalculation  height: 150,      // Causes layout recalculation  top: 50,          // Causes layout recalculation  left: 100         // Causes layout recalculation});

Use will-change

javascript
// Add will-change for transform animationsconst element = document.querySelector(".element");element.style.willChange = "transform";
animate(element, { x: 100 }, {  onComplete: () => {    element.style.willChange = "auto"; // Remove after animation  }});

Hardware Acceleration

Motion automatically uses hardware-accelerated properties when possible. For best performance:

  1. Prefer x, y over left, top
  2. Prefer scale over width, height
  3. Use opacity for fade effects
  4. Use rotate over transform: rotate()

Timeline Animations

Create Timelines

javascript
import { timeline } from "motion";
const sequence = [  [".header", { y: ["-100%", 0], opacity: [0, 1] }],  [".content", { y: [50, 0], opacity: [0, 1] }, { at: "-0.3" }],  [".footer", { y: [50, 0], opacity: [0, 1] }, { at: "-0.3" }]];
const controls = timeline(sequence, {  duration: 0.8,  defaultOptions: { easing: "ease-out" }});

Timeline Controls

javascript
const controls = timeline(sequence);
controls.play();controls.pause();controls.reverse();controls.stop();controls.finish();
// Seek to specific timecontrols.currentTime = 0.5;

Scroll Animations

Basic Scroll Animation

javascript
import { scroll, animate } from "motion";
scroll(  animate(".progress-bar", { scaleX: [0, 1] }),  { target: document.querySelector("article") });

Scroll-Linked Animation

javascript
scroll(({ y }) => {  // y.progress is 0 to 1  animate(".element", {    opacity: y.progress,    y: y.progress * 100  }, { duration: 0 });});

Scroll with Container

javascript
scroll(  animate(".parallax", { y: [0, -100] }),  {    target: document.querySelector(".section"),    offset: ["start end", "end start"]  });

In-View Animations

Trigger on Visibility

javascript
import { inView, animate } from "motion";
inView(".card", (info) => {  animate(info.target, { opacity: 1, y: 0 }, { duration: 0.5 });
  // Return cleanup function  return () => {    animate(info.target, { opacity: 0, y: 20 }, { duration: 0.2 });  };});

With Options

javascript
inView(  ".element",  (info) => {    animate(info.target, { scale: [0.8, 1], opacity: [0, 1] });  },  {    margin: "-100px",  // Trigger 100px before entering viewport    amount: 0.5        // Trigger when 50% visible  });

Stagger Animations

Stagger Multiple Elements

javascript
import { stagger, animate } from "motion";
animate(  ".list-item",  { opacity: [0, 1], y: [20, 0] },  { delay: stagger(0.1) });

Stagger from Center

javascript
animate(  ".grid-item",  { scale: [0, 1] },  { delay: stagger(0.05, { from: "center" }) });

Stagger with Easing

javascript
animate(  ".item",  { x: ["-100%", 0] },  {    delay: stagger(0.1, {      easing: "ease-out",      start: 0.2    })  });

Spring Animations

Use Springs for Natural Motion

javascript
animate(  ".element",  { scale: 1.2 },  {    easing: "spring",    // or with custom spring settings    easing: [0.34, 1.56, 0.64, 1] // Custom bezier curve  });

Spring Options

javascript
animate(".element", { x: 100 }, {  type: "spring",  stiffness: 300,  damping: 30});

Easing Functions

Built-in Easings

javascript
// Common easing valuesanimate(".element", { x: 100 }, { easing: "ease" });animate(".element", { x: 100 }, { easing: "ease-in" });animate(".element", { x: 100 }, { easing: "ease-out" });animate(".element", { x: 100 }, { easing: "ease-in-out" });animate(".element", { x: 100 }, { easing: "linear" });
// Cubic bezieranimate(".element", { x: 100 }, {  easing: [0.25, 0.1, 0.25, 1]});

Animation Controls

Control Playback

javascript
const controls = animate(".element", { x: 100 }, { duration: 1 });
// Control methodscontrols.play();controls.pause();controls.stop();controls.finish();controls.reverse();
// Get/set timecontrols.currentTime = 0.5;console.log(controls.duration);
// Cancel animationcontrols.cancel();

Animation Events

javascript
const controls = animate(  ".element",  { x: 100 },  {    duration: 1,    onComplete: () => console.log("Done!")  });
// Promise-basedcontrols.finished.then(() => {  console.log("Animation finished");});

Accessibility

Respect Reduced Motion

javascript
const prefersReducedMotion = window.matchMedia(  "(prefers-reduced-motion: reduce)").matches;
animate(  ".element",  { x: 100, opacity: 1 },  {    duration: prefersReducedMotion ? 0 : 0.5,    easing: prefersReducedMotion ? "linear" : "ease-out"  });

Create Accessible Wrapper

javascript
function safeAnimate(element, keyframes, options = {}) {  const reducedMotion = window.matchMedia(    "(prefers-reduced-motion: reduce)"  ).matches;
  return animate(element, keyframes, {    ...options,    duration: reducedMotion ? 0 : (options.duration ?? 0.3)  });}

Integration with Frameworks

Vanilla JavaScript

javascript
document.addEventListener("DOMContentLoaded", () => {  animate(".hero", { opacity: [0, 1], y: [30, 0] });});

With Event Listeners

javascript
const button = document.querySelector(".button");
button.addEventListener("mouseenter", () => {  animate(button, { scale: 1.05 }, { duration: 0.2 });});
button.addEventListener("mouseleave", () => {  animate(button, { scale: 1 }, { duration: 0.2 });});

Cleanup

Cancel Animations

javascript
const controls = animate(".element", { x: 100 });
// Later, cancel itcontrols.cancel();

Cleanup Pattern

javascript
class AnimatedComponent {  constructor(element) {    this.element = element;    this.animations = [];  }
  animate(keyframes, options) {    const controls = animate(this.element, keyframes, options);    this.animations.push(controls);    return controls;  }
  destroy() {    this.animations.forEach(anim => anim.cancel());    this.animations = [];  }}

Best Practices Summary

  1. Use transform properties (x, y, scale, rotate) for best performance
  2. Add will-change before complex animations, remove after
  3. Use timeline for sequenced animations
  4. Use scroll() for scroll-linked effects
  5. Use inView() for viewport-triggered animations
  6. Use stagger() for animating multiple elements
  7. Prefer springs for interactive/gesture animations
  8. Always respect reduced motion preferences
  9. Cancel animations when no longer needed
  10. Test performance on actual devices

来源与署名

来源：mindrally/skills位于motion提交9718410

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 mindrally/skills 的技能

Zustand State Management

mindrally

为 React 和 TypeScript 应用中的 Zustand 状态管理提供设计与使用规范。

Software Development2695周前更新

Zod Schema Validation

mindrally

关于 Zod 模式校验与 TypeScript 类型推断的实践指导。

Software Development2695周前更新

Woocommerce

mindrally

面向 WordPress 与 WooCommerce 插件开发的指南，涵盖 PHP 规范、钩子、安全与扩展模式。

Software Development2695周前更新

Wordpress

mindrally

以 PHP 规范、安全实践和测试约定指导 WordPress 与 WooCommerce 开发。

Software Development2695周前更新

Websocket Development

mindrally

使用 WebSocket 通信构建实时应用的最佳实践与指南。

Software Development2695周前更新

Web Development

mindrally

提供 Bootstrap、Django、HTMX 以及通用 Web 最佳实践的 Web 开发指南。

Software Development2695周前更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新