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": [
        {
            "elements": [
                {
                    "type": "image",
                    "src": "https://assets.json2video.com/assets/images/race-01.jpg",
                    "scale": {
                        "width": 1920
                    },
                    "zoom": 5
                },
                {
                    "type": "component",
                    "component": "advanced/000",
                    "settings": {
                        "animation": {
                            "text": [
                                "Ready",
                                "Steady",
                                "Go!"
                            ],
                            "font-size": "8vw"
                        }
                    },
                    "duration": 10
                }
            ]
        }
    ]
}

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"
                        }
                    }
                }
            ]
        }
    ]
}