Group Element

PropTypeRequiredExampleValue RangeDescription
subNodesDataarraytrue--An array of elements involved in the transition.

Note: The subNodesData array contains the elements that are part of the transition. Each element has common VNode properties such as id, type, start, duration, trackIndex, x, y, width, height, anchorX, anchorY, rotation, scaleX, scaleY, alpha, blendMode, hidden, locked, keyframes, filterConfig, and maskData. Different element types (Shape, Text, Image, Video, etc.) have their own specific properties - please refer to the corresponding element documentation for details.

Transform Properties

Note: These transformation properties are directly on the Group element itself, not nested in a separate transform object.

PropTypeRequiredExampleValue RangeDescription
xnumbertrue0>= 0The horizontal position of the group element, in pixels.
ynumbertrue0>= 0The vertical position of the group element, in pixels.
anchorXnumbertrue--The x-coordinate of the anchor point relative to the group element, in pixels.
anchorYnumbertrue--The y-coordinate of the anchor point relative to the group element, in pixels.
rotationnumbertrue0>= 0The rotation angle of the group element, in degrees.
scaleXnumbertrue1> 0The horizontal scaling factor of the group element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it.
scaleYnumbertrue1> 0The vertical scaling factor of the group element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it.
alphanumbertrue10 - 1The transparency level of the group element. 1 represents full opacity, and 0 represents full transparency.
transitionElement.json
1{ 2 "id": "515905bc-f994-47a7-a4a9-77adefaee4a6", 3 "type": "Group", 4 "start": 0, 5 "duration": 5, 6 "trackIndex": 0, 7 "x": 0, 8 "y": 0, 9 "blendMode": "normal", 10 "anchorX": 256, 11 "anchorY": 255.99999999999997, 12 "rotation": 0, 13 "scaleX": 1, 14 "scaleY": 1, 15 "alpha": 1, 16 "keyframes": [], 17 "subNodesData": [ 18 { 19 "id": "59ec2ebf-2860-4482-a1a0-d21aa574f99e", 20 "type": "Shape", 21 "start": 0, 22 "duration": 5, 23 "trackIndex": 3, 24 "x": 0, 25 "y": 0, 26 "blendMode": "normal", 27 "anchorX": 0, 28 "anchorY": 0, 29 "rotation": 0, 30 "scaleX": 1, 31 "scaleY": 1, 32 "alpha": 1, 33 "keyframes": [], 34 "shapeType": "SHAPE_PATH", 35 "fill": "#EAA0E3", 36 "fillAlpha": 1, 37 "fillType": 1, 38 "stroke": null, 39 "strokeWidth": 1, 40 "paths": [ 41 { 42 "c": 1, 43 "v": [ 44 [ 45 349.601, 46 146.124 47 ], 48 [ 49 345.894, 50 171.368 51 ], 52 [ 53 174.8, 54 268.894 55 ], 56 [ 57 135.70100000000002, 58 265.807 59 ], 60 [ 61 118.95800000000003, 62 262.498 63 ], 64 [ 65 31.56900000000003, 66 309.817 67 ], 68 [ 69 67.26600000000003, 70 242.913 71 ], 72 [ 73 0, 74 146.124 75 ], 76 [ 77 174.801, 78 23.354 79 ], 80 [ 81 349.601, 82 146.124 83 ] 84 ], 85 "i": [ 86 [ 87 0, 88 0 89 ], 90 [ 91 2.4329999999999927, 92 -8.150000000000006 93 ], 94 [ 95 84.21999999999997, 96 0 97 ], 98 [ 99 12.568999999999988, 100 2.0229999999999677 101 ], 102 [ 103 5.459999999999994, 104 1.2860000000000014 105 ], 106 [ 107 0, 108 0 109 ], 110 [ 111 -4.677000000000007, 112 19.093999999999994 113 ], 114 [ 115 0, 116 39.321 117 ], 118 [ 119 -96.54399999999998, 120 0