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 週前更新