Chapter 971: Posterization

Core Idea

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.

Key Concepts

• Using interpolate()
• Colors and styles
• Studio
• See also

Code Examples

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>
  );
};

• What it demonstrates: Usage pattern for Posterization from the official docs.

Key Takeaways

1. Understand using interpolate() when working with Posterization.
2. Understand colors and styles when working with Posterization.
3. Understand studio when working with Posterization.
4. Understand see also when working with Posterization.

Connects To

• 4 0 Alpha: related page in the Miscellaneous (Core) section.
• ai: related page in the Miscellaneous (Core) section.
• Animated Emoji: related page in the Miscellaneous (Core) section.