remotion-transition-series

A TransitionSeries component for Remotion.

Included in this repo are the following transitions:

  • Dissolve
  • FadeThroughColor
  • Pan
  • Slide
  • SlidingDoors
  • LinearWipe
  • CircularWipe

They can be seen in a video here: https://twitter.com/marcusstenbeck/status/1446420801918586888

Setup

npm install remotion-transition-series

Preview

To start the Remotion Preview of run:

npm run preview

Examples

Take a look at the preview folder. In it you’ll find a bunch of transitions.

With defaults for the CircularWipe transition.

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <div>Hello</div>
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    durationInFrames={30}
    transitionComponent={CircularWipe}
  />

  <TransitionSeries.Sequence durationInFrames={60}>
    <div>World</div>
  </TransitionSeries.Sequence>
</TransitionSeries>

Using custom props with the CircularWipe transition

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <div>Hello</div>
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    durationInFrames={30}
    transitionComponent={(props) => <CircularWipe {...props} direction="in" />}
  />

  <TransitionSeries.Sequence durationInFrames={60}>
    <div>World</div>
  </TransitionSeries.Sequence>
</TransitionSeries>

Custom easing with CircularWipe transition

import { Easing } from 'remotion';

// ...

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <div>Hello</div>
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    durationInFrames={30}
    transitionComponent={(props) => (
      <CircularWipe {...props} progress={Easing.inOut(Easing.exp)} />
    )}
  />

  <TransitionSeries.Sequence durationInFrames={60}>
    <div>World</div>
  </TransitionSeries.Sequence>
</TransitionSeries>;

Docs

<TransitionSeries>

See: https://www.remotion.dev/docs/series

<TransitionSeries.Transition />

For other props, see: https://www.remotion.dev/docs/sequence

transitionComponent

A component that renders the transition.

Props

  • progress between 0 to 1
  • exitingElement is the previous sequence in the series
  • enteringElement is the next sequence in the series

(props: {
  progress: number;
  exitingElement: ReactNode;
  enteringElement: ReactNode;
}) => ReactNode;

Contributing

Feel free to open pull requests or file issues.

Author

@marcusstenbeck

GitHub

View Github