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 ·

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.

    Bannerbear Beginner Guide: How to Start Generating Images Dynamically in JavaScript with Bannerbear

    If you want to integrate dynamic image generation into your JavaScript project, this article is for you! Learn how to do it effortlessly with Bannerbear—we’ll walk you through the entire process, from setup and implementation to achieving the final result.

    How to Automatically Create Eye-Catching Images for Your App's Link Sharing Using Bannerbear (Node.js)

    Want to make your app’s link sharing stand out? Learn how to use Bannerbear to automatically create eye-catching images that boost click-through rates! This tutorial walks you through building a backend service with Node.js to automatically generate custom images based on dynamic data.

    How to Auto-Generate Social Media Posts For a Business Conference Using Bannerbear (Node.js): Part 2

    In Part 2 of our series on auto-generating social media posts for a business conference using Bannerbear, we'll be creating posts for panel sessions. The image for each post will feature key details like the session topic, moderator, and panelists.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

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