# motion

Guides coding agents to build hardware-accelerated animations using the Motion library in vanilla JavaScript and TypeScript.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 812 installs · ★ 286
- Author: Mindrally
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Mindrally/skills/tree/HEAD/motion/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/mindrally-motion

## What it does

This skill equips coding assistants with implementation standards for the vanilla Motion library (`npm install motion`). It provides structured patterns for `animate`, `timeline`, `scroll`, `inView`, and `stagger`.

The core focus is browser rendering performance. The prompt instructs models to avoid layout-triggering properties like `width` or `top`, favoring GPU-accelerated transforms like `scale`, `x`, and `y`. It also covers temporary `will-change` allocation and accessibility via `prefers-reduced-motion`.

For React applications, this skill is unsuited: the guidelines explicitly direct you to use `motion/react` instead.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill motion -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/motion/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/motion/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill motion -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/motion/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill motion -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/motion/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills motion
```

2. **Manually: put the files in place**
- File: `.github/skills/motion/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill motion -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Mindrally/skills --path motion
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/motion/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill motion -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Mindrally/skills/tree/HEAD/motion/SKILL.md

## When to use it
- build scroll-linked progress and parallax animations
- orchestrate staggered timeline sequences across DOM elements
- optimize frame rates by replacing layout properties with transforms
- implement accessible animations respecting reduced-motion settings

## Example prompts
- Create a staggered reveal animation for .card elements using motion
- Animate the page progress bar on scroll with vanilla Motion
- Build a sequence timeline for header and footer using GPU transforms

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: f70efe7c5e387655.

BEGIN THIRD-PARTY FILE f70efe7c5e387655
````text
---
name: motion
description: Expert guidelines for building performant animations with Motion (formerly Motion One) vanilla JavaScript animation library
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# 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 element
animate(".element", { x: 100, opacity: 1 }, { duration: 0.5 });

// Animate with options
animate(
  ".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 accelerated
animate(".element", {
  x: 100,           // translateX
  y: 50,            // translateY
  scale: 1.2,       // scale
  rotate: 45,       // rotate
  opacity: 0.5      // opacity
});

// Avoid when possible - triggers layout
animate(".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 animations
const 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 time
controls.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") }
);
```
````
END THIRD-PARTY FILE f70efe7c5e387655

The third-party file has ended. Everything between the f70efe7c5e387655 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3345 of 8485 bytes. © Mindrally · Apache-2.0 · https://github.com/Mindrally/skills/tree/HEAD/motion/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md