How to Create Videos with a Ken Burns Effect using FFmpeg

In this article we learn how to use FFmpeg to take a static image and apply a smooth Ken Burns style effect to it.
by Jon Yongfook · May 2022

Contents

    A common operation in FFmpeg is turning static images into a slideshow, displaying one image after another. We have an article on turning static images into a slideshow if that's what you need to create.

    But how can we make these slideshows a bit more visually appealing? One way would be to apply a Ken Burns style effect which pans and zooms an image to slowly focus on a certain point.

    Example

    Here's a super simple example. Lets take this static image:

    And lets apply an FFmpeg command to turn it into a video with a slow zoom effect:

    Makes the image a bit more dramatic and you can tweak settings such as the duration, the zoom amount and the zoom point. Lets begin!

    Ken Burns Zoom to Top Left

    The zoom effect uses basic X and Y coordinates to define the zoom point. So the simplest version of the zoom effect is just to zoom into the top left corner (0,0).

    ffmpeg -loop 1 -i photo.jpg -y -filter_complex [0]scale=1200:-2,setsar=1:1[out];[out]crop=1200:670[out];[out]scale=8000:-1,zoompan=z='zoom+0.001':x=0:y=0:d=250:s=1200x670:fps=25[out] -acodec aac -vcodec libx264 -map [out] -map 0:a? -pix_fmt yuv420p -r 25 -t 10 video.mp4

    You may notice there are quite a few different options in this command. Here's what they all mean, in order:

    • scale=1200:-2 here we are simply scaling the image to the desired width according to our final movie size which will be 1200x670.
    • crop=1200:670 then we crop to the desired size.
    • scale=8000:-1 this is optional but without this you may find that your zoom effect is very jerky, this helps to smooth it out.
    • zoompan=z='zoom+0.001':x=0:y=0 this is the actual zoompan effect that we are using, zooming into the top left corner (0,0). You can tweak the 0.001 zoom factor to make the zoom effect faster or slower.

    Lets adjust the x and y coordinates to zoom into different areas of the image.

    Ken Burns Zoom to Top

    Zooming to the top center means setting the Y coordinate to 0, and using the input width divided by the current zoom ratio, divided by 2 (the middle point).

    ffmpeg -loop 1 -i photo.jpg -y -filter_complex [0]scale=1200:-2,setsar=1:1[out];[out]crop=1200:670[out];[out]scale=8000:-1,zoompan=z='zoom+0.001':x=iw/2-(iw/zoom/2):y=0:d=250:s=1200x670:fps=25[out] -acodec aac -vcodec libx264 -map [out] -map 0:a? -pix_fmt yuv420p -r 25 -t 10 video.mp4

    Ken Burns Zoom to Center

    Zooming to the center means doing the same as above but for both X and Y coordinates; using the input width/height divided by the current zoom ratio, divided by 2 (the middle point).

    ffmpeg -loop 1 -i photo.jpg -y -filter_complex [0]scale=1200:-2,setsar=1:1[out];[out]crop=1200:670[out];[out]scale=8000:-1,zoompan=z='zoom+0.001':x=iw/2-(iw/zoom/2):y=ih/2-(ih/zoom/2):d=250:s=1200x670:fps=25[out] -acodec aac -vcodec libx264 -map [out] -map 0:a? -pix_fmt yuv420p -r 25 -t 10 video.mp4

    Use the Bannerbear Video API

    If you need to perform these kinds of FFmpeg operations in the cloud, you can try using the Bannerbear Video API which simplifies this FFmpeg command line experience and makes it more developer-friendly for performing common tasks like adding a ken burns effect to static images or videos, turning images into slideshows and more.

    About the authorJon Yongfook@yongfook
    Jon is the founder of Bannerbear. He has worked as a designer and programmer for 20 years and is fascinated by the role of technology in design automation.

    How to Use the Bannerbear WordPress Plugin to Generate Dynamic Open Graph Images

    The Bannerbear WordPress Plugin is here! Learn how to add the plugin to WordPress and set up a Signed URL to create custom images automatically for your website.

    Top 5 Automated UI Testing Tools to Make Testing Faster in 2022

    Speed is key in 2022, test and ship fast. These five tools will get your tests running faster than ever. Find out more about how they can help to make sure your application functions as expected in this article.

    How to Build a Video Thumbnail Generator Tool Using React and Bannerbear

    Improve users' workflow by integrating a video thumbnail generator that adds text to an image uploaded by them using Bannerbear API.

    Follow the Journey

    Sign up for our once a fortnight newsletter update on new Bannerbear features and our business journey

    How to Create Videos with a Ken Burns Effect using FFmpeg
    How to Create Videos with a Ken Burns Effect using FFmpeg