Chapter 80: resize()

Core Idea

Efficiently monitor and react to size changes of the viewport, or HTML and SVG elements, with resize. This function uses the ResizeObserver API to provide performant, per-element resize event handling, complete with easy-to-use cleanup. Ideal for dynamic layouts and responsive component designs.

Key Concepts

• Tracking viewport changes: Changes to the viewport can be detected by passing just a callback to resize:
• Tracking element changes: By passing an element or CSS selector
• Responding to size changes: For best performance
• Cleanup: resize returns a function that will
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

// Viewport
resize(() => {})

// Specific elements
resize("li", () => {})

• What it demonstrates: Core usage pattern for resize().

Key Takeaways

1. resize() supports Tracking viewport changes.
2. resize() supports Tracking element changes.
3. resize() supports Responding to size changes.

Connects To

• frame: related Motion doc page.
• inView: related Motion doc page.
• hover(): related Motion doc page.
• animate(): related Motion doc page.