# Necessity Check

**SHOULD** · **ID:** `animations-necessity-check` · **Category:** animations
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/animations-necessity-check

> SHOULD: Animate only to clarify cause/effect or add deliberate delight

Only animate when it clarifies cause and effect or adds deliberate delight

Animation should serve a purpose: showing relationships between actions and results, or creating memorable moments. Don't animate just because you can. Every animation should justify its existence by improving comprehension or creating meaningful delight.

## Bad — do not do this

`animations-necessity-check-bad`

```tsx
export function NecessityCheckBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="space-y-3">
          <div className="flex items-center gap-3 p-3 bg-muted rounded-lg animate-pulse-slow">
            <div className="w-8 h-8 bg-primary/10 rounded-full animate-spin-slow" />
            <div className="flex-1">
              <div className="h-3 bg-primary/10 rounded animate-bounce-subtle w-3/4" />
              <div className="h-2 bg-muted rounded mt-1 animate-bounce-subtle w-1/2" style={{ animationDelay: '0.1s' }} />
            </div>
            <div className="w-16 h-8 bg-primary rounded animate-pulse" />
          </div>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Everything animates. The constant motion is distracting and doesn't convey meaning.
        </p>
        <style>{`
          @keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
          @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
          @keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
          .animate-pulse-slow { animation: pulse-slow 3s infinite; }
          .animate-spin-slow { animation: spin-slow 8s linear infinite; }
          .animate-bounce-subtle { animation: bounce-subtle 2s infinite; }
        `}</style>
      </div>
      <p className="text-xs text-error mt-4">
        Gratuitous animation - distracting, no purpose
      </p>
    </div>
  );
}
```

## Good — do this

`animations-necessity-check-good`

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

export function NecessityCheckGood() {
  const [liked, setLiked] = useState(false);

  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
          <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary text-sm font-medium">
            A
          </div>
          <div className="flex-1">
            <div className="text-sm font-medium">Project Alpha</div>
            <div className="text-xs text-muted-foreground">Updated 2h ago</div>
          </div>
          <button
            onClick={() => setLiked(!liked)}
            className={`transition-transform duration-150 ${liked ? 'scale-110' : 'scale-100'}`}
          >
            <svg
              className={`w-6 h-6 transition-colors duration-150 ${
                liked ? 'text-red-500 fill-red-500' : 'text-muted-foreground'
              }`}
              fill={liked ? 'currentColor' : 'none'}
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
              />
            </svg>
          </button>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Animation only on the like button - provides feedback on user interaction and creates delight.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        Purposeful animation - feedback + delight on interaction
      </p>
    </div>
  );
}
```

## References

- [Animation Principles](https://www.nngroup.com/articles/animation-usability/)