Element properties in RenderScript
These universal properties are available on all RenderScript elements and control their fundamental behavior, appearance, and positioning.
Some properties may behave differently or include additional options based on element type; see the dedicated Image, Video, Audio, Text, Shape, and Composition element pages for specifics.
Layer ordering
The track number on which this element is placed.
Example
"track": 2,Default
"track": null,Element timing
The time at which you want the element to appear within its composition and the duration for which you would like the element to appear.
Example
"time": 5.5,
"duration": 10,Defaults
"time": null,
"duration": null,Element positioning
The x-axis and y-axis position of the element in the composition.
Example
"x": 250,
"y": 500,Defaults
"x": "50%",
"y": "50%",Element dimensions
The width and height of the element in relation to the composition.
Example
"width": 300,
"height": 200,Defaults
"width": "100%",
"height": "100%",Aspect ratio
Use this properties in conjunction with the width and height to contraint the dimensions to a particular aspect ratio (width/height). A value of 1 is square, a value of 1.6 is 16:10.
Example
"aspect_ratio": 1.6,Default
"aspect_ratio": null,Padding
Padding of the element on the horizontal and vertical axis.
Example
"x_padding": "2vw",
"y_padding": "1vh",Defaults
"x_padding": "0vw",
"y_padding": "0vh",Render order
The order in which the elements are rendered. When set to null (the default), the element is rendered in the same order in which it is defined.
Example
"z_index": 10,Default
"z_index": null,Transform origin
The element's origin from which its position, scale, rotate, and skew transformations are applied.
Example
"x_anchor": "0%",
"y_anchor": "100%",Defaults
"x_anchor": "50%",
"y_anchor": "50%",Element scaling
The horizontal and vertical scale transformation in percent.
Example
"x_scale": "150%",
"y_scale": "80%",Defaults
"x_scale": "100%",
"y_scale": "100%",Element skewing
The horizontal and vertical skew transformation in degrees.
Example
"x_skew": 15,
"y_skew": -10,Defaults
"x_skew": "0°",
"y_skew": "0°",Element rotation
Rotates the element in 3D space along the x, y, and z axes. The perspective controls the 3D depth effect, and backface_visible determines whether to show the element's back side when rotated.
Example
"x_rotation": "45°",
"y_rotation": "30°",
"z_rotation": "90°",
"perspective": 1000,
"backface_visible": false,Defaults
"x_rotation": "0°",
"y_rotation": "0°",
"z_rotation": "0°",
"perspective": null,
"backface_visible": true,Element fill styling
The fill color of the element. It may be a string or an array of color stops if fill_mode is set to linear or radial. Use the template editor to see how color stops are formatted. There are 3 fill modes: solid, linear, and radial.
Example
"fill_color": "#3B82F6",
"fill_mode": "linear",
"fill_x0": "0%",
"fill_y0": "0%",
"fill_x1": "100%",
"fill_y1": "100%",
"fill_radius": "75%",Defaults
"fill_color": null,
"fill_mode": "solid",
"fill_x0": "50%",
"fill_y0": "0%",
"fill_x1": "50%",
"fill_y1": "100%",
"fill_radius": "50%",Element stroke styling
The stroke color, width, and styling of the element. There are 3 stroke cap options: butt, square, and round. There are 3 stroke join options: miter, bevel, and round.
Example
"stroke_color": "#1F2937",
"stroke_width": "2vmin",
"stroke_cap": "square",
"stroke_join": "miter",
"stroke_start": "10%",
"stroke_end": "90%",
"stroke_offset": "5%",Defaults
"stroke_color": null,
"stroke_width": "0.1vmin",
"stroke_cap": "round",
"stroke_join": "round",
"stroke_start": "0%",
"stroke_end": "100%",
"stroke_offset": "0%",Border radius
The border radius of the element.
Example
"border_radius": "1vmin",Default
"border_radius": "0vmin",Element shadow
The shadow color, blur, and offset of the element. Set shadow_color to null to disable the shadow.
Example
"shadow_color": "#000000",
"shadow_blur": "5vmin",
"shadow_x": "2vmin",
"shadow_y": "2vmin",Defaults
"shadow_color": null,
"shadow_blur": "3vmin",
"shadow_x": "0vmin",
"shadow_y": "0vmin",Content clipping
When set to true, the element's content is clipped to its borders.
Example
"clip": true,Default
"clip": false,Element transparency
The opacity of the element.
Example
"opacity": "75%",Default
"opacity": "100%",Layer blending
The blend mode of the element. These options are available: none, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, lighter, difference, exclusion, hue, saturation, color, luminosity.
Example
"blend_mode": "multiply",Default
"blend_mode": "none",Color filtering
The color filter that is applied to the element and its intensity. These options are currently available: none, brighten, contrast, hue, invert, grayscale, and sepia.
Example
"color_filter": "grayscale",
"color_filter_value": "50%",Defaults
"color_filter": "none",
"color_filter_value": "0%",Color overlay
A color that is applied on top the element.
Example
"color_overlay": "#ff0000",Default
"color_overlay": null,Element blur effect
The radius of the blur that is applied to the element and the algorithm used to blur the element. There are 3 blur modes: stack, box, and box-2.
Example
"blur_radius": 5,
"blur_mode": "box",Defaults
"blur_radius": 0,
"blur_mode": "stack",Element masking
By setting the mask mode, the element is used as a mask for the element one track below it. The options alpha and alpha-inverted use the alpha channel of this element, and luma and luma-inverted use the luminance.
Example
"mask_mode": "alpha",Default
"mask_mode": null,Pattern repeat
When set to true, the element is repeated in its composition, acting as a fill pattern.
Example
"repeat": true,Default
"repeat": false,Element visibility and interaction
Controls whether the element is rendered and if users can interact with it in the template designer. When visible is set to false, the element is not rendered. By setting locked to false, the user is not able to interact with the element in the template designer.
Example
"visible": false,
"locked": true,Defaults
"visible": true,
"locked": false,Element warping
Distorts the element's shape using a grid of control points. Use 'default' mode for flexible grid-based warping, or 'perspective' mode for four-corner distortion similar to perspective correction.
Example
"warp_mode": "perspective",
"warp_matrix": [
[
{ "x": "32", "y": "4%" },
{ "x": "84%", "y": "19%" }
],
[
{ "x": "26%", "y": "90%" },
{ "x": "100%", "y": "83%" }
]
],Defaults
"warp_mode": "default",
"warp_matrix": nullAnimation keyframes
An array of animation keyframes. Use the template editor to see which animations are available.
Example
"animations": [
{
"time": 0,
"duration": 1,
"easing": "linear",
"type": "fade"
}
],Default
"animations": null,