Transition utilities

Transition and crossfade functions for smooth scene changes

Utilities for creating smooth transitions between states.

transition()

Calculates the progress of a transition.

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

Show 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

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.

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

Show properties

easing · (t: number) => number

Easing function to apply

result · CrossfadeResult

Crossfade values

Show properties

in · number

Fade-in value (0 to 1)

out · number

Fade-out value (1 to 0)

Example

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

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