Chapter 46: Timeline – Usage

Core Idea

Import and use the timeline components in your React application.

Key Concepts

• Component Integration
• Default state structure
• Video Preview
• State Persistence
• Example Project Structure

Code Examples

export const App = () => {
  const playerRef = useRef<PlayerRef>(null);
  const timelineContainerRef = useRef<HTMLDivElement>(null);
  const timelineContainerSize = useElementSize(timelineContainerRef);
  const timelineContainerWidth = timelineContainerSize?.width;

  return (
    <TimelineProvider
      onChange={(newState) => {
        console.log('New timeline state:', newState);
      }}
      initialState={initialState}
    >
      <TimelineZoomProvider initialZoom={1}>
        <PreviewContainer>
          <VideoPreview loop playerRef={playerRef} />
          <ActionRow playerRef={playerRef} />
        </PreviewContainer>

        <TimelineContainer timelineContainerRef={timelineContainerRef}>
          {timelineContainerWidth ? (
            <TimelineSizeProvider containerWidth={timelineContainerWidth}>
              <Timeline playerRef={playerRef} />
            </TimelineSizeProvider>
          ) : null}
        </TimelineContainer>
      </TimelineZoomProvider>
    </TimelineProvider>
  );
};

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

Key Takeaways

1. Understand component integration when working with Timeline – Usage.
2. Understand default state structure when working with Timeline – Usage.
3. Understand video preview when working with Timeline – Usage.
4. Understand state persistence when working with Timeline – Usage.
5. Understand example project structure when working with Timeline – Usage.

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.