- Grupo: Animación
- Cuándo se activa: Animaciones JS ligeras (anime.js) de DOM/SVG
- Se instala: Opcional: llega con un paquete de skills.
Documentación completa upstream (inglés): SKILL.upstream.md (525 líneas). No la leas entera: usa el mapa y lee solo la sección que necesites (Read con offset/limit o Grep).
- Usar: secuencias coreografiadas con
anime.timeline(), reveals escalonados con anime.stagger(), animación de paths SVG (line drawing, morphing, motion path).
- Usar: proyectos vanilla/Vue/Astro donde importa el bundle (~9 KB) y no se quiere dependencia de React.
- NO usar: experiencias scroll-driven, pin, scrub →
gsap-scrolltrigger; animación declarativa con gestos en React → motion-framer; física de muelles en React → react-spring-physics.
| Tarea |
Lee solo |
| Empezar un proyecto/starter |
SKILL.upstream.md L30-135 (§Core Concepts) + assets/README.md (Vite vanilla + npm i animejs) |
| Stagger / reveal en grid |
L138-165 (§1-2) + references/stagger_guide.md |
| SVG (línea, morph, seguir path) |
L166-193, L293-308 + scripts/animation_generator.py --type svg-morph |
| Timeline de hero/modal/menú |
L194-218, L111-135 + references/timeline_guide.md o scripts/timeline_builder.py --preset hero |
| Easings avanzados y control de reproducción |
L309-371 (§Advanced Techniques) |
| Integrar en React/Vue |
L253-292 (§Integration Patterns) |
| Depurar / rendimiento |
L372-424 (§Performance) + L425-500 (§Common Pitfalls) |
| Líneas |
Sección |
Para qué |
| 10-29 |
Overview |
Cuándo usar y features clave |
| 30-135 |
Core Concepts |
anime() básico (32), targets (48), propiedades animables CSS/SVG/objetos (67), timeline (111) |
| 136-252 |
Common Patterns |
Stagger (138), stagger from center (151), SVG line (166), morph (178), timeline (194), keyframes (219), scroll manual (236) |
| 253-308 |
Integration Patterns |
React con cleanup (255), Vue mounted (279), motion path (293) |
| 309-371 |
Advanced Techniques |
Easing spring/steps/bezier, direction/loop, play/pause/seek |
| 372-424 |
Performance Optimization |
Solo transform/opacity, batch de targets, will-change, autoplay:false |
| 425-500 |
Common Pitfalls |
Unidades, transform como string, cleanup, demasiados elementos, offsets de timeline, loops infinitos |
| 501-525 |
Resources / Related Skills |
Scripts, referencias y comparativa con GSAP/Framer |
references/api_reference.md — API completa Anime.js v3 (parámetros, callbacks, helpers).references/stagger_guide.md — anime.stagger(): grid, from, axis, easing, rangos.references/timeline_guide.md — secuencias, offsets relativos/absolutos, control de timeline.scripts/animation_generator.py — boilerplate de 8 tipos (basic, stagger, grid-stagger, svg-line, svg-morph, timeline, keyframe, scroll): py -3 scripts/animation_generator.py --type stagger (Linux/mac: python3 …).scripts/timeline_builder.py — presets hero/modal/cards/loader/page/toast/menu: py -3 scripts/timeline_builder.py --preset modal.assets/README.md — solo instrucciones de starter con Vite y enlaces a ejemplos oficiales (no hay carpeta starter_animejs/ real pese a lo que dice el upstream).
- Anima únicamente
translateX/Y, scale, rotate, opacity; nunca left/top/width ni el string transform.
- Una llamada
anime() con varios targets, no un bucle de llamadas; para más de 200 elementos usa CSS animations.
- En React/Vue guarda la instancia y haz
pause() en el cleanup del efecto/unmounted.
- Offsets de timeline siempre con
'-=500'/'+=200'; un número sin operador es tiempo absoluto.
- Sin
loop: true infinitos por defecto; respeta prefers-reduced-motion (salta al estado final con seek(duration) o no animes).
- Detecta el stack como indica la skill
front-activation/skill-router (senzu/senzu.json → package.json). Es framework-agnóstica: vanilla y Astro (en <script> cliente o client:*), Vue (onMounted/onUnmounted), React (useEffect con cleanup, L255-278).
- SSR-safe solo si se importa y ejecuta en cliente; en Next/Nuxt/Astro no invoques
anime() en módulos de servidor.
