# Animaciones React nivel Awwwards (/web--awwwards-animations)

/web--awwwards-animations es una skill de Claude Code de la sección Web y Diseño. Elige la herramienta adecuada (GSAP, Motion, Anime.js o Lenis) y crea animaciones React fluidas y accesibles: scroll, efectos magnéticos y revelados.

- Versión web: https://skills.sgomez.dev/es/s/web--awwwards-animations
- Sección: [Web y Diseño](https://skills.sgomez.dev/es/web.md)
- Autor: Santiago Gómez de la Torre
- Licencia: MIT
- Código: https://github.com/sgomez-dev/claude-skills/blob/main/skills/web/awwwards-animations.md
- Actualizada el 28 mar 2026

## Úsala cuando

- Quieres animaciones de scroll o secuencias complejas en React
- Necesitas decidir entre GSAP, Motion, Anime.js y Lenis
- Buscas efectos como cursor magnético, revelado de texto o imágenes

## No es para

- Proyectos que no usan React
- Sustituir una revisión de accesibilidad completa de tu web

## Qué obtienes

Código React con las animaciones implementadas, siguiendo las reglas de rendimiento y movimiento reducido de la skill.

## Cómo pedírselo

- `/web--awwwards-animations añade scroll suave estilo Awwwards a mi web con Lenis`
- `/web--awwwards-animations crea un botón con efecto magnético`
- `/web--awwwards-animations anima las secciones al hacer scroll con GSAP ScrollTrigger`

## Instalar

macOS · Linux:

```
curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash
```

Windows:

```
irm https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.ps1 | iex
```

Plugin de Claude Code:

```
/plugin marketplace add sgomez-dev/claude-skills
/plugin install web-skills@claude-skills-collection
```

## Permisos

- Lee: `**/*`
- Escribe: `**/*`
- Ejecuta: `npm install`, `pnpm add`
- Red: No
- Destructiva: No

## Descripción del autor (traducida)

Animaciones de React a nivel Awwwards: GSAP, Motion, Anime.js, scroll suave con Lenis, ScrollTrigger, efectos magnéticos

## Preguntas sobre esta skill

### ¿Qué librería usa para cada cosa?

GSAP con ScrollTrigger para scroll y líneas de tiempo, Motion para montaje y desmontaje de componentes, Lenis para el scroll suave y Anime.js para animaciones ligeras del DOM.

### ¿Respeta a quien desactiva las animaciones?

Sí. Incluye patrones para respetar prefers-reduced-motion y pide no esconder contenido esencial tras revelados que dependan solo de la animación.

### ¿Sirve si no uso React?

Está escrita para React, con ejemplos como useGSAP y ReactLenis. Fuera de React tendrías que adaptar los patrones por tu cuenta.


- [Cómo revisamos esto](https://skills.sgomez.dev/es/methodology.md)