TextInOut.tsx

import {interpolate, Sequence, useCurrentFrame, useVideoConfig, AbsoluteFill, Easing } from 'remotion';
import './styles.css'

const TextIn:React.FC<{ text: string, color: string, duration: number }> = ({ text="Whoosh!", color="white", duration }) => {
	const frame = useCurrentFrame();

  const scale = interpolate(
    frame,
    [0,duration],
    [0.1, 50],
    {
      easing: Easing.bezier(.63,.01,.97,.62)
    }
  )

  return (
    <AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center' }}>
      <svg width="1600px" height="900px">
        <text id="text" x="50%" y="50%" dy="0" style={{ transform: `translateY(80px) scale(${scale})`, fontWeight: 800, fill: color }}>{text}</text>
      </svg>
      <FadeToColor duration={duration} color={color} />
    </AbsoluteFill>
  )
}

const TextOut:React.FC<{ text: string, color: string, duration: number }> = ({ text="Whoosh!", color="black", duration }) => {
	const frame = useCurrentFrame();

  const scale = interpolate(
    frame,
    [0, duration],
    [0.1, 50],
    {
      easing: Easing.bezier(.63,.01,.97,.62)
    }
  )

  const opacity = interpolate(
    frame - (duration - 10),
    [0, 10],
    [1, 0]
  )

  return (
    <AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center', opacity }}>
      <svg width="1600px" height="900px">
        <defs>
          <mask id="mask" x="0" y="0" width="100%" height="100%">
            <rect id="overlay" x="0" y="0" width="100%" height="100%" fill={'white'} opacity={1} />
            <text id="text" x="50%" y="50%" dy="0" style={{ transform: `translateY(80px) scale(${scale})` }}>{text}</text>
          </mask>
        </defs>
        <rect id="r" x="0" y="0" width="100%" height="100%" fill={color} mask="url(#mask)" />
      </svg>
    </AbsoluteFill>
  )
}


const FadeToColor:React.FC<{ color: string, duration: number }> = ({ color, duration }) => {
	const frame = useCurrentFrame();

  const opacity = interpolate(
    frame - (duration - 10),
    [0,10],
    [0, 1]
  )

  return (
    <AbsoluteFill style={{ backgroundColor: color, opacity: opacity }} />
  )

}

export const TextInOut = () => {
	const videoConfig = useVideoConfig();
  const halfDuration = videoConfig.durationInFrames * 0.5
  const color = 'lime'

	return (
    <>
      <Sequence from={0} durationInFrames={halfDuration}>
        <TextIn text={'START'} duration={halfDuration} color={color} />
			</Sequence>
			<Sequence from={halfDuration} durationInFrames={halfDuration}>
        <TextOut text={'END'} color={color} duration={halfDuration} />
			</Sequence>
		</>
	);
};