blurSlide()v4.0.523

A presentation that whips both scenes in one direction with a heavy motion blur, like a fast camera pan.

warning

This presentation is built with HTML-in-canvas and requires Google Chrome with chrome://flags/#canvas-draw-element enabled. It does not work in Firefox or Safari.

Example

BlurSlideTransition.tsx
import {linearTiming, TransitionSeries} from '@remotion/transitions';
import {blurSlide} from '@remotion/transitions/blur-slide';

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={blurSlide({direction: 'from-left'})}
        timing={linearTiming({durationInFrames: 20})}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

The slide is eased so that it starts and ends at rest. linearTiming() is a good choice for this presentation.

The blur grows in proportion to the distance traveled during the first half of the slide, then shrinks in proportion to the distance remaining during the second half.

API

Accepts an object with the following options:

direction?

One of from-left, from-right, from-top, from-bottom. Determines from which side the entering scene slides in.

Defaults to from-left.

TypeScript type
import {BlurSlideDirection} from '@remotion/transitions/blur-slide';

const direction: BlurSlideDirection = 'from-left';

blur?

The maximum length of the motion blur, as a fraction of the frame size along the slide direction. 0.5 blurs across half of the frame at the midpoint of the transition. Must be 0 or greater.

Defaults to 0.5.

Compatibility

Browsers			Servers			Environments
Chrome	Firefox	Safari	Node.js	Bun	Serverless Functions	Client-side rendering	Server-side rendering	Player	Studio

For Preview, Chrome with the chrome://flags/#canvas-draw-element flag enabled is required.

See also

• Source code for this presentation
• slide() — the CSS-based slide without blur
• HTML-in-canvas
• Presentations