Gsap

# GSAP Advanced Patterns

## Complex Timeline Orchestration

### Master Timeline with Labels

```typescript
export function createMasterTimeline(): gsap.core.Timeline {
  const master = gsap.timeline({ paused: true })

  master
    .add('intro')
    .add(createIntroSequence(), 'intro')
    .add('main', '+=0.5')
    .add(createMainSequence(), 'main')
    .add('outro', '+=1')
    .add(createOutroSequence(), 'outro')

  return master
}

// Jump to specific point
master.play('main')
master.tweenTo('outro', { duration: 0.5 })
```

## Custom Easing

### JARVIS-Style Easing

```typescript
// Register custom ease
gsap.registerEase('jarvisSnap', function(progress: number) {
  // Quick start, snappy finish
  return progress < 0.5
    ? 4 * progress * progress * progress
    : 1 - Math.pow(-2 * progress + 2, 3) / 2
})

// Usage
gsap.to(element, {
  x: 100,
  ease: 'jarvisSnap'
})
```

## Physics-Based Animation

### Spring Animation

```typescript
export function springTo(
  element: HTMLElement,
  props: gsap.TweenVars,
  config: { stiffness?: number; damping?: number } = {}
) {
  const { stiffness = 100, damping = 10 } = config

  return gsap.to(element, {
    ...props,
    ease: `elastic.out(${stiffness / 100}, ${damping / 100})`,
    duration: Math.sqrt(1 / (stiffness / 1000))
  })
}
```

## Morphing Paths

```typescript
import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'

gsap.registerPlugin(MorphSVGPlugin)

// Morph between shapes
gsap.to('#shape1', {
  morphSVG: '#shape2',
  duration: 1,
  ease: 'power2.inOut'
})
```

## Flip Animation

```typescript
import { Flip } from 'gsap/Flip'

gsap.registerPlugin(Flip)

export function flipLayout(items: HTMLElement[], newParent: HTMLElement) {
  // Record current state
  const state = Flip.getState(items)

  // Move items to new parent
  items.forEach(item => newParent.appendChild(item))

  // Animate the change
  return Flip.from(state, {
    duration: 0.5,
    ease: 'power2.inOut',
    stagger: 0.05
  })
}
```

## Performance Optimization

### Batch Updates

```typescript
// Batch multiple property changes
gsap.set(elements, {
  x: i => i * 10,
  y: i => i * 5,
  rotation: i => i * 15,
  immediateRender: true
})

// Use quickSetter for frequent updates
const setX = gsap.quickSetter(element, 'x', 'px')
const setY = gsap.quickSetter(element, 'y', 'px')

// In animation loop
function update(mouseX: number, mouseY: number) {
  setX(mouseX)
  setY(mouseY)
}
```


---
name: gsap
description: GSAP animations for JARVIS HUD transitions and effects
model: sonnet
risk_level: LOW
version: 1.0.0
---

# GSAP Animation Skill

> **File Organization**: This skill uses split structure. See `references/` for advanced patterns.

## 1. Overview

This skill provides GSAP (GreenSock Animation Platform) expertise for creating smooth, professional animations in the JARVIS AI Assistant HUD.

**Risk Level**: LOW - Animation library with minimal security surface

**Primary Use Cases**:
- HUD panel entrance/exit animations
- Status indicator transitions
- Data visualization animations
- Scroll-triggered effects
- Complex timeline sequences

## 2. Core Responsibilities

### 2.1 Fundamental Principles

1. **TDD First**: Write animation tests before implementation
2. **Performance Aware**: Use transforms/opacity for GPU acceleration, avoid layout thrashing
3. **Cleanup Required**: Always kill animations on component unmount
4. **Timeline Organization**: Use timelines for complex sequences
5. **Easing Selection**: Choose appropriate easing for HUD feel
6. **Accessibility**: Respect reduced motion preferences
7. **Memory Management**: Avoid memory leaks with proper cleanup

## 2.5 Implementation Workflow (TDD)

### Step 1: Write Failing Test First

```typescript
// tests/animations/panel-animation.test.ts
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { gsap } from 'gsap'
import HUDPanel from '~/components/HUDPanel.vue'

describe('HUDPanel Animatio