> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BintzGavin/helios/llms.txt
> Use this file to discover all available pages before exploring further.

# Easing functions

> Collection of easing functions for smooth animations

Easing functions modify the rate of change over time, creating more natural-looking animations.

## Easing

The `Easing` object provides a comprehensive collection of easing functions.

```typescript theme={null}
import { Easing } from '@heliosvideo/core';
```

## Basic functions

### linear

No easing, constant rate.

```typescript theme={null}
const value = Easing.linear(t);
```

### step

Steps through values in discrete increments.

```typescript theme={null}
const stepFn = Easing.step(4); // 4 steps
const value = stepFn(t);
```

<ParamField path="steps" type="number" required>
  Number of steps
</ParamField>

### bezier

Creates a cubic bezier easing function.

```typescript theme={null}
const easeFn = Easing.bezier(0.25, 0.1, 0.25, 1.0);
const value = easeFn(t);
```

<ParamField path="mX1" type="number" required>
  X coordinate of first control point
</ParamField>

<ParamField path="mY1" type="number" required>
  Y coordinate of first control point
</ParamField>

<ParamField path="mX2" type="number" required>
  X coordinate of second control point
</ParamField>

<ParamField path="mY2" type="number" required>
  Y coordinate of second control point
</ParamField>

## Polynomial easing

### Quad

Quadratic easing (power of 2).

```typescript theme={null}
Easing.quad.in(t)    // Accelerating from zero velocity
Easing.quad.out(t)   // Decelerating to zero velocity
Easing.quad.inOut(t) // Acceleration until halfway, then deceleration
```

### Cubic

Cubic easing (power of 3).

```typescript theme={null}
Easing.cubic.in(t)
Easing.cubic.out(t)
Easing.cubic.inOut(t)
```

### Quart

Quartic easing (power of 4).

```typescript theme={null}
Easing.quart.in(t)
Easing.quart.out(t)
Easing.quart.inOut(t)
```

### Quint

Quintic easing (power of 5).

```typescript theme={null}
Easing.quint.in(t)
Easing.quint.out(t)
Easing.quint.inOut(t)
```

## Transcendental easing

### Sine

Sinusoidal easing.

```typescript theme={null}
Easing.sine.in(t)
Easing.sine.out(t)
Easing.sine.inOut(t)
```

### Expo

Exponential easing.

```typescript theme={null}
Easing.expo.in(t)
Easing.expo.out(t)
Easing.expo.inOut(t)
```

### Circ

Circular easing.

```typescript theme={null}
Easing.circ.in(t)
Easing.circ.out(t)
Easing.circ.inOut(t)
```

## Physical easing

### Back

Easing with overshoot.

```typescript theme={null}
Easing.back.in(t)    // Backs up before moving forward
Easing.back.out(t)   // Overshoots and returns
Easing.back.inOut(t) // Backs up and overshoots
```

### Elastic

Elastic spring-like easing.

```typescript theme={null}
Easing.elastic.in(t)
Easing.elastic.out(t)
Easing.elastic.inOut(t)
```

### Bounce

Bouncing easing.

```typescript theme={null}
Easing.bounce.in(t)
Easing.bounce.out(t)
Easing.bounce.inOut(t)
```

## Usage examples

### With interpolate

```typescript theme={null}
import { interpolate, Easing } from '@heliosvideo/core';

const x = interpolate(
  frame,
  [0, 100],
  [0, 500],
  { easing: Easing.cubic.out }
);
```

### With transition

```typescript theme={null}
import { transition, Easing } from '@heliosvideo/core';

const opacity = transition(
  frame,
  0,
  60,
  { easing: Easing.quad.inOut }
);
```

### Custom bezier curves

```typescript theme={null}
import { Easing } from '@heliosvideo/core';

// CSS ease equivalent
const ease = Easing.bezier(0.25, 0.1, 0.25, 1.0);

// CSS ease-in equivalent
const easeIn = Easing.bezier(0.42, 0, 1.0, 1.0);

// CSS ease-out equivalent
const easeOut = Easing.bezier(0, 0, 0.58, 1.0);

// CSS ease-in-out equivalent
const easeInOut = Easing.bezier(0.42, 0, 0.58, 1.0);
```

### Step function

```typescript theme={null}
import { Easing, interpolate } from '@heliosvideo/core';

// 8-bit style stepped animation
const y = interpolate(
  frame,
  [0, 100],
  [0, 200],
  { easing: Easing.step(8) }
);
```

## Visualization

All easing functions expect input `t` in the range \[0, 1] and return output in approximately the range \[0, 1] (some physical easings like `back` and `elastic` may overshoot).

* **In**: Slow start, fast end
* **Out**: Fast start, slow end
* **InOut**: Slow start, fast middle, slow end

## Type

```typescript theme={null}
type EasingFunction = (t: number) => number;
```