Chapter 3: Animation math

Core Idea

You can add, subtract and multiply animation values to create more complex animations.

Key Concepts

• Animation math: You can add, subtract and multiply animation values to create more complex animations..

Code Examples

const frame = useCurrentFrame();
const { fps, durationInFrames } = useVideoConfig();

const enter = spring({
  fps,
  frame,
  config: {
    damping: 200,
  },
});

const exit = spring({
  fps,
  config: {
    damping: 200,
  },
  durationInFrames: 20,
  delay: durationInFrames - 20,
  frame,
});

const scale = enter - exit;

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

Key Takeaways

1. Understand animation math when working with Animation math.

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Building a Timeline: related page in the Fundamentals & Core Concepts section.