Gsap Framer Scroll Animation
github/awesome-copilot
A skill your agent uses whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion…
Animation skill for Motion (prev Framer Motion) and CSS animation.
Install Motion
$ npx skills add softmaple/softmaple --skill motion -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install softmaple/softmaple motion --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/softmaple/softmaple.git skills-src && mkdir -p .claude/skills && cp -r skills-src/apps/web/.agents/skills/motion .claude/skills/motion && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "motion" agent skill from https://github.com/softmaple/softmaple/tree/next/apps/web/.agents/skills/motion into .claude/skills/motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/softmaple/softmaple/tree/next/apps/web/.agents/skills/motionType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add softmaple/softmaple --skill motion -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install softmaple/softmaple motion --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/softmaple/softmaple.git skills-src && mkdir -p .agents/skills && cp -r skills-src/apps/web/.agents/skills/motion .agents/skills/motion && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "motion" agent skill from https://github.com/softmaple/softmaple/tree/next/apps/web/.agents/skills/motion into .agents/skills/motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add softmaple/softmaple --skill motion -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install softmaple/softmaple motion --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/softmaple/softmaple.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/apps/web/.agents/skills/motion .cursor/skills/motion && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "motion" agent skill from https://github.com/softmaple/softmaple/tree/next/apps/web/.agents/skills/motion into .cursor/skills/motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/softmaple/softmaple.git --path apps/web/.agents/skills/motion--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add softmaple/softmaple --skill motion -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install softmaple/softmaple motion --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/softmaple/softmaple.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/apps/web/.agents/skills/motion .gemini/skills/motion && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "motion" agent skill from https://github.com/softmaple/softmaple/tree/next/apps/web/.agents/skills/motion into .gemini/skills/motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install softmaple/softmaple motionInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add softmaple/softmaple --skill motion -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/softmaple/softmaple.git skills-src && mkdir -p .github/skills && cp -r skills-src/apps/web/.agents/skills/motion .github/skills/motion && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "motion" agent skill from https://github.com/softmaple/softmaple/tree/next/apps/web/.agents/skills/motion into .github/skills/motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add softmaple/softmaple --skill motion -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install softmaple/softmaple motion --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/softmaple/softmaple.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/apps/web/.agents/skills/motion .opencode/skills/motion && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "motion" agent skill from https://github.com/softmaple/softmaple/tree/next/apps/web/.agents/skills/motion into .opencode/skills/motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
motion- GitHub stars
- 159
- Token cost
- ~1.1k tokens
- SKILL.md length
- 524 words
- Files
- 10
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Animation skill for Motion (prev Framer Motion) and CSS animation.
- Works in 4 steps: Read the installed version first. Check… → Search the codex for upgrade on the… → Read the whole page and follow it in… → …
- Writing animations
- SKILL.md covers Upgrading Motion, Tiers and If the Motion MCP server is…
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Motion is an agent skill from softmaple/softmaple. Animation skill for Motion (prev Framer Motion) and CSS animation. Provides: animation best practices (including specific advice for vanilla JS, React, Vue, Base UI and Radix), documentation and example search, CSS spring and bounce generation, MotionScore code and runtime performance audits, and the visual transition editor. Use when writing animations, working with Motion (motion, motion/react, motion-v, framer-motion), animating a UI, writing CSS linear() springs, auditing performance/jank/layout thrash via…
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files (for example `best-practices/base-ui.md`, `best-practices/index.md` and `best-practices/motion.md`).
It sits in Frontend & Design, covering Web animation and motion, Design systems and Mobile performance. It works with React, Motion, Vue.js and JavaScript. The repository describes itself as: A Paper Typesetting Editor. The licence is Apache-2.0.
When your agent uses it
- Writing animations
- Working with Motion (motion
- Writing CSS linear() springs
- Auditing performance/jank/layout thrash via code
Example prompts
- “/motion”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Read the installed version first. Check package.json for motion,
- Search the codex for upgrade on the project's platform. For React that
- Read the whole page and follow it in order. Do not summarise it. Each
- Swap framer-motion imports to motion/react and uninstall
What it can do on your machine
Read from SKILL.md and the folder at commit 9963f9d. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
motion.dev
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Motion loads about 1.1k tokens when it runs. Until then it costs about 160 tokens; SKILL.md has 524 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from softmaple/softmaple at commit 9963f9d, republished under its Apache-2.0 licence (© softmaple). 524 words, ~1,123 tokens.
Download SKILL.mdSave it as
.claude/skills/motion/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.- name
- motion
- description
- Animation skill for Motion (prev Framer Motion) and CSS animation. Provides: animation best practices (including specific advice for vanilla JS, React, Vue, Base UI and Radix), documentation and example search, CSS spring and bounce generation, MotionScore code and runtime performance audits, and the visual transition editor. Use when writing animations, working with Motion (motion, motion/react, motion-v, framer-motion), animating a UI, writing CSS linear() springs, auditing performance/jank/layout thrash via code or runtime, searching Motion docs or examples, adding a Motion UI section, or upgrading between Motion versions.
- argument-hint
- [subcommand or question, e.g. 'audit src/Modal.tsx', 'spring bounce 0.3', 'upgrade', 'how do I animate a list']
Motion
Animation for the web, done properly.
- Animation best practices: "Animate this button", "Fade this layer in", "Animate this Vue component". Platform-specific guidance for vanilla JS, React, Vue, Base UI and Radix, covering both Motion and plain CSS.
- Documentation, examples and Motion UI search: "What options does X have", "How does X work", "Use X to do Y", "Show me an example of X", "Make a carousel / ticker / modal", "Add a Motion UI accordion / pricing section / hero".
- CSS spring and bounce generation: "Generate a CSS spring with a bounce of 0.5 over 0.3s", "Make this bouncier", "Give me a bounce easing".
- MotionScore performance audit: "Audit src/Modal.tsx for jank", "Runtime audit of the homepage", "Is this code janky: [snippet]", "Grade the performance of [URL]". You may also run audits proactively and report what you find. Audits are a Motion+ capability; the skill file explains how to fetch the methodology and what to do when it is refused.
- Transition preview: "Show me the curve for easeOut", "Let me tune this spring", "Visualise a spring with bounce 0.5".
Upgrading Motion
"/motion upgrade", "migrate from framer-motion", "upgrade to Motion 12" and similar all resolve through documentation search — there is no separate tool.
- Read the installed version first. Check
package.jsonformotion,framer-motionormotion-vbefore searching. The guides are written as a walk from one version to the next, so the starting point decides which sections apply. - Search the codex for
upgradeon the project's platform. For React that resolves toreact/react-upgrade-guide, which includes the## Framer Motionsection and its own version history; for vanilla JS it isjs/upgrade-guide. Coming from GSAP, searchmigrate from gsap. - Read the whole page and follow it in order. Do not summarise it. Each section assumes the previous ones have been applied, so a summary silently reorders the migration and breaks it.
- Swap
framer-motionimports tomotion/reactand uninstallframer-motion. They must never both be installed.
Show full SKILL.md (202 more words)Show less
Tiers
Best practices, search and easing generation work without an account. The rest is tiered, and the tools say so when you reach them:
- A Motion account (free): saving a transition. Run the Motion+ MCP server, signed in from the editor's MCP settings.
- Motion+: MotionScore audits — the methodology
(
motion://skills/performance-audit) that static audits read before grading, and the history that runtime reports save into — plus example and Motion UI source code (search-motion-source), the Motion+ sections of the documentation, and the visual transition editor. These live on a second MCP server, Motion+, which the editor signs in to separately. Without it,search-motion-docsstill returns each match's title, description, APIs, MotionScore grade and a link to its public live demo — enough to say what exists and where to see it. Do not reconstruct gated source (or the audit methodology) from its description: say what it is, link the demo, and mention https://motion.dev/plus once.
If the Motion MCP server is unavailable
best-practices/ is self-contained and works with no server at all — use it
directly. Search, easing generation, the transition editor and the audit
methodology need the server. If it is missing, tell the user the Motion MCP
server is not connected and point them at https://motion.dev/docs/ai-kit.
© softmaple, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 9 other files in apps/web/.agents/skills/motion of softmaple/softmaple.
- SKILL.md
- best-practices/base-ui.md
- best-practices/index.md
- best-practices/motion.md
- best-practices/react.md
- best-practices/vue.md
- codex/index.md
- css-spring/index.md
- performance-audit/index.md
- transition-preview/index.md
Open the folder on GitHubat commit 9963f9d
Compare with similar skills
Motion next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Motion this skillsoftmaple/softmaple | 159 | — | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Gsap Framer Scroll Animationgithub/awesome-copilot | 40k | 1 repos | ~1.6k | Automated safety check: Pass | MIT | |
| GSAP Core Animationgreensock/gsap-skills | 16k | 4 repos | ~3.7k | Automated safety check: Pass | MIT | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Animated React Component LibrariesHainrixz/editor-pro-max | 260 | 1 repos | ~5.7k | Automated safety check: Pass | Custom licence |
Similar skills
- Official
GSAP Core Animation
greensock/gsap-skills
Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
Motion Dev Animations
199-biotechnologies/motion-dev-animations-skill
Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.
More from softmaple/softmaple
Javascript Testing Expert
softmaple/softmaple
Expert-level JavaScript testing skill focused on writing high-quality tests that find bugs, serve as documentation, and prevent regressions.
Git Workflow
softmaple/softmaple
Softmaple Git branching, commits, pre-commit hooks, and pull requests.
Related
Categories
Questions about Motion
What does Motion do?
Animation skill for Motion (prev Framer Motion) and CSS animation. Motion is an agent skill from softmaple/softmaple. Animation skill for Motion (prev Framer Motion) and CSS animation.
When should I use Motion?
Motion fits situations like: writing animations; working with Motion (motion; writing CSS linear() springs; auditing performance/jank/layout thrash via code.
How do I install Motion in Claude Code?
Run `npx skills add softmaple/softmaple --skill motion -a claude-code`. Or copy the skill folder (apps/web/.agents/skills/motion in softmaple/softmaple) into .claude/skills/motion in your project. Claude Code loads it when a task matches its description.
How do I install Motion in Codex?
Run `npx skills add softmaple/softmaple --skill motion -a codex`. Or copy the skill folder (apps/web/.agents/skills/motion in softmaple/softmaple) into .agents/skills/motion in your project. Codex loads it when a task matches its description.
Can I use Motion in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add softmaple/softmaple --skill motion -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/motion, .gemini/skills/motion, .github/skills/motion and .opencode/skills/motion in your project.
What does Motion need to run?
SKILL.md names no scripts, command-line tools or credentials: Motion is instructions for the agent only.
Does Motion access the network?
SKILL.md names 1 domain. As links in the text: motion.dev. This is read from the text; nothing was executed.
Is Motion safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Motion use?
Motion is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Motion use?
About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Motion?
Skills that share tags, products or a category with Motion: Gsap Framer Scroll Animation (github/awesome-copilot, 40k stars), GSAP Core Animation (greensock/gsap-skills, 16k stars), UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars) and Design Style (Castor6/tactus, 376 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Motion?
softmaple (a GitHub organization) maintains it in softmaple/softmaple, which has 159 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 7, 2026.
Source: softmaple/softmaple on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.