Transitions

Add transitions between clips to create smooth visual effects. Transitions are applied to individual clips using the transition property.

Usage

{
  "asset": { "type": "image", "src": "https://example.com/photo.jpg" },
  "start": 0,
  "length": 5,
  "transition": {
    "in": "fade",
    "out": "slideLeft"
  }
}

The in transition plays at the beginning of the clip, and the out transition plays at the end. Each transition takes approximately 1 second.

Supported Transitions

Fade

Smooth opacity transition from/to transparent.

Value	Description
fade	Fade in/out

{ "transition": { "in": "fade", "out": "fade" } }

Slide

Content slides in from or out to a direction.

Value	Description
slideLeft	Slide from/to the left
slideRight	Slide from/to the right
slideUp	Slide from/to the top
slideDown	Slide from/to the bottom

{ "transition": { "in": "slideRight", "out": "slideLeft" } }

Wipe

A wipe effect that reveals or hides content progressively.

Value	Description
wipeLeft	Wipe from right to left
wipeRight	Wipe from left to right
wipeUp	Wipe from bottom to top
wipeDown	Wipe from top to bottom

{ "transition": { "in": "wipeRight", "out": "wipeLeft" } }

Zoom

Zoom in or out effect.

Value	Description
zoom	Zoom in to reveal, zoom out to hide

{ "transition": { "in": "zoom", "out": "zoom" } }

Full Example: Slideshow with Mixed Transitions

curl

curl -X POST https://api.vidiking.com/v1/render \
  -H "Authorization: Bearer $VIDIKING_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "timeline": {
      "background": "#000000",
      "tracks": [
        {
          "clips": [
            {
              "asset": { "type": "image", "src": "https://example.com/photo1.jpg" },
              "start": 0,
              "length": 4,
              "transition": { "in": "fade", "out": "slideLeft" }
            },
            {
              "asset": { "type": "image", "src": "https://example.com/photo2.jpg" },
              "start": 4,
              "length": 4,
              "transition": { "in": "slideRight", "out": "wipeLeft" }
            },
            {
              "asset": { "type": "image", "src": "https://example.com/photo3.jpg" },
              "start": 8,
              "length": 4,
              "transition": { "in": "wipeRight", "out": "zoom" }
            },
            {
              "asset": { "type": "image", "src": "https://example.com/photo4.jpg" },
              "start": 12,
              "length": 4,
              "transition": { "in": "zoom", "out": "fade" }
            }
          ]
        }
      ]
    },
    "output": { "format": "mp4", "resolution": "hd" }
  }'

Node.js

const { jobId } = await client.render({
  timeline: {
    background: '#000000',
    tracks: [
      {
        clips: [
          {
            asset: { type: 'image', src: 'https://example.com/photo1.jpg' },
            start: 0, length: 4,
            transition: { in: 'fade', out: 'slideLeft' },
          },
          {
            asset: { type: 'image', src: 'https://example.com/photo2.jpg' },
            start: 4, length: 4,
            transition: { in: 'slideRight', out: 'wipeLeft' },
          },
          {
            asset: { type: 'image', src: 'https://example.com/photo3.jpg' },
            start: 8, length: 4,
            transition: { in: 'wipeRight', out: 'zoom' },
          },
          {
            asset: { type: 'image', src: 'https://example.com/photo4.jpg' },
            start: 12, length: 4,
            transition: { in: 'zoom', out: 'fade' },
          },
        ],
      },
    ],
  },
  output: { format: 'mp4', resolution: 'hd' },
});

Python

result = client.render({
    "timeline": {
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {"type": "image", "src": "https://example.com/photo1.jpg"},
                        "start": 0, "length": 4,
                        "transition": {"in": "fade", "out": "slideLeft"},
                    },
                    {
                        "asset": {"type": "image", "src": "https://example.com/photo2.jpg"},
                        "start": 4, "length": 4,
                        "transition": {"in": "slideRight", "out": "wipeLeft"},
                    },
                    {
                        "asset": {"type": "image", "src": "https://example.com/photo3.jpg"},
                        "start": 8, "length": 4,
                        "transition": {"in": "wipeRight", "out": "zoom"},
                    },
                    {
                        "asset": {"type": "image", "src": "https://example.com/photo4.jpg"},
                        "start": 12, "length": 4,
                        "transition": {"in": "zoom", "out": "fade"},
                    },
                ]
            }
        ],
    },
    "output": {"format": "mp4", "resolution": "hd"},
})

Transition Duration

The default transition duration is 1 second. To customize the duration, use the duration property (0.5 to 2 seconds).

{
  "transition": {
    "in": "fade",
    "out": "fade",
    "duration": 1.5
  }
}

Tips

• Use matching transitions between consecutive clips (e.g., out: "slideLeft" followed by in: "slideRight") for a smooth visual flow.
• Fade transitions work well for most content. Use directional transitions (slide, wipe) for more dynamic presentations.
• Zoom transitions pair well with photo slideshows and product showcases.