Chapter 9: Easing

Core Idea

The Easing module implements common easing functions. You can use it with the interpolate() API.

Key Concepts

• Predefined animations
• Standard functions
• Additional functions
• Example
• Methods
• step0
• step1
• linear

Code Examples

const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const interpolated = interpolate(frame, [0, 100], [0, 1], {
    easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill
      style={{
        transform: `scale(${interpolated})`,
        backgroundColor: "red",
      }}
    />
  );
};

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

Key Takeaways

1. Understand predefined animations when working with Easing.
2. Understand standard functions when working with Easing.
3. Understand additional functions when working with Easing.
4. Understand example when working with Easing.
5. Understand methods when working with Easing.

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Animation Math: related page in the Fundamentals & Core Concepts section.