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