Animation Performance Audit

The Animation Performance Audit is an AI skill that will audit every Motion & CSS animation in your codebase (or selected files), classify their performance, and then generate a report including scorecard and available improvements.

Your LLM can then follow this report to fix slow animations in your codebase.

Without exceptionally deep knowledge about the rendering pipeline, it's difficult to know how all the various methods of animating, and the CSS values that can be animated, are going to perform.

We wrote the Web Animation Performance Tier List to teach as much about this subject as we know, but there are so many surprising gotchas, that it's difficult to know everything. And as various people work on the same codebase, performance invariably slips. This is where the Animation Performance Audit comes in.

Install

The Animation Performance Audit skill is available to Motion+ members.

By running the following command in your terminal, the skill will be installed into all detected AI editors.

curl -sL "http://api.motion.dev/registry/skills/motion-audit?token=YOUR_TOKEN" | bash

Supported editors:

• Cursor

• Claude Code

• Windsurf

• Amp

• OpenCode

• Gemini CLI

Usage

Run the audit inside a project using the /motion-audit command:

By default, this will run a broad search of CSS, Motion, GSAP and Anime.js APIs in your codebase.

It's possible to limit the scope by passing a directory or filename:

Additionally, you can request to scope the audit to specific types of animations, or specific APIs:

Can you perform a /motion-audit of all scroll animations

Overall rank

The report starts with an easily-scannable letter ranking. This represents an average ranking of all discovered animations.

Breakdown

Next, you'll receive a full breakdown describing the absolute number of animations for each tier, and the percentage of animations that this tier represents. The idea is for this graph to be top-heavy (more S, A and B tier animations than below).

Findings

In findings, there's an entry for every actionable animation that explains:

• What: Filename, line numbers and tier

• Why: The values being animated, what parts of the render pipeline they trigger

• Impact: Is it worth fixing/changing?

• Improvements: How to improve performance (where possible)

For instance, an animation like this:

<motion.div
  animate={{
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 180, 180, 0],
    borderRadius: ["0%", "0%", "50%", "50%", "0%"],
  }}
  transition={{ repeat: Infinity }}
/>

Will flag that as these scale and rotate values are always animating together, we can animate transform directly to run this entirely on the GPU:

<motion.div
  animate={{
    transform: [
      "scale(1) rotate(0deg)",
      "scale(2) rotate(0deg)",
      "scale(2) rotate(180deg)",
      "scale(2) rotate(180deg)",
      "scale(1) rotate(0deg)",
    ],
    borderRadius: ["0%", "0%", "50%", "50%", "0%"],
  }}
  transition={{ repeat: Infinity }}
/>

Anti-patterns

This lists general patterns that can affect animation performance, like detecting filter: blur(>10px), long running off-screen animations, excessive use of will-change etc.

For example, the animation from before is repeat: Infinity, so this part of the report will suggest that performance could be improved by swapping animate to whileInView, thereby only running the animation while inside the viewport.

<motion.div
  whileInView={keyframes}
  transition={{ repeat: Infinity }}
/>

Accessibility

This part of the report looks for things like support for prefers-reduced-motion or rapidly flashing animations and suggest ways to fix.

Top 3 Recommendations

The report concludes with the top 3 priority fixes. This is a summary of the worst offenders, so you can ask your LLM to "fix the top 3 issues", or simply "fix" to fix everything in the report.

Tiers

The broad tier list used for grading animations is as follows:

The full explanation of these can be found in the Web Animation Performance Tier List.