GSAPPlugin

Defined in: plugins/GSAPPlugin.ts:312

High-performance GSAP animation plugin for PIXI.js applications.

Integrates the GreenSock Animation Platform (GSAP) into the application framework, providing powerful and flexible animation capabilities with optimized PIXI.js integration. Features custom animation context management for grouped animation control, custom easing registration, and automatic PIXI.js property animation support.

Key Features:

• Full GSAP integration with PIXI.js optimization
• Custom animation contexts for grouped control (pause/play/kill by category)
• Custom easing function registration and management
• Automatic PIXI filter integration (BlurFilter, ColorMatrixFilter)
• Memory-efficient animation tracking and cleanup
• Global and context-specific animation management

Important: Animation “contexts” in this plugin are custom collections (Sets) for grouping animations and are NOT the same as gsap.Context objects provided by GSAP itself.

Example

// Basic setup and usage
const gsapPlugin = app.plugins.get<IGSAPPlugin>('GSAPPlugin');

// Create optimized PIXI animations
const sprite = new PIXI.Sprite(texture);
gsapPlugin.anim.to(sprite, {
  x: 100,
  y: 50,
  alpha: 0.8,
  duration: 1,
  ease: 'back.out(1.7)'
});

// Register custom eases for game feel
gsapPlugin.registerCustomEase('gameJuice', (t) => {
  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
});

// Context-based animation management
const menuTween = gsapPlugin.anim.to(menuButton, { scale: 1.1, duration: 0.3 });
gsapPlugin.addAnimation(menuTween, 'menuAnimations');

// Later: pause all menu animations when game starts
gsapPlugin.pauseAll('menuAnimations');

// Animate PIXI filters
const blurFilter = new PIXI.BlurFilter();
sprite.filters = [blurFilter];
gsapPlugin.anim.to(blurFilter, { blur: 10, duration: 2 });

Remarks

• Automatically registers PixiPlugin for optimized PIXI.js property animations
• Includes ColorMatrixFilter and BlurFilter integration for advanced effects
• Uses efficient Set-based tracking for O(1) animation context operations
• Provides both global and context-specific animation lifecycle management
• Custom eases are automatically registered with GSAP and stored for reference

Extends

• Plugin

Implements

• IGSAPPlugin

Constructors

Constructor

new GSAPPlugin(id): GSAPPlugin

Defined in: plugins/Plugin.ts:48

Parameters

id

string = 'Plugin'

Returns

GSAPPlugin

Inherited from

Plugin.constructor

Properties

__dill_pixel_method_binding_root

__dill_pixel_method_binding_root: boolean

Defined in: plugins/Plugin.ts:39

Inherited from

Plugin.__dill_pixel_method_binding_root

---

id

readonly id: "GSAPPlugin" = 'GSAPPlugin'

Defined in: plugins/GSAPPlugin.ts:317

Plugin identifier for framework registration

Implementation of

IGSAPPlugin.id

Overrides

Plugin.id

Accessors

anim

Get Signature

get anim(): typeof gsap

Defined in: plugins/GSAPPlugin.ts:450

Gets the GSAP instance for creating animations. Provides access to the full GSAP API with PIXI.js optimizations enabled.

Returns

typeof gsap

The GSAP instance for creating animations.

Implementation of

IGSAPPlugin.anim

---

app

Get Signature

get app(): A

Defined in: plugins/Plugin.ts:53

Returns

A

Implementation of

IGSAPPlugin.app

Inherited from

Plugin.app

---

easeNames

Get Signature

get easeNames(): string[]

Defined in: plugins/GSAPPlugin.ts:329

Array of all registered custom ease names.

Returns

string[]

Array of all registered custom ease names.

Implementation of

IGSAPPlugin.easeNames

---

eases

Get Signature

get eases(): Ease

Defined in: plugins/GSAPPlugin.ts:337

Object containing all registered custom eases.

Returns

Ease

Object containing all registered custom eases, where keys are ease names and values are GSAP ease functions.

Implementation of

IGSAPPlugin.eases

---

options

Get Signature

get options(): O

Defined in: plugins/Plugin.ts:44

Returns

O

Implementation of

IGSAPPlugin.options

Inherited from

Plugin.options

Methods

addAnimation()

addAnimation(animation, contextId): Timeline | Tween | (Timeline | Tween)[]

Defined in: plugins/GSAPPlugin.ts:477

Adds animation(s) to a specified context for grouped management. Creates the context if it doesn’t exist. Defaults to global context if no contextId provided.

Parameters

animation

Single animation or array of animations to track

Timeline | Tween | (Timeline | Tween)[]

contextId

string = GSAPPlugin.GLOBAL_CONTEXT_ID

Context identifier (defaults to global context)

Returns

Timeline | Tween | (Timeline | Tween)[]

The same animation(s) passed in for chaining

Example

