Image & Video APIs

Zoompan effect (video tutorial)

Last updated: Nov-24-2025

Overview

Use the zoompan effect to apply zooming and/or panning to an image, resulting in an animated image, using the @cloudinary/url-gen library.

On this page:

Overview
Video tutorial
Tutorial contents
Keep learning

This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

View the code

You can find the code from this tutorial in GitHub.

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

What's the zoompan effect?

Jump to this spot in the video 0:04	You can animate your static images to make them more visually interesting by using an effect invented by Ken Burns, which we call the `zoompan` effect. This effect creates motion by zooming and panning in and out of the image while optionally moving from one place on the image to another. You can apply this effect with Cloudinary using a simple transformation.

Add a basic zoompan effect

Jump to this spot in the video 0:36	Animate your images with the zoompan effect by adding the e_zoompan transformation. You can add this as a single transformation, or you can chain it to others.

Convert to an animated image format

Jump to this spot in the video 0:44	In order for the zoompan to work, the image you're delivering needs to be an animated image format. To make sure that's the case, convert the image to a GIF by setting the format to `gif` (`.format('gif')`).

Automatically deliver the optimal format

Jump to this spot in the video 1:00	You can instruct Cloudinary to determine the optimal animated image format that's supported by the requesting browser and apply it to your image. Add the automatic format transformation. In the example shown, WebP is the better format, as opposed to a larger GIF.

Loop the animation

Jump to this spot in the video 1:20	You can make your animation loop, as opposed to animating once and then stopping. Add the loop effect to your transformation for the zoom effect to loop continuously.

Zoom to the subject of the image

Jump to this spot in the video 1:35	Instead of just zooming into the center of the image, you can have the animation zoom into the subject. Instruct Cloudinary to automatically determine the most important area in the image and then move towards it while zooming, by specifying `e_zoompan:to_(g_auto)`.

Add feature enhancements

Jump to this spot in the video 2:08	There are many other techniques you can use to enhance the basic zoompan effect, such as setting the location in the image where zooming starts from. To find out how to implement these, see the Transformation reference.

Code sample

The following code is used in this tutorial to apply the Ken Burns effect to zoom and pan on an image with auto formatting and continuous looping using the @cloudinary/url-gen library:

Keep learning

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page:

Zoompan effect (video tutorial)

Transformation Basics

Gravity Crops for Images

Complex Transformations

Error