Animation/Timeline Update

The overview line in the cables.gl timeline is a compact preview of your entire animation. It shows all keyframes across time, letting you zoom in or out and navigate quickly through the full timeline. You can drag the view to reposition the visible area and always see where the green playhead is within the animation’s overall duration.

you can drag keyframes to adjust their timing or value directly. Click a key to select it, then drag it left or right to change its position in time. You can also select multiple keys and move them together using the yellow drag area that appears below the tracks. Dragging the edge handle of this yellow area stretches or compresses the selected keys, changing the animation’s duration without altering their relative timing.

The Loop Area  lets you repeatedly play a selected part of your animation. It helps you focus on and refine short sequences, for example, syncing motion to music or perfecting a transition, without replaying the entire animation. You can move or resize the loop area, and remove it with the X icon.

They define how an animation behaves after its last keyframe. By default, Loop Mode it it's Off, meaning the animation holds the final keyframe’s value indefinitely. Repeat makes the animation play continuously from the first to the last key. Mirror mode repeats the animation in reverse each time, creating a seamless back-and-forth motion. Offset mode repeats the animation but adds the end value of each loop as the starting point for the next—useful for progressive, endlessly increasing motions like scrolling or growing effects.

Interpolation methods control how values change between keyframes in the timeline. Linear interpolation creates straight, even transitions. Absolute/Step holds each value until the next keyframe, ideal for toggles or scene switches. Preset Curves provide common easing types like ease-in or ease-out for quick, natural motion. Bezier Curves give full manual control with adjustable tangents for fine-tuning curves. Finally, Clip interpolation lets a keyframe trigger a stored animation clip, blending reusable motion into your timeline.

Synchronize animations to music or rhythm. When you add the Timeline BPM operator, it draws visual beat markers directly in the timeline. Each small rectangle represents a beat, with every fourth beat highlighted to indicate the start of a new bar. Adjusting the BPM value updates the spacing of these markers

Clips let you save and reuse animations across multiple parameters or operators. When you enable the Clip option in an Anim operator and give it a name, that animation becomes a reusable clip stored in your project. You can then apply this clip to any keyframe in another animation track, allowing updates to the original clip to automatically propagate everywhere it’s used—perfect for creating consistent, repeatable motion patterns.