How to Turn Images Into Slideshow Videos using Node.js?

An image slideshow is a great way to showcase multiple pictures in video format. It's commonly used to generate enticing social media videos based on photographs, like real estate listings, a series of pictures, or an image collage. You can turn images into slideshows with JavaScript and a video editing API. Here's how to do that using Node.js in just a few lines of code:

Input Code
const Creatomate = require('creatomate');
const client = new Creatomate.Client('Your API Key');

client.render({
  source: new Creatomate.Source({
    outputFormat: 'mp4',
    width: 1920,
    height: 1080,
    elements: [

      // Image 1
      new Creatomate.Image({
        source: 'https://cdn.creatomate.com/demo/living-room.jpg',
        track: 1,
        duration: 5,
        clip: true,
        animations: [
          new Creatomate.Scale({
            easing: 'linear',
            scope: 'element',
            startScale: '120%',
            fade: false,
          }),
        ],
      }),

      // Image 2
      new Creatomate.Image({
        source: 'https://cdn.creatomate.com/demo/bathroom.jpg',
        track: 1,
        duration: 5,
        clip: true,
        animations: [
          new Creatomate.Slide({
            time: 'start',
            duration: 1,
            easing: 'cubic-in-out',
            transition: true,
            fade: false,
            direction: '180°',
          }),
          new Creatomate.Scale({
            easing: 'linear',
            scope: 'element',
            startScale: '120%',
            fade: false,
          }),
        ],
      }),

      // Image 3
      new Creatomate.Image({
        source: 'https://cdn.creatomate.com/demo/kitchen.jpg',
        track: 1,
        duration: 5,
        clip: true,
        animations: [
          new Creatomate.Slide({
            time: 'start',
            duration: 1,
            easing: 'cubic-in-out',
            transition: true,
            fade: false,
            direction: '180°',
          }),
          new Creatomate.Scale({
            easing: 'linear',
            scope: 'element',
            startScale: '120%',
            fade: false,
          }),
        ],
      }),

      // Image 4
      new Creatomate.Image({
        source: 'https://cdn.creatomate.com/demo/house.jpg',
        track: 1,
        duration: 4,
        clip: true,
        animations: [
          new Creatomate.Slide({
            time: 'start',
            duration: 1,
            easing: 'cubic-in-out',
            transition: true,
            fade: false,
            direction: '180°',
          }),
          new Creatomate.Scale({
            easing: 'linear',
            scope: 'element',
            startScale: '120%',
            fade: false,
          }),
        ],
      }),

    ],
  }),
}).then((renders) => {
  console.log(renders);
});
Output Video

How it works: For this example, we'll be using the Creatomate package from NPM. This library allows us to create a slideshow entirely with JavaScript through a component-based architecture. It uses a JSON-based format to put together a scene where multiple photos appear for a short period of time. The photos smoothly transition from one to another, creating a visually appealing slide effect.

The "duration" property ensures that each photo remains visible for 5 seconds. Additionally, you can improve the slideshow's aesthetic appeal by adding a zoom effect with each image, often referred to as the Ken Burns effect, using the "animations" property. You can customize these animations and adjust their settings to achieve a variety of different effects.

To display the images sequentially, simply place them all on track number "1". To overlay a logo on top of the slideshow, you can place it on a separate track and position it in front. For more advanced scenarios, check out the online code video editor below. It allows you to design your own slideshow videos, then export them as JSON to use in your Node.js application.

Edit this Code Example in the Video Editor

Easily design your own video templates using the online editor. Then, export your templates as JSON and integrate them into your Node.js application to create any kind of video – completely through code.

Related Node.js Video Editing Questions

Start automating today

Start with a full-featured trial with 50 credits – no credit card required.