Zoom-in text animation component
Use this text animation component to show text that zooms in.
Demo:
advanced/000 component schema
This is a simplified schema of a advanced/000
component element:
{
"type": "component",
"component": "advanced/000",
"settings": {
"animation": {}
}
}
Check the full specification of the Component schema in the API documentation.
Settings property for advanced/000
This component accepts the following object items in the settings
property:
animation object
Defines the animation properties
Check all available object properties here.
Object property
Default value
text
"Zoom-out text"
It can be an array of strings
vertical-align
"center"
text-align
"center"
color
"white"
font-family
"Roboto"
Usage examples
Check the following examples of advanced/000
:
Example 1
{
"width": 1920,
"height": 1080,
"quality": "high",
"draft": false,
"scenes": [
{
"background-color": "#4392F1",
"elements": [
{
"type": "component",
"component": "advanced/000",
"settings": {
"animation": {
"text": [
"Ready",
"Steady",
"Go!"
],
"font-size": "8vw"
}
},
"duration": 7
}
]
}
]
}
Example 2
{
"width": 1920,
"height": 1080,
"quality": "high",
"draft": false,
"scenes": [
{
"elements": [
{
"type": "video",
"src": "https://assets.json2video.com/assets/videos/city-01.mp4",
"scale": {
"width": 1920
}
},
{
"type": "component",
"component": "advanced/000",
"settings": {
"animation": {
"text": [
"LIKE",
"COMMENT",
"SHARE"
],
"font-face": "Inter",
"font-weight": "700",
"font-size": "8vw",
"color": "transparent",
"text-stroke": "5px white"
}
}
}
]
}
]
}