Dolly Zoom (Vertigo Shot)

Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) — a flat element gains nothing from this move.

Add it to your video

It runs for 4 seconds at 1920×1080. Paste this into your composition:

index.html

<div
  data-composition-id="camera-dolly-zoom"
  data-composition-src="compositions/camera-dolly-zoom.html"
  data-start="0"
  data-duration="4"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Move it in time with data-start. Put it on a different timeline row with data-track-index. See data attributes for the rest.

Variables

Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element:

Variable	Default	Accepts
`direction`	`out`	`out`, `in`
`strength`	`2`	1.1 to 4, step 0.1
`subjectDistance`	`1400`	600px to 3000px, step 50px
`easing`	`power2.inOut`	`none`, `sine.inOut`, `power1.inOut`, `power2.inOut`, `power3.inOut`

Set them with data-variable-values on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one:

<div
  data-composition-id="camera-dolly-zoom"
  data-composition-src="compositions/camera-dolly-zoom.html"
  data-variable-values='{"direction":"out","strength":2,"subjectDistance":1400,"easing":"power2.inOut"}'
></div>

Tagged camera depth 3d cinematic.

Catalog

Dolly Zoom (Vertigo Shot)

Add it to your video

Variables

Related topics