> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/customize/animation/zoom-and-pan.md).

# Zoom & Pan

{% hint style="info" %}
Want to add zooms on all steps programmatically with AI? [Try using the Supademo MCP.](https://docs.supademo.com/customize/mcp-server)
{% endhint %}

With Zoom and Pan, you can help viewers to zoom into specific areas on the screen to narrow their focus. This is ideal for highlighting small buttons, text, or simply focusing the user's attention within a complex page.

{% hint style="success" %}
Tip: turn on Apply Auto Zoom via the Chrome Extension settings to automatically apply visual zooming and panning effects to new Supademo recordings.
{% endhint %}

#### Adding zoom and pan

{% @supademo/embed demoId="\_WnwM2vU48rXuSkS8v07R" url="<https://app.supademo.com/demo/_WnwM2vU48rXuSkS8v07R>" %}

#### Zoom and pan on HTML demos

{% @supademo/embed demoId="cmk430d9i4wsagmn8m0q232fc" url="<https://app.supademo.com/demo/cmk430d9i4wsagmn8m0q232fc>" %}

***

{% hint style="info" %}
**Zoom and Pan** is a feature available on all Supademo plans.
{% endhint %}

#### 1. Zoom and Pan helps viewers to zoom into specific areas on the screen to narrow their focus.

![1 Upload](https://d16ev9qffqt5qm.cloudfront.net/?s3_key=clf7r5s6900giyy0h6trezsck/ZEWS9WGldspRodNS9a.png\&x=1109\&y=128\&fill=3467dd\&color=3467dd)

#### 2. Click "Zoom" and the editor will center a zoom around your hotspot. You can then: - Reposition your zoom - Resize your zoom area - Preview directly in the editor.

![2 Upload](https://d16ev9qffqt5qm.cloudfront.net/?s3_key=clf7r5s6900giyy0h6trezsck/Mzp6uKFb0NrKKMe5xz.png\&x=1018\&y=407\&fill=3467dd\&color=3467dd)

#### 3. This makes small text or sections in complex pages more readable across support docs and demos.