Zoompan effect (video tutorial)

Last updated: Jan-27-2023

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?

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 most 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:

Copy to clipboard
const imgSrc = cld.image(image.image)
    .resize(`w_${image.width},h_${image.height}`)
    .effect(e_zoompan:to_(g_auto))
    .effect(e_loop)
    .format(auto:animated)
    .delivery(q_auto)
    .toURL();

Keep learning

Related topics

  • Watch more Dev Hints videos on the Cloudinary YouTube channel.
  • Read about how to create animated images using the zoompan effect and see several examples of how it can be used.
  • Look up zoompan in the Transformation reference for all the details you need to know to implement all possible variations of the zoompan effect, including syntax details and more practical code examples.
  • Read this blog post to get ideas for how this simple transformation can make your images come alive.

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

Transformation Basics
Learn the basics of a transformation URL
Gravity Crops for Images
Indicate which areas to keep when cropping
Complex Transformations
Combine transformations to generate a 3D canvas

 

Cloudinary Academy

 

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!

Rate this page: