Advanced Playgrounds
Playground section
Timelines & Syncing
Live controls
Interactive example
Timeline: Add & Sync Animations
Live controls
Add animations
TIMELINE.SYNC(ANIMATION) FOR PRE-EXISTING ANIMATIONS.
TIMELINE.ADD(TARGETS, PARAMS) FOR DIRECT SEGMENT CREATION.
PYRAMID STRUCTURE COMPOSITION WITH SEQUENCED MOVEMENT.
Interactive example
Advanced Timeline Features
Live controls
Advanced timeline features
Animation 1 (pos: 0)
Animation 2 (pos: "<")
Animation 3 (pos: "+=")
Last Event:
None
Progress:
0%
• Uses position for relative timing (<, >, +=).
• Demonstrates callback (function calls) within the timeline.
• Shows timer entries (pauses/delays) without targets.
• Uses labels for marking positions.
Interactive example
Timeline: Add & Sync Timers
Live controls
Add timers
timer 01
0000
timer 02
0000
timer 03
0000
• Synchronises animations, timers, and callbacks together.
• Visualizing individual segments within the global timeline progress.
Interactive example
Timeline: Sync Timelines
Live controls
Sync timelines
Timelines can be synchronised to another timeline using the sync() method.
Complex nesting and relative positioning control.
Interactive example
Timeline: Sync WAAPI Animations
Live controls
Sync WAAPI animations
WAAPI animations can be synchronised to a timeline using the sync() method.
Demonstrating precise overlapping timing control.