Skip to main content

iris()v4.0.316

A presentation where the next scene is revealed through a circular mask that expands from the center outward, similar to a camera iris opening.

Example​

IrisTransition.tsx
import {linearTiming, TransitionSeries} from '@remotion/transitions';
import {iris} from '@remotion/transitions/iris';
import {useVideoConfig} from 'remotion';

const BasicTransition = () => {
  const {width, height} = useVideoConfig();

  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition presentation={iris({width, height})} timing={linearTiming({durationInFrames: 30})} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API​

Accepts an object with the following options:

width​

Should be set to the width of the video.

height​

Should be set to the height of the video.

outerEnterStyle?​

The style of the outer element when the scene is entering.

outerExitStyle?​

The style of the outer element when the scene is exiting.

innerEnterStyle?​

The style of the inner element when the scene is entering.

innerExitStyle?​

The style of the inner element when the scene is exiting.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​