Chapter 1: <AbsoluteFill>

Core Idea

A helper component - it is an absolutely positioned <div> with the following styles:

Key Concepts

• API
• Inherited props<AvailableFrom v="4.0.501" />
• ref?
• Other props
• TailwindCSS class detection<AvailableFrom v="4.0.249" />
• Compatibility
• See also

Code Examples

const style: React.CSSProperties = {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: '100%',
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
};

• What it demonstrates: Usage pattern for <AbsoluteFill> from the official docs.

Key Takeaways

1. Understand api when working with <AbsoluteFill>.
2. Understand inherited props<availablefrom v="4.0.501" /> when working with <AbsoluteFill>.
3. Understand ref? when working with <AbsoluteFill>.
4. Understand other props when working with <AbsoluteFill>.
5. Understand tailwindcss class detection<availablefrom v="4.0.249" /> when working with <AbsoluteFill>.

Connects To

• Animating Properties: 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.