// Add to specific context for scene management
const levelTweens = [
  gsap.to(player, { x: 100, duration: 2 }),
  gsap.to(enemy, { rotation: Math.PI, duration: 1.5 }),
  gsap.to(powerup, { scale: 1.2, yoyo: true, repeat: -1, duration: 0.8 })
];
gsapPlugin.addAnimation(levelTweens, 'level1Gameplay');

// Add to global context (default)
const bgTween = gsap.to(background, { alpha: 0.8, duration: 3 });
gsapPlugin.addAnimation(bgTween);

Implementation of

IGSAPPlugin.addAnimation

---

addSignalConnection()

addSignalConnection(…args): void

Defined in: plugins/Plugin.ts:79

Add signal connections to the container.

Parameters

args

…SignalConnection[]

The signal connections to add.

Returns

void

Implementation of

IGSAPPlugin.addSignalConnection

Inherited from

Plugin.addSignalConnection

---

clear()

clear(contextId, kill): void

Defined in: plugins/GSAPPlugin.ts:662

Clears (removes) a specific animation context from tracking. Optionally kills the animations before clearing the context.

Parameters

contextId

string

The context identifier to clear

kill

boolean = false

Whether to kill animations before clearing (default: false)

Returns

void

Example

// Clear completed level context
gsapPlugin.clear('level1Animations');

// Clear and kill animations simultaneously
gsapPlugin.clear('temporaryEffects', true);

Implementation of

IGSAPPlugin.clear

---

clearAll()

clearAll(kill): void

Defined in: plugins/GSAPPlugin.ts:684

Clears all animation contexts and recreates the global context. Optionally kills all animations before clearing contexts.

Parameters

kill

boolean = false

Whether to kill all animations before clearing (default: false)

Returns

void

Example

// Complete reset for new game
gsapPlugin.clearAll(true);

// Clear tracking without killing animations
gsapPlugin.clearAll(false);

Implementation of

IGSAPPlugin.clearAll

---

clearGlobal()

clearGlobal(kill): void

Defined in: plugins/GSAPPlugin.ts:750

Clears all animations from the global animation context. Optionally kills the animations before clearing from tracking.

Parameters

kill

boolean = false

Whether to kill animations before clearing (default: false)

Returns

void

Example

// Clear global context without killing
gsapPlugin.clearGlobal();

// Clear and kill global animations
gsapPlugin.clearGlobal(true);

Implementation of

IGSAPPlugin.clearGlobal

---

clearSignalConnections()

clearSignalConnections(): void

Defined in: plugins/Plugin.ts:85

Returns

void

Implementation of

IGSAPPlugin.clearSignalConnections

Inherited from

Plugin.clearSignalConnections

---

destroy()

destroy(): void

Defined in: plugins/Plugin.ts:57

Returns

void

Implementation of

IGSAPPlugin.destroy

Inherited from

Plugin.destroy

---

getContext()

getContext(contextId): null | AnimationContext

Defined in: plugins/GSAPPlugin.ts:516

Retrieves a custom animation context by its identifier. Returns null if the context doesn’t exist.

Parameters

contextId

string

The context identifier to look up

Returns

null | AnimationContext

The animation context Set or null if not found

Example

// Check if context exists and get info
const gameplayContext = gsapPlugin.getContext('gameplayAnimations');
if (gameplayContext) {
  console.log(`Found ${gameplayContext.size} gameplay animations`);

  // Iterate through animations if needed
  gameplayContext.forEach(animation => {
    console.log('Animation progress:', animation.progress());
  });
}

Implementation of

IGSAPPlugin.getContext

---

initialize()

initialize(_, app): Promise<void>

Defined in: plugins/GSAPPlugin.ts:362

Initializes the GSAP plugin with PIXI.js integration and custom configurations. Sets up PixiPlugin, registers custom eases, and creates the global animation context.

Parameters

_

any

Plugin options (currently unused, relies on app.config.gsap)

app

IApplication

The application instance providing configuration

Returns

Promise<void>

Example

// Plugin is automatically initialized by the framework
// Configuration comes from app.config.gsap
const config = {
  gsap: {
    eases: {
      'customBounce': (t) => t * t * (3 - 2 * t),
      'gameEase': (t) => Math.pow(t, 2.5)
    }
  }
};

Implementation of

IGSAPPlugin.initialize

Overrides

Plugin.initialize

---

killAll()

killAll(contextId?): void

Defined in: plugins/GSAPPlugin.ts:603

Kills (stops and removes) all animations in the specified context or all contexts. Killed animations cannot be resumed and are removed from tracking. If killing all contexts, the global context is automatically recreated.

Parameters

contextId?

string

Optional context identifier. If omitted, kills all animations in all contexts

Returns

void

Example

// Kill animations when transitioning scenes
gsapPlugin.killAll('currentSceneAnimations');

// Emergency stop all animations
gsapPlugin.killAll();

