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