Skip to main content
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
​
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
​
result
CrossfadeResult
Crossfade values

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