Skip to main content

Posterizationv4.0.470

Posterization makes an animation update in steps instead of changing on every frame. Use it for stop-motion, low-frame-rate motion, or a choppy graphic style.

Using interpolate()​

Pass posterize to interpolate(). If the input value is the current frame, posterize: 3 samples the animation every 3 frames.

MyComposition.tsx
import React from 'react';
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';

export const MyComposition: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <div
        style={{
          width: 120,
          height: 120,
          borderRadius: 24,
          backgroundColor: '#0b84f3',
          translate: interpolate(frame, [0, 60], ['-200px', '200px'], {
            posterize: 3,
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          }),
        }}
      />
    </AbsoluteFill>
  );
};

posterize quantizes the input before interpolation. With posterize: 3, frames 0 through 2 use the value for frame 0, frames 3 through 5 use the value for frame 3, and so on.

Colors and styles​

interpolateColors() also accepts posterize. The same option is available for interpolateStyles() from @remotion/animation-utils.

Studio​

When a prop or effect parameter is keyframed in Remotion Studio, a posterize option in the source interpolation is respected by the preview and timeline data. This works for values created with interpolate() and interpolateColors().

To edit posterization visually, right-click a keyframed sequence or effect prop in the timeline and click Keyframe settings....

See also​