CTRL + K

Generate an image slideshow video

What we're going to build

In this example, we are going to build a simple video slideshow from a collection of images. Keeping things simple, we're only going to use images for now, but you can compose each slide individually by replacing the images with scene compositions.

Instructions

1. Add the images

Let's display each image element for 5 seconds, and make sure they are displayed sequentially by placing them on the same track.

1{
2  "output_format": "mp4",
3  "width": 1280,
4  "height": 720,
5  "elements": [
6    {
7      "type": "image",
8      "source": "https://creatomate.com/files/assets/c43e2d38-a5e6-49d0-a84a-58ee13109097.jpg",
9      "track": 1,
10      "duration": 5
11    },
12    {
13      "type": "image",
14      "source": "https://creatomate.com/files/assets/09ab8999-d5e3-420b-9259-1ad85f1a7cef.jpg",
15      "track": 1,
16      "duration": 5
17    },
18    {
19      "type": "image",
20      "source": "https://creatomate.com/files/assets/10158a94-e644-472f-ae43-07a802da70ff.jpg",
21      "track": 1,
22      "duration": 5
23    },
24    {
25      "type": "image",
26      "source": "https://creatomate.com/files/assets/8f3fa3ad-db05-414b-8599-333ca712ac39.jpg",
27      "track": 1,
28      "duration": 5
29    }
30  ]
31}

2. Set transition effects

Next, we will add a transition between each image. We use the slide transition effect with cubic-in-out easing, but there are many other animations available that you can try out in the template editor.

1{
2  "output_format": "mp4",
3  "width": 1280,
4  "height": 720,
5  "elements": [
6    {
7      "type": "image",
8      "source": "https://creatomate.com/files/assets/c43e2d38-a5e6-49d0-a84a-58ee13109097.jpg",
9      "track": 1,
10      "duration": 5
11    },
12    {
13      "type": "image",
14      "source": "https://creatomate.com/files/assets/09ab8999-d5e3-420b-9259-1ad85f1a7cef.jpg",
15      "track": 1,
16      "duration": 5,
17      "animations": [
18        {
19          "duration": 1,
20          "easing": "cubic-in-out",
21          "transition": true,
22          "type": "slide",
23          "fade": false,
24          "direction": "180°"
25        }
26      ]
27    },
28    {
29      "type": "image",
30      "source": "https://creatomate.com/files/assets/10158a94-e644-472f-ae43-07a802da70ff.jpg",
31      "track": 1,
32      "duration": 5,
33      "animations": [
34        {
35          "duration": 1,
36          "easing": "cubic-in-out",
37          "transition": true,
38          "type": "slide",
39          "fade": false,
40          "direction": "90°"
41        }
42      ]
43    },
44    {
45      "type": "image",
46      "source": "https://creatomate.com/files/assets/8f3fa3ad-db05-414b-8599-333ca712ac39.jpg",
47      "track": 1,
48      "duration": 5,
49      "animations": [
50        {
51          "duration": 1,
52          "easing": "cubic-in-out",
53          "transition": true,
54          "type": "slide",
55          "fade": false,
56          "direction": "0°"
57        }
58      ]
59    }
60  ]
61}

3. Add zoom-out effect

In order to zoom-out on each image, we're going to add another animation; the scale animation. Using start_scale and end_scale, we'll zoom from 120% to 100%. By default the scale animation scales the element itself, but here we want to scale the image content and crop it back to the borders of the element, creating the zoom-out effect we are looking for. Therefore, we set scope to "element" and the element's clip to "true". Done!

1{
2  "output_format": "mp4",
3  "width": 1280,
4  "height": 720,
5  "elements": [
6    {
7      "type": "image",
8      "source": "https://creatomate.com/files/assets/c43e2d38-a5e6-49d0-a84a-58ee13109097.jpg",
9      "track": 1,
10      "duration": 5,
11      "clip": true,
12      "animations": [
13        {
14          "easing": "linear",
15          "type": "scale",
16          "scope": "element",
17          "start_scale": "120%",
18          "end_scale": "100%",
19          "fade": false
20        }
21      ]
22    },
23    {
24      "type": "image",
25      "source": "https://creatomate.com/files/assets/09ab8999-d5e3-420b-9259-1ad85f1a7cef.jpg",
26      "track": 1,
27      "duration": 5,
28      "clip": true,
29      "animations": [
30        {
31          "duration": 1,
32          "easing": "cubic-in-out",
33          "transition": true,
34          "type": "slide",
35          "fade": false,
36          "direction": "180°"
37        },
38        {
39          "easing": "linear",
40          "type": "scale",
41          "scope": "element",
42          "start_scale": "120%",
43          "end_scale": "100%",
44          "fade": false
45        }
46      ]
47    },
48    {
49      "type": "image",
50      "source": "https://creatomate.com/files/assets/10158a94-e644-472f-ae43-07a802da70ff.jpg",
51      "track": 1,
52      "duration": 5,
53      "clip": true,
54      "animations": [
55        {
56          "duration": 1,
57          "easing": "cubic-in-out",
58          "transition": true,
59          "type": "slide",
60          "fade": false,
61          "direction": "90°"
62        },
63        {
64          "easing": "linear",
65          "type": "scale",
66          "scope": "element",
67          "start_scale": "120%",
68          "end_scale": "100%",
69          "fade": false
70        }
71      ]
72    },
73    {
74      "type": "image",
75      "source": "https://creatomate.com/files/assets/8f3fa3ad-db05-414b-8599-333ca712ac39.jpg",
76      "track": 1,
77      "duration": 5,
78      "clip": true,
79      "animations": [
80        {
81          "duration": 1,
82          "easing": "cubic-in-out",
83          "transition": true,
84          "type": "slide",
85          "fade": false,
86          "direction": "0°"
87        },
88        {
89          "easing": "linear",
90          "type": "scale",
91          "scope": "element",
92          "start_scale": "120%",
93          "end_scale": "100%",
94          "fade": false
95        }
96      ]
97    }
98  ]
99}

Overview

Blur video background