# Lottie Bodymovin

> Úsalo al implementar los 12 principios de animación de Disney con animaciones Lottie exportadas desde After Effects.

Fuente: https://skillsagentes.com/skills/calesthio/openmontage/lottie-bodymovin
Markdown: https://skillsagentes.com/skills/calesthio/openmontage/lottie-bodymovin.md

Repositorio: https://github.com/calesthio/OpenMontage
Autor: calesthio
Licencia: AGPL-3.0
Actualizado: hace 4 meses
Coste de contexto: 26 tok instalada, 930 tok al activarse, 930 tok con todos los archivos del bundle
Bundle: 1 archivo, 4 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add calesthio/OpenMontage --skill lottie-bodymovin --agent claude-code
# Cursor
npx -y skills add calesthio/OpenMontage --skill lottie-bodymovin --agent cursor
# Codex
npx -y skills add calesthio/OpenMontage --skill lottie-bodymovin --agent codex
# Gemini CLI
npx -y skills add calesthio/OpenMontage --skill lottie-bodymovin --agent gemini
# Windsurf
npx -y skills add calesthio/OpenMontage --skill lottie-bodymovin --agent windsurf
# Cline
npx -y skills add calesthio/OpenMontage --skill lottie-bodymovin --agent cline
```

## Qué hace

- Traduce los 12 principios de animación de Disney a animaciones Lottie exportadas desde After Effects
- Cubre squash y stretch, anticipación, puesta en escena, arcos, timing, exageración y appeal
- Explica cómo implementarlo en Lottie y qué funciones clave del formato usar

## Cuándo usarla

- Implementar los 12 principios de animación de Disney con animaciones Lottie exportadas de After Effects

## Qué la activa

- "Mejora esta animación Lottie con anticipación y follow through"
- "¿Cómo aplico los principios de Disney en Lottie?"
- "Dale más peso a este movimiento exportado de After Effects"

## Antes de instalar

- Parte de animaciones Lottie exportadas desde After Effects con Bodymovin.

## Archivos

- SKILL.md — 4 KB

## SKILL.md

Reproducido tal cual desde calesthio/OpenMontage bajo AGPL-3.0. Esta sección es el documento original y está en inglés.

# Lottie Animation Principles

Implement all 12 Disney animation principles using Lottie (Bodymovin) for vector animations.

## 1. Squash and Stretch

In After Effects before export:
- Animate Scale X and Y inversely
- Use expression: `s = transform.scale[1]; [100 + (100-s), s]`

```javascript
// Control at runtime
lottie.setSpeed(1.5); // affect squash timing
```

## 2. Anticipation

Structure your AE composition:
1. **Frames 0-10**: Wind-up pose
2. **Frames 10-40**: Main action
3. **Frames 40-50**: Settle

```javascript
// Play anticipation segment
anim.playSegments([0, 10], true);
setTimeout(() => anim.playSegments([10, 50], true), 200);
```

## 3. Staging

```javascript
// Layer multiple Lotties
<div className="scene">
  <Lottie animationData={background} style={{ opacity: 0.6 }} />
  <Lottie animationData={hero} style={{ zIndex: 10 }} />
</div>
```

## 4. Straight Ahead / Pose to Pose

Pose to pose in AE:
- Set keyframes at key poses
- Let AE interpolate between
- Use Easy Ease for smoothing

```javascript
// Jump to specific poses
anim.goToAndStop(25, true); // frame 25
```

## 5. Follow Through and Overlapping Action

In After Effects:
- Offset child layer keyframes by 2-4 frames
- Use parenting with delayed expressions
- `thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)`

## 6. Slow In and Slow Out

AE Keyframe settings:
- Select keyframes > Easy Ease (F9)
- Use Graph Editor to adjust curves
- Bezier handles control acceleration

```javascript
// Adjust playback speed dynamically
anim.setSpeed(0.5); // slower
anim.setSpeed(2); // faster
```

## 7. Arc

In After Effects:
- Use motion paths (position property)
- Convert keyframes to Bezier
- Pull handles to create arcs
- Or use "Auto-Orient to Path"

## 8. Secondary Action

```javascript
// Trigger secondary animation
mainAnim.addEventListener('complete', () => {
  secondaryAnim.play();
});

// Or sync with frame
mainAnim.addEventListener('enterFrame', (e) => {
  if (e.currentTime > 15) particleAnim.play();
});
```

## 9. Timing

```javascript
anim.setSpeed(0.5);  // half speed - dramatic
anim.setSpeed(1);    // normal
anim.setSpeed(2);    // double speed - snappy

// Or control frame rate in AE export
// 24fps = cinematic, 30fps = smooth, 60fps = fluid
```

## 10. Exaggeration

In After Effects:
- Push scale beyond 100% (120-150%)
- Overshoot rotation
- Use Overshoot expression
- `amp = 15; freq = 3; decay = 5; n = 0; time_start = key(1).time; if (time > time_start) { n = (time - time_start) / thisComp.frameDuration; amp * Math.sin(freq*n) / Math.exp(decay*n/100); } else { 0; }`

## 11. Solid Drawing

In After Effects:
- Use 3D layers
- Apply perspective camera
- Animate Z position and rotation
- Use depth of field

## 12. Appeal

Design principles in AE:
- Smooth curves over sharp angles
- Consistent timing patterns
- Pleasing color palette
- Clean vector shapes

```javascript
// React Lottie with hover
<Lottie
  animationData={data}
  onMouseEnter={() => anim.setDirection(1)}
  onMouseLeave={() => anim.setDirection(-1)}
/>
```

## Lottie Implementation

```javascript
import Lottie from 'lottie-react';
import animationData from './animation.json';

<Lottie
  animationData={animationData}
  loop={true}
  autoplay={true}
  style={{ width: 200, height: 200 }}
/>
```

## Key Lottie Features

- `playSegments([start, end])` - Play frame range
- `setSpeed(n)` - Control timing
- `setDirection(1/-1)` - Forward/reverse
- `goToAndStop(frame)` - Pose control
- `addEventListener` - Frame events
- Interactivity via `lottie-interactivity`

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [calesthio](https://skillsagentes.com/creators/calesthio.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Seedance 2 5](https://skillsagentes.com/skills/calesthio/openmontage/seedance-2-5.md): Genera vídeo cinematográfico de 4-30 s con ByteDance Seedance 2.5 por fal.ai, Volcengine Ark, Runway o ComfyUI. Cubre el contrato de prompt 2.5, cortes duros, locks de continuidad y voz.
- [Comfyui](https://skillsagentes.com/skills/calesthio/openmontage/comfyui.md): Úsalo al trabajar con workflows de ComfyUI en OpenMontage: comfyui_image/video/music, workflows propios, selección de output_node, modelos que faltan, LoRAs, poca VRAM e importación de workflows de la comunidad.
- [Fish Audio Tts](https://skillsagentes.com/skills/calesthio/openmontage/fish-audio-tts.md): Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id.
- [Minimax H3](https://skillsagentes.com/skills/calesthio/openmontage/minimax-h3.md): Genera vídeo con MiniMax H3 (Hailuo 3.0) por la API oficial v2, fal.ai, Runway, nodos partner de ComfyUI o pesos abiertos locales. Clips de 4-15s a 2K con animación de primer/último fotograma.
- [Gemini Omni](https://skillsagentes.com/skills/calesthio/openmontage/gemini-omni.md): Genera y edita conversacionalmente vídeos cortos con Google Gemini Omni Flash: itera con ediciones en lenguaje natural, clips de 3-10s a 720p con audio y texto en pantalla, e imágenes de referencia por etiquetas.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)