> ## 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.

# 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);
```

<ParamField path="frame" type="number" required>
  Current frame number
</ParamField>

<ParamField path="start" type="number" required>
  Start frame number
</ParamField>

<ParamField path="duration" type="number" required>
  Duration in frames
</ParamField>

<ParamField path="options" type="TransitionOptions">
  Transition options

  <Expandable title="properties">
    <ParamField path="easing" type="(t: number) => number">
      Easing function to apply
    </ParamField>
  </Expandable>
</ParamField>

<ResponseField name="progress" type="number">
  Progress value:

  * 0 before start
  * 0 to 1 during duration
  * 1 after duration
</ResponseField>

### 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);
```

<ParamField path="frame" type="number" required>
  Current frame number
</ParamField>

<ParamField path="start" type="number" required>
  Start frame number
</ParamField>

<ParamField path="duration" type="number" required>
  Duration in frames
</ParamField>

<ParamField path="options" type="TransitionOptions">
  Transition options

  <Expandable title="properties">
    <ParamField path="easing" type="(t: number) => number">
      Easing function to apply
    </ParamField>
  </Expandable>
</ParamField>

<ResponseField name="result" type="CrossfadeResult">
  Crossfade values

  <Expandable title="properties">
    <ResponseField name="in" type="number">
      Fade-in value (0 to 1)
    </ResponseField>

    <ResponseField name="out" type="number">
      Fade-out value (1 to 0)
    </ResponseField>
  </Expandable>
</ResponseField>

### 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} />
      )}
    </>
  );
}
```