Options

Options control how an animation behaves: its duration, easing, playback behavior, and more.
All options can be passed to to(), from(), fromTo(), set(), or timeline().

Example

This example shows how to combine easing, repeat, and alternation in a single tween.

animatry.to('.box', {
  x: 300,
  scale: 0.5,
  ease: 'backInOut',
  repeat: -1,
  alternate: true,
  duration: 1.5,
})

Timing & Playback

duration

How long the animation runs (in seconds).

delay

Wait time before the animation starts.

repeat

Number of times to repeat. <code>-1</code> means infinite.

iterationDelay

Delay between repeats.

alternate

If true, the animation reverses direction on every repeat.

backwards

Reverses easing direction and behavior (not the same as .reverse()).

timeScale

Speeds up or slows down the animation. Default is 1.

Easing

ease

Easing function name or custom function.

reverseEase

Easing when playing in reverse.

alternateEase

Easing used when alternating forward.

reverseAlternateEase

Easing used when alternating backwards.

Keyframes & Stagger

keyframes

Defines step-based animation using array, object or percentage format.

stagger

Applies delay offsets between multiple elements. Can be a number or object.

Pre-Render

preRender

If true, reads all current DOM values before the animation begins.

Events

onStart

When animation begins.

onUpdate

Every frame, during progress.

onComplete

When the animation finishes.

onRepeat

When a repeat iteration starts.

onReverseStart

When reverse playback begins.

onReverseComplete

When reverse playback ends.