Controller

The Controller class is the foundation of all Animatry animations. Both Tween and Timeline extend from it.
It handles animation progress, repetition, alternation, delay, and lifecycle events.

Basic Lifecycle

A Controller manages animation state over time. The most common methods include .play(), .pause(), .reverse(), and .seek().

const controller = animatry.to('.box', {
  x: 300,
  duration: 1,
  paused: true,
});

controller.play(); // start the animation
controller.pause(); // pause it
controller.seek(0.5); // jump to 50%
controller.reverse(); // play it backward

Progress Control

You can precisely control how far an animation has progressed. There are multiple levels of progress tracking:

• .progress() – progress of the current iteration (0 to 1)
• .totalProgress() – progress of the full animation including repeats
• .elapsed() – time passed in seconds

controller.progress(0.25); // jump to 25% of one iteration
controller.totalProgress(0.75); // jump to 75% including repeats
controller.elapsed(0.5); // jump to 0.5s into the animation

Repeats, Alternation, and Delay

Animations can repeat, alternate direction, and include delays between repeats.

animatry.to('.box', {
  x: 300,
  repeat: 2,
  alternate: true,
  delay: 0.5,
  iterationDelay: 0.2,
});

Callbacks

Controllers support event hooks to execute logic at key points in the animation lifecycle.

controller
  .onStart(() => console.log('started'))
  .onComplete(() => console.log('completed'))
  .onReverseStart(() => console.log('reversed'))
  .onReverseComplete(() => console.log('reverse completed'))
  .onRepeat(() => console.log('repeating'))
  .onUpdate(() => console.log('updated'));

Configuration API