Chapter 236: EaselPlugin

Core Idea

Tweens EaselJS-specific color/filter properties (tint, saturation, hue, contrast, colorize, brightness, exposure) and MovieClip.frame, which plain numeric tweening can't handle because they map to EaselJS's ColorFilter/ColorMatrixFilter internals.

Key Concepts

• Wrap the special properties in an easel: {} object; ordinary numeric EaselJS properties (x, y, scaleX, etc.) don't need the plugin at all.
• Extra convenience properties GSAP exposes beyond EaselJS's own API: tint, tintAmount, exposure, brightness (ColorFilter); saturation, hue, contrast, colorize, colorizeAmount (ColorMatrixFilter).
• You must manually call stage.update() on GSAP's ticker since EaselJS doesn't auto-render.

Code Examples

gsap.registerPlugin(EaselPlugin);
gsap.ticker.add(() => stage.update());

gsap.to(circle, { duration: 2, scaleX: 0.5, scaleY: 0.5, easel: { tint: 0x00ff00 } });

Connects To

• PixiPlugin: the equivalent special-properties plugin for the Pixi.js rendering library.