Animation Target

This node provides animation targeting capabilities for Pixi objects, allowing coordinated animations across multiple elements.

The Animation Target enables coordinated animations across multiple UI elements.

The Animation Target node provides animation targeting capabilities for UI elements and Pixi objects. It allows you to create coordinated animations across multiple elements, synchronize animation timing, and create complex animation sequences.

Inputs

Target

Data	Description
Target Node	The node to animate
Property	Property to animate
Value	Target value for animation

Animation

Data	Description
Duration	Animation duration in seconds
Easing	Easing function type
Delay	Delay before animation starts

Targets

Data	Description
Target 1..5	Additional targets to animate (up to 5)

Configuration

Data	Description
Enable Custom JSON	Use GSAP Vars JSON for full control (default: false)
Enable Target-Based Animations	Per-target configs (default: false)
GSAP Strict Config Enabled	Enforce GSAP Config Source (default: false)
GSAP Config Source	'properties'
GSAP Auto Start	Auto-start active mode (default: true)

Advanced JSON

Data	Description
GSAP Vars	Stringified JSON of full GSAP vars for all targets

Properties (properties mode)

Data	Description
GSAP Duration	Seconds (default: 2)
GSAP Delay	Seconds (default: 0)
GSAP Repeat	-1 for infinite (default: -1)
GSAP Yoyo	Ping-pong (default: true)
GSAP Ease	e.g., 'power1.inOut'
Target X/Y/ScaleX/ScaleY/Rotation/Alpha/SkewX/SkewY	Destination values

Control Signals

Signal	Description
GSAP Play	Play main tween/timeline
GSAP Pause	Pause
GSAP Resume	Resume
GSAP Restart	Restart
GSAP Reverse	Reverse
GSAP Stop	Kill main tween
GSAP Stop All	Kill all tweens
GSAP Toggle Play	Toggle play/pause
GSAP Auto Start Now	Start immediately based on mode

Timeline (optional)

Data	Description
GSAP Use Timeline	Use timeline instead of single tween
GSAP Timeline Steps	Stringified JSON array of steps

Path (optional)

Data	Description
GSAP Path Enabled	Enable motion path
GSAP Path Points	Stringified JSON points
GSAP Path Type	'linear'
GSAP Path Align	'self'
GSAP Path Auto Rotate	Auto rotate along path
GSAP Path Align Origin	Array [x, y] (default [0.5, 0.5])

Advanced Easing

Data	Description
GSAP Advanced Ease	'none'
GSAP Custom Ease	Curve object {curve:[x1,y1,x2,y2], dur, delay}

Performance

Data	Description
GSAP Overwrite	'auto'
GSAP Lazy	Lazy render (default: false)
GSAP Time Scale	Global timeScale (default: 1)
GSAP Progress	Set progress when main tween exists

Outputs

Signal	Description
Animation Complete	Signal when animation finishes
On Start	Legacy start event
On Complete	Legacy complete event
On Update	Legacy update event

Data	Description
Current Value	Current animated value
Node Reference	Node reference
GSAP Progress	0..1 progress
GSAP Time	Current time
GSAP Duration	Duration
GSAP Paused	Paused state
GSAP Reversed	Reversed state
GSAP Active	Active state
GSAP Repeat Count	Repeat counter
GSAP Yoyo Count	Yoyo counter
Animation Error	Error message if any
Animation Warning	Warning message if any
Frame Rate	Current frame rate
Update Count	Number of updates
Average Frame Time	Average ms per frame

Usage

Animation Target nodes are used to create coordinated animations across multiple UI elements and Pixi objects. They provide:

• Property-based animation targeting
• Coordinated animation timing
• Easing function support
• Animation completion tracking
• Complex animation sequences

Supported Properties

Common properties that can be animated:

• Position: X, Y coordinates
• Scale: Scale X, Scale Y
• Rotation: Rotation in radians
• Alpha: Transparency (0-1)
• Color: Tint colors
• Size: Width, Height
• Custom: Any numeric property

Easing Functions

Available easing functions:

• Linear: Constant speed
• Ease In: Slow start, fast end
• Ease Out: Fast start, slow end
• Ease In Out: Slow start and end
• Bounce: Bouncing effect
• Elastic: Elastic effect

Performance Tips

• Use appropriate Duration values for smooth animations
• Consider Delay for staggered animations
• Monitor Animation Complete for chaining animations
• Use easing functions for natural motion
• Limit concurrent animations for performance

Example Use Cases

1. UI Transitions: Smooth page transitions and element animations
2. Game Animations: Character movements and object interactions
3. Loading States: Progress indicators and loading animations
4. Interactive Feedback: Button clicks and hover effects