Chapter 25: spring()

Core Idea

A physics-based animation primitive.

Key Concepts

• Parameters
• frame
• fps
• from?
• to?
• reverse?<AvailableFrom v="3.3.92" />
• config?
• mass?

Code Examples

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

const value = spring({
  frame,
  fps,
  config: {
    stiffness: 100,
  },
});

• What it demonstrates: Usage pattern for spring() from the official docs.

Key Takeaways

1. Understand parameters when working with spring().
2. Understand frame when working with spring().
3. Understand fps when working with spring().
4. Understand from? when working with spring().
5. Understand to? when working with spring().

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.