Transitions

Slide one clip over another

The new clip slides in over the old one, which stays where it is. Compare it with push, where both move together.

Shown on Two drone shots of one coast

After · rendered from the request below

The entry

Place it between two clips on a track.

{
  "type": "transition",
  "transition": "slide",
  "direction": "left",
  "duration": 0.8
}

Every setting and default is in the docs

Run it

The whole request behind the render above. Paste it as it is, or swap the file for your own.

job.ts
import { createClient, outputUrl } from "@rendobar/sdk";


const rb = createClient({ apiKey: process.env.RENDOBAR_API_KEY });


const job = await rb.jobs.run({
  type: "compose",
  params: {
    schemaVersion: 1,
    output: {
      format: "mp4",
      resolution: {
        width: 960,
        height: 540
      }
    },
    timeline: {
      tracks: [
        {
          clips: [
            {
              asset: {
                type: "video",
                src: "https://cdn.rendobar.com/compose/showcase/media/coast-a.mp4"
              },
              start: 0,
              length: 5
            },
            {
              type: "transition",
              transition: "slide",
              direction: "left",
              duration: 0.8
            },
            {
              asset: {
                type: "video",
                src: "https://cdn.rendobar.com/compose/showcase/media/coast-b.mp4"
              },
              length: 4
            }
          ]
        }
      ]
    }
  },
});


console.log(outputUrl(job));

Install with npm i @rendobar/sdk. jobs.run() submits and waits, so it returns the finished job in one call.

terminal
curl https://api.rendobar.com/jobs \
  -H "Authorization: Bearer $RENDOBAR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"type":"compose","params":{"schemaVersion":1,"output":{"format":"mp4","resolution":{"width":960,"height":540}},"timeline":{"tracks":[{"clips":[{"asset":{"type":"video","src":"https://cdn.rendobar.com/compose/showcase/media/coast-a.mp4"},"start":0,"length":5},{"type":"transition","transition":"slide","direction":"left","duration":0.8},{"asset":{"type":"video","src":"https://cdn.rendobar.com/compose/showcase/media/coast-b.mp4"},"length":4}]}]}}}'

Returns immediately with a job id. Poll GET /jobs/{id} or register a webhook rather than blocking on the request.

Questions

What does the slide transition do in compose?

The new clip slides in over the old one, which stays where it is. Compare it with push, where both move together.

How do I add slide to a video with an API?

Send a compose job to the Rendobar API with this entry in the timeline: {"type":"transition","transition":"slide","direction":"left","duration":0.8}. Place it between two clips on a track. The request on this page is complete and renders as shown.

Footage and sound

More features

Crossfade One picture dissolves into the next. The everyday soft join, and the only decorative one worth using often. Fade The picture dips through black between the clips, so the cut reads as a chapter break rather than a join. Push The next clip pushes the last one out of frame, both moving together. Wipe Reveal the next clip in place through a growing circle. Nothing moves: the new clip is uncovered. Zoom The frame scales into the next clip. Energetic, and worth keeping to section boundaries. Color A warm cinematic grade: the light pulled towards gold, contrast and color lifted a little, skin left believable.

See all 117 features →