Skip to main content

zoomBlur()v4.0.456

A presentation where the outgoing scene zooms out and rotates while the incoming scene zooms in from the opposite angle, blended with a radial zoom blur.

warning

This presentation is built on top of the experimental HTML-in-canvas feature and currently requires Chrome Canary with chrome://flags/#canvas-draw-element enabled. It does not work in Firefox or Safari, and it cannot be rendered server-side.

Example​

ZoomBlurTransition.tsx
import {linearTiming, TransitionSeries} from '@remotion/transitions';
import {zoomBlur} from '@remotion/transitions/zoom-blur';

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

API​

Accepts an object with the following options:

rotation?​

The maximum rotation angle in radians applied to each scene as it transitions. The outgoing scene rotates from 0 to -rotation and the incoming scene rotates from +rotation to 0.

Defaults to Math.PI / 6 (30°).

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

Because this presentation relies on HTML-in-canvas, it only runs in Chromium-based browsers that ship the experimental drawElementImage and canvas.requestPaint() APIs. As of writing, this means Chrome Canary with the chrome://flags/#canvas-draw-element flag enabled.

See also​