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.
Utilities for creating smooth transitions between states.
transition()
Calculates the progress of a transition.
const progress = transition(frame, start, duration, options);
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);
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} />
)}
</>
);
}