Blinking/flickering/flashing text and images

Hi, I’m testing the API using Node SDK with text overlaid on top of an image, but all the text and images are blinking. Is there a specific order that I need to send the clips into the track to prevent this type of behaviour?

This normally happens when the images and text are all on the same track and the start and end times overlap. The API can’t determine which clip to show so it flickers between them.

The solution is to make use of tracks, see the API reference here: https://shotstack.io/docs/api/#tocstrack.

Take a look at the following video:

You can see how the second part of the clip has been broken up into two clips, allowing the title to sit on top of the video:

{
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/music/motions.mp3",
            "effect": "fadeInFadeOut"
        },
        "background": "#000000",
        "tracks": [
        	{
                "clips": [
                    {
                        "asset": {
                            "type": "title",
                            "text": "FLICKERING",
                            "style": "minimal",
                            "size": "small",
                            "position": "bottom"
                        },
                        "start": 0,
                        "length": 6,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/sunset-beach-2.mp4"
                        },
                        "start": 0,
                        "length": 6,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "title",
                            "text": "NOT FLICKERING",
                            "style": "minimal",
                            "size": "small",
                            "position": "bottom"
                        },
                        "start": 6,
                        "length": 6,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/sunset-beach-2.mp4"
                        },
                        "start": 6,
                        "length": 6,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ],
        "cache": false
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}