Chapter 2: Animating properties

Core Idea

Animation works by changing properties over time. Let's create a simple fade in animation.

Key Concepts

• Using the interpolate helper function
• Using spring()
• Always animate using useCurrentFrame()
• See also

Code Examples

export const FadeIn = () => {
  const frame = useCurrentFrame();

  const opacity = Math.min(1, frame / 60);

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white",
        fontSize: 80,
      }}
    >
      <div style={{ opacity: opacity }}>Hello World!</div>
    </AbsoluteFill>
  );
};

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

Key Takeaways

1. Understand using the interpolate helper function when working with Animating properties.
2. Understand using spring() when working with Animating properties.
3. Understand always animate using usecurrentframe() when working with Animating properties.
4. Understand see also when working with Animating properties.

Connects To

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