--- title: "Add the zoom effect to guide steps" slug: "/help/demos/edit/guides/zoom-effect" tags: ["guides","annotations","zoom","tooltips","hotspots"] topic: "edit/guides" description: "Enable the zoom effect on a tooltip or hotspot step so the demo camera moves in on the element your guide is pointing at." product: "demos" last_updated: "2026-08-09T13:07:45.873Z" --- ## **Overview** The **zoom effect** moves the demo camera in on the element a guide step points at. When the step is reached, the screen animates in on that element, holds while the viewer reads the step, then animates back out when the guide advances. This is useful when the detail you are calling out is small — a single metric, a form field, a value inside a dense table or chart. In a full-screen view those details are easy to miss. **Why this matters:** Guided demos work best when the viewer's attention lands exactly where your copy is pointing. Dim darkens everything else; zoom goes further and makes the target physically larger on screen. --- ## **In This Guide** [**Before You Start**](#h_before_you_start) [**Enable Zoom on a Step**](#h_enable_zoom) [**Set the Zoom Level**](#h_zoom_level) [**Zoom into an Area Instead of an Element**](#h_zoom_area) [**Combine Zoom with Dim**](#h_zoom_dim) [**How Zoom Behaves in Playback**](#h_playback) [**Zoom in Exported Video and GIF**](#h_export) [**Good to Know**](#h_good_to_know) --- ## **Before You Start** A few things to know before you add zoom to a guide: **Zoom is set per step, not per demo.** Each step decides for itself. Steps without zoom stay at normal framing. **Zoom works on tooltips and hotspots.** Modals are centered on the screen rather than attached to an element, so they do not support zoom. **Zoom targets the element the step already points at.** There is no separate zoom target to set. **Best practice:** Use zoom on the few steps where the detail genuinely needs it. A demo that zooms on every step feels restless and the emphasis stops landing. --- ## **Enable Zoom on a Step** ### **How to Turn On Zoom** Open the template in Edit mode and select the tooltip or hotspot step you want to zoom. Click the **Settings** (gear) icon in the guide toolbar — the same panel that holds Dim and Autoplay. Turn **Zoom** on. Click **Done**. Click **Preview** to see the zoom play the way a viewer will see it. To remove the effect later, reopen the same settings panel and turn **Zoom** off. --- ## **Set the Zoom Level** The zoom level controls how far in the camera moves. Walnut applies a sensible default, so enabling zoom is usually all you need to do. If the default is too strong or too subtle for a particular step, adjust the level in the same settings panel. Walnut also frames the target with a small amount of breathing room around it, so the element does not sit flush against the edges of the screen. If the target is already large relative to the screen, Walnut will zoom less than the level you set rather than crop it. --- ## **Zoom into an Area Instead of an Element** Sometimes the thing you want to emphasize is not one clean element — a region of a chart, a cluster of rows, a corner of a dashboard. To do this, attach the step to a **custom element** and enable zoom on it. The custom element defines the rectangle, and zoom frames it like any other target. **To zoom into an area:** Create a custom element over the region you want to frame. See [**Create Custom Elements**](/help/demos/edit/guides/guided-demos#h_create_custom_elements). Attach a tooltip or hotspot to that custom element. Enable **Zoom** on the step as described above. There is no separate zoom-region tool — the custom element flow you already use is the way to frame an area. --- ## **Combine Zoom with Dim** Zoom and **Dim** work together. Zoom makes the target bigger; Dim darkens everything around it. Using both produces a spotlight effect on the target. Dim is the existing guide setting and behaves exactly as it does without zoom. See the **Dim** section in [**Create guided demos**](/help/demos/edit/guides/guided-demos#h_guide_settings). --- ## **How Zoom Behaves in Playback** **The camera animates in, it does not jump.** The zoom eases in when the step becomes active. **The step holds while zoomed.** Zoom has no timer of its own — the demo stays zoomed until the guide advances the way it normally would, either by viewer action or autoplay. **The guide stays attached to its target.** The tooltip or hotspot stays aligned to the element throughout the zoom and while held. **Moving on animates back.** Advancing to a step without zoom, or to another screen, eases back to normal framing. Advancing to another zoomed step moves the camera to that step's target. **Zoom works in both manual and autoplay navigation.** **The demo stays interactive.** Interactive elements remain clickable while the demo is zoomed. --- ## **Zoom in Exported Video and GIF** Zoom reproduces in exported video and GIF, including the animation and any dim. Exports record the live demo, so what you see in Preview is what lands in the file. See [**Export your demo as a video**](/help/updates/july-2026) for the export workflow. --- ## **Good to Know** **Modals do not support zoom.** Use a tooltip or hotspot when you want to zoom. **Steps without a target do not zoom.** If a step has no resolvable element — for example, an unfinished draft step — zoom simply does not apply. This is the same condition under which the guide itself would not appear. **Reduced motion is respected.** Viewers whose system settings request reduced motion get the zoomed framing without the animation, rather than a moving camera. **PDFs, images, and video are out of scope.** Zoom applies to guide steps on captured screens. --- ## **Summary** Zoom gives a guide step physical emphasis: the camera moves in on the element you are pointing at, holds while the viewer reads, and eases back out when the guide advances. Enable it per step from the settings panel, adjust the level when the default is not right, and pair it with Dim when you want a true spotlight. **Final Takeaway:** Zoom is most effective when it is used sparingly. Reserve it for the details that carry the argument, and let the rest of the demo breathe at full-screen.