# How to Use Relative Values and Operators in Anime.js Animations

> Master Anime.js relative values and timeline operators including += -= *= < << for dynamic animation sequencing and target offsets. Enhance your web animations effortlessly.

- Repository: [Julian Garnier/anime](https://github.com/juliangarnier/anime)
- Tags: how-to-guide
- Published: 2026-03-04

---

**Anime.js supports relative value operators (`+=`, `-=`, `*=`) and timeline position operators (`<`, `<<`) that enable you to define animation targets and sequencing offsets relative to current values, previous animations, or named labels.**

The `juliangarnier/anime` library provides a powerful expression system for creating dynamic animations without manual calculations. By leveraging string-based operators parsed during instantiation, you can create complex timelines and value transitions that adapt to runtime conditions.

## Understanding Relative Value Operators in Anime.js

Anime.js recognizes distinct operator sets for tween values and timeline positioning. These operators are detected by the `relativeValuesExecRgx` regular expression defined in [`src/core/consts.js`](https://github.com/juliangarnier/anime/blob/main/src/core/consts.js).

### Arithmetic Operators for Tween Values

When animating CSS properties or JavaScript object values, prefix the target value with an operator to indicate relative calculation:

- **`+=`** — Adds the operand to the current value (e.g., `'+=50'` moves 50 units from current position)
- **`-=`** — Subtracts the operand from the current value (e.g., `'-=0.2'` reduces opacity by 0.2)
- **`*=`** — Multiplies the current value by the operand (e.g., `'*=1.5'` scales to 150% of current size)

### Timeline Position Operators

For sequencing animations in a timeline, Anime.js provides reference operators that can be combined with arithmetic:

- **`<`** — Positions the animation at the end of the previous animation (insertion point)
- **`<<`** — Positions the animation at the start of the previous animation

These reference operators can be chained with arithmetic operators to create offsets like `'<+=200'` (200ms after previous ends) or `'<<-=100'` (100ms before previous starts).

## How Relative Value Parsing Works Internally

The parsing and computation of relative values occurs across three core files in the Anime.js source code, ensuring operators are resolved once during instantiation to eliminate runtime overhead.

### Operator Detection and Extraction

In [`src/core/consts.js`](https://github.com/juliangarnier/anime/blob/main/src/core/consts.js), the library exports a regular expression that identifies valid operator patterns:

```javascript
export const relativeValuesExecRgx = /(\*=|\+=|-=)/;

```

This regex is used by both the tween value parser and the timeline position parser to detect when a string requires relative calculation.

### Tween Value Decomposition

When you pass a string like `'+=100px'` to an animation, the `decomposeRawValue` function in [`src/core/values.js`](https://github.com/juliangarnier/anime/blob/main/src/core/values.js) handles the initial parsing by checking if the second character is `=`. It extracts the operator (`+`, `-`, or `*`) and the numeric operand, storing the operator for later application.

The actual arithmetic is performed by `getRelativeValue`:

```javascript
export const getRelativeValue = (x, y, operator) => {
  return operator === '+' ? x + y : 
         operator === '-' ? x - y : 
         x * y;
};

```

Here, `x` represents the base value (the element's current property value), `y` represents the operand from the string, and `operator` determines the arithmetic method.

### Timeline Position Resolution

For timeline offsets, `parseTimelinePosition` in [`src/timeline/position.js`](https://github.com/juliangarnier/anime/blob/main/src/timeline/position.js) orchestrates the logic:

1. Identifies if the position string contains a label (e.g., `'myLabel+=200'`)
2. Looks up the label's absolute time in the timeline's label map
3. Detects relative operators using `relativeValuesExecRgx`
4. Calls `getRelativeValue` to compute the final absolute offset

This system allows complex expressions like `'<<+=150'` (start of previous animation plus 150ms) to resolve to concrete millisecond values during timeline initialization.

## Practical Examples of Relative Values and Operators

### Relative Offsets in Timelines

Use relative operators to stagger animations without calculating absolute millisecond values:

```javascript
anime.timeline({ autoplay: false })
  .add({
    targets: '.box',
    translateX: 250,
    duration: 800,
    // Starts 200ms after the previous animation ends
    offset: '+=200'
  })
  .add({
    targets: '.box',
    rotate: 90,
    duration: 500,
    // Overlaps with previous animation by starting 100ms before it ends
    offset: '-=100'
  })
  .add({
    targets: '.box',
    scale: 1.5,
    // Starts at half the total timeline duration
    offset: '*=.5'
  })
  .add({
    targets: '.box',
    translateY: 120,
    // Starts at the beginning of the previous animation, then shifts 150ms
    offset: '<<+=150'
  });

```

Under the hood, each `offset` string is processed by `parseTimelinePosition` in [`src/timeline/position.js`](https://github.com/juliangarnier/anime/blob/main/src/timeline/position.js). The function extracts the previous animation's offset, applies `getRelativeValue` with the selected operator, and returns the absolute millisecond value.

### Relative Tween Values

Animate properties relative to their current computed values:

```javascript
anime({
  targets: '.circle',
  // Move 100px to the right from current position
  translateX: '+=100',
  // Reduce opacity by 0.2 from current value
  opacity: '-=0.2',
  // Scale to 150% of current size
  scale: '*=1.5',
  duration: 1200,
  easing: 'easeOutQuad'
});

```

During construction, `decomposeRawValue` in [`src/core/values.js`](https://github.com/juliangarnier/anime/blob/main/src/core/values.js) detects the leading operator, stores it in the target object, then `getRelativeValue` combines the base (the element's current value) with the operand to produce the final numeric target.

### Combining Labels with Operators

Create synchronized animation sequences using named labels and relative offsets:

```javascript
const tl = anime.timeline();

tl.add({
  targets: '.dot',
  translateX: 300,
  duration: 1000,
  offset: 'labelA'
});

tl.add({
  targets: '.dot',
  rotate: 360,
  duration: 800,
  offset: 'labelA+=200'
});

tl.add({
  targets: '.dot',
  scale: 2,
  duration: 600,
  offset: 'labelA<<+=150'
});

```

The `parseTimelinePosition` function in [`src/timeline/position.js`](https://github.com/juliangarnier/anime/blob/main/src/timeline/position.js) resolves `labelA` to its absolute time, then applies the relative operators to calculate the final insertion point.

## Summary

- **Anime.js** supports three arithmetic operators (`+=`, `-=`, `*=`) for tween values and two timeline position operators (`<`, `<<`) that can be combined with arithmetic for sequencing.
- The **operator detection** logic resides in [`src/core/consts.js`](https://github.com/juliangarnier/anime/blob/main/src/core/consts.js) via the `relativeValuesExecRgx` regular expression.
- **Value computation** is handled by `getRelativeValue` in [`src/core/values.js`](https://github.com/juliangarnier/anime/blob/main/src/core/values.js), which performs addition, subtraction, or multiplication based on the parsed operator.
- **Timeline offsets** are resolved by `parseTimelinePosition` in [`src/timeline/position.js`](https://github.com/juliangarnier/anime/blob/main/src/timeline/position.js), which supports labels, previous animation references (`<`, `<<`), and compound expressions like `'labelA+=200'`.
- Because operators are **parsed once** during animation instantiation, the render loop works with plain numbers, ensuring zero runtime string parsing overhead.

## Frequently Asked Questions

### What is the difference between `<` and `<<` in Anime.js timeline offsets?

The `<` operator positions the animation at the **end** of the previous animation (the insertion point where the previous animation finishes), while `<<` positions it at the **start** of the previous animation. For example, `'<+=100'` starts 100ms after the previous animation ends, whereas `'<<+=100'` starts 100ms after the previous animation began. The `parseTimelinePosition` function in [`src/timeline/position.js`](https://github.com/juliangarnier/anime/blob/main/src/timeline/position.js) handles this distinction by checking for the double less-than symbol.

### Can I use relative values with CSS properties that use units like px or %?

Yes, Anime.js correctly handles units when parsing relative values. When you specify a value like `'+=50px'` or `'-=10%'`, the `decomposeRawValue` function in [`src/core/values.js`](https://github.com/juliangarnier/anime/blob/main/src/core/values.js) extracts the operator and numeric portion separately from the unit. The arithmetic is applied to the numeric value via `getRelativeValue`, and the original unit is preserved in the final result. This allows you to animate properties like `translateX`, `width`, or `left` using relative increments while maintaining the correct CSS units.

### Why does Anime.js parse relative operators during instantiation rather than during the animation loop?

Parsing relative operators at instantiation—performed by `decomposeRawValue` and `parseTimelinePosition`—ensures that the animation engine works with absolute numeric values during the render loop. This design choice eliminates runtime string parsing overhead, garbage collection from regex operations, and conditional logic for operator detection on every frame. According to the implementation in [`src/core/values.js`](https://github.com/juliangarnier/anime/blob/main/src/core/values.js) and [`src/timeline/position.js`](https://github.com/juliangarnier/anime/blob/main/src/timeline/position.js), once the animation starts, `getRelativeValue` has already computed the final target numbers, allowing the renderer to focus purely on interpolation.

### How do I chain multiple relative operators in a single offset string?

Anime.js allows you to combine timeline position operators with arithmetic operators in a single string, such as `'<<+=150'` or `'<*=0.5'`. The `parseTimelinePosition` function in [`src/timeline/position.js`](https://github.com/juliangarnier/anime/blob/main/src/timeline/position.js) first identifies the base reference—whether it's a label, `<` (end of previous), or `<<` (start of previous)—then applies the arithmetic operator using `getRelativeValue` to calculate the final offset. You cannot, however, chain multiple arithmetic operators (like `+=100+=50`); the parser expects exactly one arithmetic operator per value string.