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

# Transition utilities

> Transition and crossfade functions for smooth scene changes

Utilities for creating smooth transitions between states.

## transition()

Calculates the progress of a transition.

```typescript theme={null}
const progress = transition(frame, start, duration, options);
```

**frame** `number` *required*

Current frame number

**start** `number` *required*

Start frame number

**duration** `number` *required*

Duration in frames

**options** `TransitionOptions`

Transition options

**properties**

**easing** `(t: number) =\> number`

Easing function to apply

**progress** `number`

Progress value:

* 0 before start
* 0 to 1 during duration
* 1 after duration

### Example

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

// Basic transition
const opacity = transition(currentFrame, 30, 60);

// With easing
const scale = transition(
  currentFrame,
  0,
  90,
  { easing: Easing.cubic.inOut }
);

// Fade in/out
const fadeIn = transition(currentFrame, 0, 30);
const fadeOut = 1 - transition(currentFrame, 270, 30);
```

## crossfade()

Calculates values for a crossfade transition between two states.

```typescript theme={null}
const { in: fadeIn, out: fadeOut } = crossfade(frame, start, duration, options);
```

**frame** `number` *required*

Current frame number

**start** `number` *required*

Start frame number

**duration** `number` *required*

Duration in frames

**options** `TransitionOptions`

Transition options

**properties**

**easing** `(t: number) =\> number`

Easing function to apply

**result** `CrossfadeResult`

Crossfade values

**properties**

**in** `number`

Fade-in value (0 to 1)

**out** `number`

Fade-out value (1 to 0)

### Example

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

// Basic crossfade between two scenes
const { in: sceneAOpacity, out: sceneBOpacity } = crossfade(
  currentFrame,
  60,
  30
);

// Crossfade with easing
const { in: fadeIn, out: fadeOut } = crossfade(
  currentFrame,
  90,
  45,
  { easing: Easing.sine.inOut }
);

// Render both scenes
renderScene(sceneA, { opacity: sceneBOpacity });
renderScene(sceneB, { opacity: sceneAOpacity });
```

## Complete example

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

function MyComposition({ frame }) {
  // Scene 1: 0-100 frames
  const scene1 = sequence({
    frame,
    from: 0,
    durationInFrames: 100,
  });

  // Scene 2: 70-170 frames (30 frame overlap)
  const scene2 = sequence({
    frame,
    from: 70,
    durationInFrames: 100,
  });

  // Crossfade between scenes
  const { in: scene2Opacity, out: scene1Opacity } = crossfade(
    frame,
    70,
    30,
    { easing: Easing.cubic.inOut }
  );

  // Title fade in
  const titleOpacity = transition(
    frame,
    10,
    20,
    { easing: Easing.quad.out }
  );

  return (
    <>
      {scene1.isActive && (
        <Scene1 opacity={scene1Opacity} titleOpacity={titleOpacity} />
      )}
      {scene2.isActive && (
        <Scene2 opacity={scene2Opacity} />
      )}
    </>
  );
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.