Chapter 357: Interactivity best practices

Core Idea

By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:

Key Concepts

• Make an HTML element interactive using Interactive
• Give interactive elements a descriptive name
• Keep all CSS styles inline
• Animate using interpolate()
• Use scale, translate, rotate CSS properties
• Keep composition metadata inline
• Effects should be inline too
• Make props of a custom component editable

Code Examples

<Interactive.Div name="Greeting card" style={{fontSize: 80, padding: 24}}>
  Hello
</Interactive.Div>

• What it demonstrates: Usage pattern for Interactivity best practices from the official docs.

Key Takeaways

1. Understand make an html element interactive using interactive when working with Interactivity best practices.
2. Understand give interactive elements a descriptive name when working with Interactivity best practices.
3. Understand keep all css styles inline when working with Interactivity best practices.
4. Understand animate using interpolate() when working with Interactivity best practices.
5. Understand use scale, translate, rotate css properties when working with Interactivity best practices.

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.