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:

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

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->width = 1920;
$movie->height = 1080;
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background-color = '#4392F1';
$scene1->addElement([
'component',
'advanced/000',
	[
		[
			[
'Ready',
'Steady',
'Go!'
			],
'8vw'
		]
	],
7
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("width", 1920);
movie.set("height", 1080);
movie.set("quality", "high");
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("background-color", "#4392F1");
scene1.addElement([
"component",
"advanced/000",
	[
		[
			[
"Ready",
"Steady",
"Go!"
			],
"8vw"
		]
	],
7
]);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

Example 2

JSON
PHP
NodeJS

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

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->width = 1920;
$movie->height = 1080;
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/city-01.mp4',
	[
1920
	]
]);
$scene1->addElement([
'component',
'advanced/000',
	[
		[
			[
'LIKE',
'COMMENT',
'SHARE'
			],
'Inter',
'700',
'8vw',
'transparent',
'5px white'
		]
	]
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("width", 1920);
movie.set("height", 1080);
movie.set("quality", "high");
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/city-01.mp4",
	[
1920
	]
]);
scene1.addElement([
"component",
"advanced/000",
	[
		[
			[
"LIKE",
"COMMENT",
"SHARE"
			],
"Inter",
"700",
"8vw",
"transparent",
"5px white"
		]
	]
]);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

Zoom-in text animation component

← Documentation

Text styles

Component packs

Zoom-in text animation component

advanced/000 component schema

Settings property for advanced/000

Usage examples

Example 1

Example 2