// Clean up specific context before recreation
gsapPlugin.killAll('temporaryEffects');

Implementation of

IGSAPPlugin.killAll

---

killGlobal()

killGlobal(): void

Defined in: plugins/GSAPPlugin.ts:706

Kills all animations within the global animation context only. This affects only animations added to the global context, not other custom contexts.

Returns

void

Example

// Kill only global animations, preserve context-specific ones
gsapPlugin.killGlobal();

// Useful for clearing background animations while keeping UI animations
gsapPlugin.killGlobal();
gsapPlugin.playAll('uiAnimations'); // UI animations continue

Implementation of

IGSAPPlugin.killGlobal

---

pauseAll()

pauseAll(contextId?): void

Defined in: plugins/GSAPPlugin.ts:576

Pauses all animations in the specified context or all contexts. Animations retain their current progress and can be resumed with playAll().

Parameters

contextId?

string

Optional context identifier. If omitted, pauses all animations in all contexts

Returns

void

Example

// Pause game animations when menu opens
gsapPlugin.pauseAll('gameplayAnimations');

// Pause everything when app loses focus
window.addEventListener('blur', () => {
  gsapPlugin.pauseAll();
});

// Conditional pausing
if (gameState === 'paused') {
  gsapPlugin.pauseAll('gameplayAnimations');
}

Implementation of

IGSAPPlugin.pauseAll

---

playAll()

playAll(contextId?): void

Defined in: plugins/GSAPPlugin.ts:540

Plays all animations in the specified context or all contexts. Useful for resuming paused animations or ensuring all animations are active.

Parameters

contextId?

string

Optional context identifier. If omitted, plays all animations in all contexts

Returns

void

Example

// Resume specific context after pause
gsapPlugin.playAll('menuAnimations');

// Resume all animations (e.g., after app regains focus)
gsapPlugin.playAll();

// Conditional playback
if (gameState === 'playing') {
  gsapPlugin.playAll('gameplayAnimations');
}

Implementation of

IGSAPPlugin.playAll

---

postInitialize()

postInitialize(_app): void | Promise<void>

Defined in: plugins/Plugin.ts:68

Parameters

_app

IApplication

Returns

void | Promise<void>

Implementation of

IGSAPPlugin.postInitialize

Inherited from

Plugin.postInitialize

---

registerCustomEase()

registerCustomEase(name, ease): Ease

Defined in: plugins/GSAPPlugin.ts:410

Registers a single custom ease function with GSAP. The ease becomes available for use in all GSAP animations by name.

Parameters

name

string

Unique name identifier for the ease

ease

EaseFunction

GSAP-compatible easing function (takes progress 0-1, returns eased value)

Returns

Ease

Object containing the registered ease for chaining or reference

Example

// Register a custom elastic ease
gsapPlugin.registerCustomEase('elasticOut', (t) => {
  const c4 = (2 * Math.PI) / 3;
  return t === 0 ? 0 : t === 1 ? 1 :
    Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
});

// Use in animations
gsap.to(mySprite, { x: 100, duration: 1, ease: 'elasticOut' });

Implementation of

IGSAPPlugin.registerCustomEase

---

registerEases()

registerEases(eases): Ease

Defined in: plugins/GSAPPlugin.ts:438

Registers multiple custom ease functions with GSAP in a single operation. Efficient batch registration for multiple custom eases.

Parameters

eases

Ease

Object mapping ease names to ease functions

Returns

Ease

The complete map of all registered eases

Example

// Register a suite of game-specific eases
gsapPlugin.registerEases({
  'jumpEase': (t) => t * t * (3 - 2 * t),
  'impactEase': (t) => 1 - Math.cos(t * Math.PI / 2),
  'floatEase': (t) => Math.sin(t * Math.PI / 2),
  'snapEase': (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2
});

Implementation of

IGSAPPlugin.registerEases

---

revertAll()

revertAll(contextId?): void

Defined in: plugins/GSAPPlugin.ts:638

Reverts all animations in the specified context or all contexts to their initial state. Animation targets return to their original property values before the animation started.

Parameters

contextId?

string

Optional context identifier. If omitted, reverts all animations in all contexts

Returns

void

Example

// Reset UI to initial state
gsapPlugin.revertAll('uiAnimations');

// Reset everything for game restart
gsapPlugin.revertAll();

// Reset temporary effects
gsapPlugin.revertAll('screenEffects');

Implementation of

IGSAPPlugin.revertAll

---

revertGlobal()

revertGlobal(): void

Defined in: plugins/GSAPPlugin.ts:728

Reverts all animations within the global animation context to their initial state. Only affects animations in the global context, not custom contexts.

Returns

void

Example

// Reset only global animations
gsapPlugin.revertGlobal();

// Reset global animations while preserving context states
gsapPlugin.revertGlobal();
// Context-specific animations remain unchanged

Implementation of

IGSAPPlugin.revertGlobal