Add fades and dissolves using the Edit API

Once you understand the basics of the Shotstack cloud video editing API, you'll want to add some nice touches to your videos. One of the improvements you can start with is adding transitions between your clips. The most common transition in video and film making is the dissolve, sometimes referred to as a fade.

What is a dissolve in video editing?

The dissolve is a smooth transition between two shots or scenes - one clip increases its transparency until the second clip is fully visible.

Dissolves are also known as lap dissolves or mixes, but you might also be familiar with the term fade, fade in or fade out.

Dissolve vs fade

When referring to a dissolve, both shots will be visible for a short time as one of the clips fades into the next one with no color pause between them. A fade involves showing the black color as a separator between two shots.

Playing with the fade effect we have 2 variations for the transition between 2 clips:

• fade into the next video
• fade to and from black

Dissolve	Fade
Dissolve from one clip to another	Fade from one clip to black

The fade transition

With the Shotstack video editing API, the building block of fades and dissolves is the fade transition. The fade transition modifies the opacity of a clip over time.

There are two types of fades we can use in our videos:

• in, placed at the start of the clip, is a 1 second decrease in the opacity from being fully transparent to 100% visible.
• out, placed at the end of the clip, is a 1 second increase in the opacity from being fully transparent to 100% visible.

The Shotstack API supports defining in and out transitions for a clip. Even if it's simply called fade, the API will know to fade in for the in transition and fade out for the out transition.

To add a fade transition, you use the clips transition parameter like this:

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

How to create a dissolve transition

To obtain the dissolve effect we can simply set the out transition to fade and overlap our videos for 1 second, so the clip will fade out to the next shot, revealing it gradually.

Here is how 3 clips would look like on a timeline to obtain the dissolve effect:

In order to obtain the dissolve effect we want to layer the tracks on top of each other and make sure they overlap for 1 second. We use a fade out at the end of the clips so they dissolve and show the next one. The final clip will actually fade to the background color, giving us a nice outro.

When shooting and editing videos always remember to leave some time for the transitions. In our case, we have 3 clips having a duration of 5 seconds each, but we're overlapping them so we end up with a 13 second clip.

If you'd added a fade in and fade out transition to a 2 seconds clip, the user will barely understand the visual.

Check out the video we prepared to illustrate the dissolve transition:

The intro clip will fade from black and on exit it fades out. The second clip will start 1 second earlier before the first clip ends so the dissolve effect can reveal it. Applying the same fade effect for the out transition we're revealing the third clip, which also starts 1 second before the second clip ends. Finally, the third clip will dissolve to black.

The JSON for this video is below:

{
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/unminus/palmtrees.mp3",
            "effect": "fadeOut"
        },
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/beach-cliffs.mp4"
                        },
                        "start": 0,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/road.mp4"
                        },
                        "start": 4,
                        "length": 5,
                        "transition": {
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/table-mountain.mp4"
                        },
                        "start": 8,
                        "length": 5,
                        "transition": {
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}

How to fade to and from black

The second variation involves dissolving the first clip to black and then fading in the next one. In this scenario the clips do not overlap anymore and the background color acts as a small pause in the narrative of your video. This method is also called dissolve to black or dip to black.

However, this is flexible, as you have full control on the background color of the videos so you can fade to any color you want. Simply changing the background property for the timeline to a hexadecimal value of your choice will give you the base color for the transition. This will also impact your video's intro and outro.

In contrast to the previous transition, we'll end up with a 15 seconds clip as there is no overlap. The other change we need to make is add the fade effect to both in and out transitions for each of our clips.

{
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/unminus/palmtrees.mp3",
            "effect": "fadeOut"
        },
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/beach-cliffs.mp4"
                        },
                        "start": 0,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/road.mp4"
                        },
                        "start": 5,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/table-mountain.mp4"
                        },
                        "start": 10,
                        "length": 5,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}

Take a look at the transitions between the scenes:

Closing thoughts

The Shotstack API gives you full flexibility for creating your videos. For example, the clips can hold video scenes, as well as images, so you can easily transition from a static image to a video clip or vice versa by replacing the video asset with an image:

"asset": {
    "type": "image",
    "src": "https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/examples/images/pexels/pexels-photo-712850.jpeg"
},

The transition parameter also supports speed variations which make the transition either faster or slower, you can try fadeSlow for a 2 second fade transition or fadeFast for a 0.5 second transition:

"transition": {
    "in": "fadeSlow",
    "out": "fadeFast"
}

By playing around with these different speeds you can set the mood and tempo of your video and perform a simple, elegant and classic transition effect.