Using the Ken Burns Effect with MetaSlider Slideshows

The Ken Burns effect was named after the famous documentary maker. Ken Burns uses these animated transitions to add motion to still images and bring the images to life.

It is possible to add a Ken Burns effect to your slideshows created with MetaSlider.

The first step is to find the ID number of your slideshow. There are several ways to do this, but one method is to look for the shortcode of the slideshow. In this image below, the shortcode is using the ID of 357.

The second step is to add code to your theme’s functions.php file. You can also include this code in a “Must Use Plugin”.

Click here to access the Ken Burns code on Github.

You will need to change line #3 in this code to match your slideshow ID. In the code below, the slideshow ID is 236. I will need to change it to 357 to match the ID in my example above.

Those two steps above will be enough to add the Ken Burns effect to your slideshow. If you have the correct code, your slide will now appear with the Ken Burns effect as shown in this YouTube video:

It is possible to make some modifications to this display by changing the code.

This first change will control the scale of the zoom. Lines 32 to 38 of the sample code has this code below. By default, this Ken Burns effect zooms out from 1.3 to 1. You can change the 1.3 number to modify the starting point of each image and you can change the 1 number to modify the end point of each image.

@-webkit-keyframes kb-zoom-out {
0% {
			transform: scale(1.3);
		}
		100% {
			transform: scale(1);
		}

Line 44 of the sample code looks like this:

$movements = ['center left', 'center center', 'center right', 'top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'];

This line of code contains the movements in the list below. The movements are loaded at random but you can move any that you don’t want to use.

• center left: zooms out from the center-left
• center center: zooms out from the center
• center right: zooms out from the center-right
• top left: zooms out from the top-left
• top center: zooms out from the top-center
• top right: zooms out from the top-right
• bottom left: zooms out from the bottom-left
• bottom center: zooms out from the bottom-center
• bottom right: zooms out from the bottom-right