src/anims/transitions.tsx

import { slide } from "@remotion/transitions/slide";
import { fade } from "@remotion/transitions/fade";
import { flip } from "@remotion/transitions/flip";
import { clockWipe } from "@remotion/transitions/clock-wipe";
import { iris } from "@remotion/transitions/iris";
import { wipe } from "@remotion/transitions/wipe";

export const TransitionAnims = ({ width, height }: { width: number, height: number }) => {
  let transitions = {
    SlideFromLeft: slide({
      direction: "from-left"
    }),
    SlideFromRight: slide({
      direction: "from-right"
    }),
    SlideFromTop: slide({
      direction: "from-top"
    }),
    SlideFromBottom: slide({
      direction: "from-bottom"
    }),
    Fade: fade(),
    Flip: flip(),
    ClockWipe: clockWipe({ width, height }),
    Iris: iris({ width, height }),
    Wipe: wipe(),
  }

  return {
    transitions,
    get(transition_type: string) {
      let transitionList = transition_type?.split(",")?.map(t => t.trim()) || [];
      let animFromTranscript = Object.keys(transitions).find(n => {
        return transitionList.includes(n)
      })
      if (animFromTranscript) {
        //@ts-ignore
        return transitions[animFromTranscript as any]
      }
      return transitions.SlideFromRight
    }
  }
}