Smart crop image animation component
Shows an animated cropped image that uses smart object detection to crop the important things in the focus
Demo:
advanced/100 component schema
This is a simplified schema of a advanced/100
component element:
{
"type": "component",
"component": "advanced/100",
"settings": {
"image": {}
}
}
Check the full specification of the Component schema in the API documentation.
Settings property for advanced/100
This component accepts the following object items in the settings
property:
image object
Check all available object properties here.
Object property
Default value
src
"https://assets.json2video.com/assets/images/woman-01.jpg"
URL to the image
initial_left
"0%"
The left position at the start of the animation, in percent relative to the component box, with 0% being the left edge and 100% being the right edge
initial_width
"100%"
Width at the start of the animation, in percentage relative to the component box, where 100% is the full width of the component
initial_top
"0%"
The top position at the beginning of the animation, in percent relative to the component box, with 0% being the top edge and 100% is the bottom edge
initial_height
"100%"
Height at the beginning of the animation, in percentage relative to the component box, where 100% is the full height of the component
final_left
"50%"
The left position at the end of the animation, in percentage relative to the component box, with 0% being the left edge and 100% being the right edge
final_width
"50%"
Width at the end of the animation, in percentage relative to the component box, with 100% being the full width of the component
final_top
"0%"
The top position at the end of the animation, in percentage relative to the component box, where 0% is the top edge and 100% is the bottom edge
final_height
"100%"
Height at the end of the animation, in percentage relative to the component box, with 100% being the full height of the component
duration
1
Animation duration in seconds
easing
"easeOutCubic"
Easing to apply to the animation
Usage examples
Check the following examples of advanced/100
:
Example 1
{
"width": 640,
"height": 360,
"quality": "high",
"draft": false,
"scenes": [
{
"background-color": "#1A281F",
"elements": [
{
"type": "component",
"component": "advanced/100",
"settings": {
"image": {
"src": "https://assets.json2video.com/assets/images/woman-01.jpg",
"initial_left": "0%",
"initial_width": "100%",
"final_left": "70%",
"final_width": "30%",
"duration": 2
}
},
"duration": 5
}
]
}
]
}