Coordinating multiple animations is a core feature of Anime.js timelines. When you want to synchronize several elements—such as animating boxes so that one moves, another follows, and then some animate together—you use a timeline to define the sequence and overlap of each animation. Start by creating a timeline with anime.timeline(), where you can set default options like easing and duration that apply to all steps unless overridden.

To add animations, use the .add() method for each step. The targets property selects which element to animate, and you can specify properties like translateX, translateY, scale, rotate, and backgroundColor. By default, each .add() step runs after the previous one finishes, creating a sequence. If you want animations to run in parallel or with overlap, provide an offset as the second argument to .add(). For example, using '-=400' starts the new animation 400 milliseconds before the previous animation ends, so both run together for a period.

This approach allows you to build complex, coordinated animation sequences—such as having one box move, then another, and then both animate together. Timelines make it easy to manage the timing, overlap, and orchestration of multiple animated elements, giving you fine control over the flow of your animation.