How to create typewriter effect

Is it possible to use shotstack to create typewriter effect such as this?

Potentially something like this:

{
    "output": {
        "format": "mp4",
        "size": {
            "width": 500,
            "height": 500
        }
    },
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-content.s3.amazonaws.com/rocky.mp3",
            "effect": "fadeInFadeOut"
        },
        "fonts": [
            {
                "src": "https://templates.shotstack.io/basic/asset/font/notosans-bold.ttf"
            }
        ],
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "height": 30,
                            "width": 450,
                            "type": "html",
                            "html": "<div>The world ain't all sunshine and rainbows.</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #FFF; font-size: 18px; }"
                        },
                        "start": 0,
                        "length": 5,
                        "position": "top",
                        "offset": {
                            "y": -0.03
                        }
                    }
                ]
            },
    		{
                "clips": [
                    {
                        "asset": {
                            "height": 30,
                            "width": 450,
                            "type": "html",
                            "html": "<div>Rocky Balboa</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #FFF; font-size: 22px; }"
                        },
                        "start": 0,
                        "length": 5,
                        "position": "top",
                        "offset": {
                            "y": -0.09
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "start": 3.72,
                        "length": 1.28,
                        "position": "center",
                        "asset": {
                            "height": 350,
                            "width": 450,
                            "html": "<div><span>Let me tell you something you already know</span></div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #dfe4ea; font-size: 55px; } span {color: #FFF;}",
                            "type": "html"
                        },
                        "offset": {
                            "y": -0.1
                        }
                    }
                ]
            },
			{
                "clips": [
                    {
                        "start": 3.44,
                        "length": 1.56,
                        "position": "center",
                        "asset": {
                            "height": 350,
                            "width": 450,
                            "html": "<div><span>Let me tell you something you already</span> know</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #dfe4ea; font-size: 55px; } span {color: #FFF;}",
                            "type": "html"
                        },
                        "offset": {
                            "y": -0.1
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "start": 3.34,
                        "length": 1.66,
                        "position": "center",
                        "asset": {
                            "height": 350,
                            "width": 450,
                            "html": "<div><span>Let me tell you something you</span> already know</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #dfe4ea; font-size: 55px; } span {color: #FFF;}",
                            "type": "html"
                        },
                        "offset": {
                            "y": -0.1
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "start": 2.97,
                        "length": 2.03,
                        "position": "center",
                        "asset": {
                            "height": 350,
                            "width": 450,
                            "html": "<div><span>Let me tell you something</span> you already know</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #dfe4ea; font-size: 55px; } span {color: #FFF;}",
                            "type": "html"
                        },
                        "offset": {
                            "y": -0.1
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "start": 2.86,
                        "length": 2.14,
                        "position": "center",
                        "asset": {
                            "height": 350,
                            "width": 450,
                            "html": "<div><span>Let me tell you</span> something you already know</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #dfe4ea; font-size: 55px; } span {color: #FFF;}",
                            "type": "html"
                        },
                        "offset": {
                            "y": -0.1
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "start": 2.67,
                        "length": 2.33,
                        "position": "center",
                        "asset": {
                            "height": 350,
                            "width": 450,
                            "html": "<div><span>Let me tell</span> you something you already know</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #dfe4ea; font-size: 55px; } span {color: #FFF;}",
                            "type": "html"
                        },
                        "offset": {
                            "y": -0.1
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "start": 2.59,
                        "length": 2.41,
                        "position": "center",
                        "asset": {
                            "height": 350,
                            "width": 450,
                            "html": "<div><span>Let me</span> tell you something you already know</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #dfe4ea; font-size: 55px; } span {color: #FFF;}",
                            "type": "html"
                        },
                        "offset": {
                            "y": -0.1
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "start": 2.44,
                        "length": 2.56,
                        "position": "center",
                        "asset": {
                            "height": 350,
                            "width": 450,
                            "html": "<div><span>Let</span> me tell you something you already know</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #dfe4ea; font-size: 55px; } span {color: #FFF;}",
                            "type": "html"
                        },
                        "offset": {
                            "y": -0.1
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "start": 1.5,
                        "length": 3.5,
                        "position": "center",
                        "asset": {
                            "height": 350,
                            "width": 450,
                            "html": "<div>Let me tell you something you already know</div>",
                            "css": "div { line-height: 125%; font-family: \"Noto Sans\"; font-weight: 600; text-align: left; color: #dfe4ea; font-size: 55px; } span {color: #FFF;}",
                            "type": "html"
                        },
                        "offset": {
                            "y": -0.1
                        },
                        "transition": {
                            "in": "fadeFast"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "start": 0,
                        "length": 5,
                        "asset": {
                            "type": "image",
                            "src": "https://media.discordapp.net/attachments/915787846063915052/920466103535284224/rocky.png"
                        }
                    }
                ]
            }
        ]
    }
}

Ok, I see what you are doing! Let me play with it. Thank you!

1 Like