Setting the file. One moment.
Skill 32 · Remotion To Hyperframes
Subchapter 32.11
references/transitions.mdMarkdown4 KBView on GitHub
The @remotion/transitions package is Remotion’s library of pre-built
scene-to-scene transitions. HF has two paths to translate them:
Scripts
Gitkeepscripts<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={60}>
<SceneA />
</TransitionSeries.Sequence>
<TransitionSeries.Transition
presentation={fade()}
timing={linearTiming({ durationInFrames: 15 })}
/>
<TransitionSeries.Sequence durationInFrames={60}>
<SceneB />
</TransitionSeries.Sequence>
</TransitionSeries>Translates to scenes that overlap by the transition duration:
data-start="0" data-duration="2"data-start="1.5" data-duration="2" (the transition window overlaps the end of A and start of B)Then drive the transition with GSAP:
// Manual fade (presentation={fade()})
tl.to(sceneA, { opacity: 0, duration: 0.5, ease: "none" }, 1.5);
tl.fromTo(sceneB, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "none" }, 1.5);Remotion presentation | HF translation |
|---|---|
fade() | manual gsap.to(opacity) crossfade |
slide({direction: "from-right"}) | gsap.fromTo(translateX: "100%" → 0) on incoming + to(translateX: "-100%") on outgoing |
wipe({direction: "from-left"}) | gsap.fromTo(clip-path: inset(0 100% 0 0) → inset(0 0 0 0)) on incoming |
clockWipe() | use HF’s sdf-iris shader-transition (npx hyperframes add sdf-iris) |
flip() | gsap.to(rotateY) 180° split between scenes |
cube() | use HF’s cinematic-zoom or build manually with rotateY + transform-origin |
iris() | use HF’s sdf-iris shader-transition |
none() | no transition; hard cut at the boundary |
linearTiming({durationInFrames: 15}) → ease: "none"
linearTiming({durationInFrames: 15, easing: ...}) → ease per the easing table in timing.md
springTiming({config: {damping: 12}}) → ease: "back.out(1.4)" (~0.7 s)Convert durationInFrames to seconds (/fps).
For transitions Remotion presets that have visually-rich GLSL equivalents (iris, ripple, zoom, glitch), use HF’s shader-transitions (opens in a new tab) package. They produce richer output than manual GSAP transforms.
npx hyperframes add sdf-irisThen in the composition:
<div id="iris-transition" class="hf-shader-transition" data-start="1.5" data-duration="0.5">
<!-- bound scenes via the shader-transition's data-from / data-to -->
</div>Each shader-transition has its own data attributes; see the catalog page for the specific block.
Remotion supports custom presentation implementations:
const customPresentation: PresentationComponent = ({
children,
presentationProgress,
presentationDirection,
}) => {
return (
<div
style={
{
/* compute transform from progress */
}
}
>
{children}
</div>
);
};Translation: extract the math from the style={...} block and emit
equivalent GSAP tweens. Specifically the transform formula maps directly
to a gsap.to(target, { transform: ... }) parameterized by progress.
If the custom presentation uses useCurrentFrame() internally to
animate something outside the simple progress curve, treat the source
as untranslatable and bow out to the runtime interop pattern (see
escape-hatch.md).