# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.supademo.com/customize/animation/zoom-and-pan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.