Creatomate
API & Integration -> Quick Start

Generate an image slideshow

This example shows how to generate a slideshow based on a series of images using RenderScript.

Step 1
Define an array of images

Define one or multiple images. Place them all on the same track to have them show up in series.
curl -X POST https://api.creatomate.com/v2/renders \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_API_KEY_HERE" \
     -d '{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/living-room.jpg",
      "track": 1,
      "duration": 5
    },
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/bathroom.jpg",
      "track": 1,
      "duration": 5
    },
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/kitchen.jpg",
      "track": 1,
      "duration": 5
    }
  ]
}'

Step 2
Add transition animations

To insert a transition between each image, define an animation in the image that is transitioned to. Each animation is highly customizable. Use the editor to explore each animation setting.
curl -X POST https://api.creatomate.com/v2/renders \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_API_KEY_HERE" \
     -d '{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/living-room.jpg",
      "track": 1,
      "duration": 5
    },
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/bathroom.jpg",
      "track": 1,
      "duration": 5,
      "animations": [
        {
          "duration": 1,
          "easing": "cubic-in-out",
          "transition": true,
          "type": "slide",
          "fade": false,
          "direction": "180°"
        }
      ]
    },
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/kitchen.jpg",
      "track": 1,
      "duration": 5,
      "animations": [
        {
          "duration": 1,
          "easing": "cubic-in-out",
          "transition": true,
          "type": "slide",
          "fade": false,
          "direction": "180°"
        }
      ]
    }
  ]
}'

Step 3
Add a zoom-out effect

To add zoom effect on each image, add another item to the 
animations
array. The 
scale
animation alters the size of the element. Using 
start_scale
and 
end_scale
, add a zoom effect 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. For that reason, set the scope to 
element
and the element's clip to 
true
.
curl -X POST https://api.creatomate.com/v2/renders \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_API_KEY_HERE" \
     -d '{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/living-room.jpg",
      "track": 1,
      "duration": 5,
      "clip": true,
      "animations": [
        {
          "easing": "linear",
          "type": "scale",
          "scope": "element",
          "start_scale": "120%",
          "end_scale": "100%",
          "fade": false
        }
      ]
    },
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/bathroom.jpg",
      "track": 1,
      "duration": 5,
      "clip": true,
      "animations": [
        {
          "duration": 1,
          "easing": "cubic-in-out",
          "transition": true,
          "type": "slide",
          "fade": false,
          "direction": "180°"
        },
        {
          "easing": "linear",
          "type": "scale",
          "scope": "element",
          "start_scale": "120%",
          "end_scale": "100%",
          "fade": false
        }
      ]
    },
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/kitchen.jpg",
      "track": 1,
      "duration": 5,
      "clip": true,
      "animations": [
        {
          "duration": 1,
          "easing": "cubic-in-out",
          "transition": true,
          "type": "slide",
          "fade": false,
          "direction": "180°"
        },
        {
          "easing": "linear",
          "type": "scale",
          "scope": "element",
          "start_scale": "120%",
          "end_scale": "100%",
          "fade": false
        }
      ]
    }
  ]
}'

Related resources