transition-slide

1import { slide } from "@remotion/transitions/slide";
2import {
3  resolveTransitionTiming,
4  type TransitionVariant,
5} from "@/remotion/lib/transition-timing";
6 
7export type SlideDirection =
8  | "from-left"
9  | "from-right"
10  | "from-top"
11  | "from-bottom";
12 
13export type TransitionSlideConfig = {
14  durationInFrames?: number;
15  direction?: SlideDirection;
16  variant?: TransitionVariant;
17};
18 
19/** Slide transition config for use with TransitionSeries.Transition */
20export function transitionSlide({
21  durationInFrames = 22,
22  direction = "from-left",
23  variant = "editorial",
24}: TransitionSlideConfig = {}) {
25  return {
26    presentation: slide({ direction }),
27    timing: resolveTransitionTiming({ durationInFrames, variant }),
28  };
29}
30 
31/** Total overlap frames consumed by a slide transition */
32export function getTransitionSlideDuration(
33  config: TransitionSlideConfig = {},
34  fps: number,
35): number {
36  return transitionSlide(config).timing.getDurationInFrames({ fps });
37}