# optimo-animator

> Animator

Latest version **1.2.11** (published 2026-02-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install optimo-animator
pnpm add optimo-animator
yarn add optimo-animator
bun add optimo-animator
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.2.11 |
| Published | 2026-02-17 |
| First published | 2022-05-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | pietro.alberti |

## Links

- npm: https://www.npmjs.com/package/optimo-animator
- npm.io page: https://npm.io/package/optimo-animator

## Recent versions

- 1.2.11 (latest) — 2026-02-17
- 1.2.10 — 2026-02-12
- 1.2.9 — 2024-10-16
- 1.2.8 — 2024-10-16
- 1.2.7 — 2024-08-08
- 1.2.6 — 2024-08-08
- 1.2.5 — 2024-08-06
- 1.2.4 — 2024-08-06
- 1.2.3 — 2024-07-11
- 1.2.2 — 2022-05-19
- 1.2.1 — 2022-05-19
- 1.2.0 — 2022-05-19
- 1.1.6 — 2022-05-19
- 1.1.5 — 2022-05-12
- 1.1.4 — 2022-05-12
- … 6 more at https://npm.io/package/optimo-animator/versions

## README

# Optimo Animator

Optimo animator is a lightweight Javascript animation library. The main goal of this project is to provide a set of classes to implement temporal animations in the browser. This library tries to be as low-level as possible in the sense that it provides the bare minimum to animate any kind of objects.

## Animator class

The `Animator` class is responsible for running the animation loop and tracking time. The `Animator` class takes an array of `Timelines` as arguments for the constructor. In general, a project only needs one instance of `Animator` that can handle multiple `Timelines`.

```ts
const timeline = new Timeline([
  {
    duration: 3000,
    handler: (progress) => {
      // Do something here
    },
  },
]);

const animator = new Animator([timeline]);
animator.start();
```

The animator can be `started` and `stopped` as below:

```ts
const animator = new Animator([]);

animator.start();
animator.stop();
```

Additionally it can be used to evaluate a specific frame with `computeFrameAt`:

```ts
const animator = new Animator([]);

const time = 14325; // Milliseconds
animator.computeFrameAt(time);
```

## Timeline class

The `Timeline` class is responsible for managing the steps. A timeline is basically a set of instructions that the animation should perform sequentially. The `Timeline` class takes an array of `Steps` as arguments for the constructor.

```ts
const circle = document.querySelector('.circle') as HTMLDivElement;

let sizeX = 100;
let sizeY = 100;

const sizeTimeline = new Timeline([
  {
    duration: 3000,
    onStart: () => {
      sizeX = 100;
      sizeY = 100;
      circle.style.width = `${sizeX}px`;
      circle.style.height = `${sizeY}px`;
    },
    handler: (progress) => {
      sizeX = 100 + progress * 300;
      circle.style.width = `${sizeX}px`;
    },
  },
  {
    duration: 4000,
    handler: (progress) => {
      sizeY = 100 + progress * 300;
      circle.style.height = `${sizeY}px`;
    },
  },
  {
    duration: 2000,
    handler: (progress) => {
      sizeX = 400 - progress * 300;
      sizeY = 400 - progress * 300;
      circle.style.width = `${sizeX}px`;
      circle.style.height = `${sizeY}px`;
    },
  },
]);
```

## Step class

The `Step` class encapsulates the logic to be evaluated during an animation step. A step has a `duration` and a `handler` method which receives the current progress (number from 0 to 1) used to retrieve the stage the step is in. Each step is evaluated after the other and the `handler` method is evaluated for the duration of the step.

Additional methods can be defined in a step such as `onStart` and `onEnd`. `onStart` is executed each time the step is evaluated for the first time in a loop and `onEnd` when the step is evaluated for the last time in a loop.

```ts
{
  duration: 4000,
  onStart: () => {
    // Do something when the step is evaluated for the first time in the loop
  },
  onEnd: () => {
    // Do something when the step is evaluated for the last time in the loop
  },
  handler: (progress) => {
    // Do something during the whole step duration
    // `progress` goes from 0 to 1.
  },
},
```

---
_Source: https://npm.io/package/optimo-animator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._