Zoompan effect (video tutorial)

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.

Video tutorial

Tutorial contents

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

What's the zoompan effect?

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

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

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

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

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

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

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.