Chapter 5: EndArray (Core Plugin)

Core Idea

The internal EndArray plugin lets you tween an array of numeric values toward a different array of numeric values, with normal easing applied — automatically included, no registration needed.

Key Concepts

• endArray: []: the target array of numeric values.
• Uneven-length arrays: only indexes present in both the source and target array get animated; extra indexes are ignored.

Code Examples

const arr = [1, 2, 3];

gsap.to(arr, {
  endArray: [5, 6, 7],
  onUpdate() {
    console.log(arr);
  },
});

• What it demonstrates: tweening every element of a plain numeric array toward new values, reading the live interpolated array inside onUpdate.

Key Takeaways

1. Works directly on plain JS arrays of numbers, not just DOM/object properties.
2. Mismatched array lengths silently animate only the overlapping indexes rather than erroring.

Connects To

• gsap.to(): the general-purpose tween creator this plugin's endArray property is used with.