---
title: "Zoom"
canonical_url: https://docs.zvid.io/docs/structure/properties/zoom/
source: docs/structure/properties/zoom.md
content_revision: 6338386a1dd87e4a
---

# Zoom

`zoom` applies a center-based Ken Burns zoom effect during the element's visible
duration. `zoom: true` uses the default depth of `1.2`; pass an object to choose
how far the zoom ends.

```typescript
zoom?: boolean | { depth?: number };
```

`depth` is the final scale factor reached at the end of the element's visible
window, between `1` and `10` (default `1.2`).

`zoom` is supported for `IMAGE`, `VIDEO`, and `GIF` elements. It is not available
on `TEXT`/HTML elements (use a CSS `transform: scale(...)` animation through
[`customCode`](https://docs.zvid.io/docs/structure/text-elements/#native-css--javascript-customcode) instead) or
on the deprecated `SVG` element.

## Example

Visual element fragments for a video project's `payload.visuals`. Replace
illustrative asset URLs before rendering; the recorded preview uses a separate
fixture to demonstrate the effect. Omit `zoom`, or set it to `false`, to keep
the original scale.

```json
{
  "type": "IMAGE",
  "src": "https://cdn.example.com/photo.jpg",
  "width": 1280,
  "height": 720,
  "zoom": true
}
```

With an explicit depth (ends at 1.5× zoom):

```json
{
  "type": "VIDEO",
  "src": "https://cdn.example.com/clip.mp4",
  "resize": "cover",
  "zoom": { "depth": 1.5 }
}
```

## Used By

- [Image Elements](https://docs.zvid.io/docs/structure/image-elements/)
- [Video Elements](https://docs.zvid.io/docs/structure/video-elements/)
- [GIF Elements](https://docs.zvid.io/docs/structure/gif-elements/)


zoom: { depth: 1.35 } — the Ken Burns effect

[Watch rendered example](https://cdn.zvid.io/library/docs/zoom-kenburns.mp4)