# Animation Only When Requested

**NEVER** · **ID:** `animations-ibelick-intentional-only` · **Category:** animations
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/animations-ibelick-intentional-only

> NEVER: Add animation unless it is explicitly requested. Gratuitous animation slows perceived performance and can cause motion sickness. Animation should serve purpose.

Never add animations unless explicitly requested - they can hurt UX if overused

Read this as what it is: agent-facing guidance. It is a default for the party that was not asked — a coding agent handed "build me a settings panel" should not decide on its own that the panel slides. It is not a claim that animation is bad. A human designer choosing to animate has, by definition, explicitly requested it. The failure it prevents is real: animation added because it looks cool taxes every future use of a control, slows perceived performance, and is the single loudest tell of generated UI. Where motion IS wanted, animations-necessity-check gives the test it has to pass.

## Bad — do not do this

`animations-ibelick-intentional-only-bad`

```tsx
import { useState } from 'react';

export function IbelickIntentionalOnlyBad() {
  const [items] = useState(['Item 1', 'Item 2', 'Item 3']);

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium animate-pulse">Settings</h3>
      <ul className="space-y-2">
        {items.map((item, i) => (
          <li
            key={item}
            className="p-3 bg-muted rounded-lg transition-all duration-500 hover:scale-105 hover:shadow-lg hover:rotate-1"
            style={{ animationDelay: `${i * 100}ms` }}
          >
            <span className="animate-bounce inline-block mr-2">•</span>
            {item}
          </li>
        ))}
      </ul>
      <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg animate-pulse hover:animate-spin">
        Save
      </button>
      <p className="text-xs text-destructive mt-4">
        Excessive animations distract from the content and slow down interaction
      </p>
    </div>
  );
}
```

## Good — do this

`animations-ibelick-intentional-only-good`

```tsx
import { useState } from 'react';

export function IbelickIntentionalOnlyGood() {
  const [items] = useState(['Item 1', 'Item 2', 'Item 3']);

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium">Settings</h3>
      <ul className="space-y-2">
        {items.map((item) => (
          <li
            key={item}
            className="p-3 bg-muted rounded-lg transition-colors hover:bg-muted/80"
          >
            <span className="mr-2">•</span>
            {item}
          </li>
        ))}
      </ul>
      <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg transition-colors hover:bg-primary/90">
        Save
      </button>
      <p className="text-xs text-success mt-4">
        Subtle hover feedback only - no unnecessary animation
      </p>
    </div>
  );
}
```

## References

- [ibelick — baseline-ui SKILL.md](https://github.com/ibelick/ui-skills/blob/main/skills/baseline-ui/SKILL.md)
- [The Case Against Animation](https://web.dev/articles/animations-guide)