Skip to main content

evolve()v4.0.470

Part of the @remotion/effects package.

Reveals a canvas-based component from a direction or angle with an optional soft edge.

Use it for wipes, reveals, and intro/outro animations on <Video>, <HtmlInCanvas> and <Solid>.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {interpolate, useCurrentFrame} from 'remotion';
import {Video} from '@remotion/media';
import {evolve} from '@remotion/effects/evolve';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [0, 30], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          evolve({
            progress,
            direction: 'left',
            feather: 0.18,
          }),
        ]}
      />
    </>
  );
};

API​

Pass an object with the following properties. You can also call evolve() without arguments.

progress?​

Reveal progress from 0 (fully hidden) to 1 (fully revealed). Defaults to 0.5.

Animate from 1 to 0 to wipe the component out.

direction?​

Direction the component is revealed from. Defaults to left.

Possible values: left, right, top, bottom, angle.

Use angle to set a custom travel direction with angle. Available from v4.0.540.

angle?v4.0.540​

Direction the reveal edge travels, in clockwise degrees from up. Only applies when direction is angle. Defaults to 90.

An angle of 0 reveals from bottom to top, 90 from left to right, 180 from top to bottom, and 270 from right to left.

featherUnit?v4.0.540​

Unit used for the edge softness: relative or pixels. Defaults to relative.

Use relative with feather to scale the softness with the canvas size. Use pixels with featherPixels to set the width of a linear fade centered on the reveal edge.

feather?​

Softness of the evolving edge from 0 (sharp edge) to 1 (fully feathered). Only applies when featherUnit is relative. Defaults to 0.1.

featherPixels?v4.0.540​

Width of the soft edge in pixels. Must be 0 or greater. Only applies when featherUnit is pixels. Defaults to 0 (sharp edge).

The edge travels beyond the canvas bounds so the component is fully hidden at progress: 0 and fully revealed at progress: 1, including with large feather widths.

disabled?​

When true, the effect is skipped. Defaults to false.

Angled wipev4.0.540​

MyComp.tsx
import {interpolate, useCurrentFrame} from 'remotion';
import {Video} from '@remotion/media';
import {evolve} from '@remotion/effects/evolve';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [0, 30], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <Video
      src="https://remotion.media/video.mp4"
      effects={[
        evolve({
          progress,
          direction: 'angle',
          angle: 60,
          featherUnit: 'pixels',
          featherPixels: 60,
        }),
      ]}
    />
  );
};

Requirements​

evolve() uses a WebGL2 backend. See Using WebGL and WebGPU during renders.

See also​