Last updated: Jan-27-2023
On this page:
Use the zoompan effect to apply zooming and/or panning to an image, resulting in an animated image, using the
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
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
Automatically deliver the optimal format
|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
|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
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.|
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
- 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 BasicsLearn the basics of a transformation URL
Gravity Crops for ImagesIndicate which areas to keep when cropping
Complex TransformationsCombine transformations to generate a 3D canvas
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.