Comment on page
Find sub-compositions and widgets
This example explains how to get composition's sub-compositions and widgets.
find()findWidget()
The example composition has one sub-composition called Lower, as you can see in the composition tree.
Select the Lower sub-composition and Control Properties in the property panel to see the sub-composition's objects.
The Lower sub-composition
To go deeper and open the sub-composition's widgets:
- Double-click the Lower sub-composition.
This sub-composition contains three widgets.
- lowerTitle: a text widget
- lowerSubtitle: a text widget
- lowerLogo: an image widget
The sub-composition's widgets
To get the same information using composition scripts, open the composition script editor within the same example composition as above.
Then, read the comments in the root and Lower composition scripts to see the composition scripts needed to find sub-compositions and widgets.
You can also copy and paste the composition scripts below into your own compositions.
Root Script
(function() {
return {
init: function(comp, context) {
// get reference to the subcomposition "Lower"
const compLower = comp.find("Lower")[0];
// log composition object to the console
console.log(compLower);
},
close: function(comp, context) {}
};
})();
Lower Script
(function() {
return {
init: function(comp, context) {
// get reference to the title, subtitle, and logo widget
const wiLowerTitle = comp.findWidget("lowerTitle")[0];
const wiLowerSubtitle = comp.findWidget("lowerSubtitle")[0];
const wiLowerLogo = comp.findWidget("lowerLogo")[0];
// log widget objects to the console
console.log(wiLowerTitle);
console.log(wiLowerSubtitle);
console.log(wiLowerLogo);
},
close: function(comp, context) {}
};
})();
Last modified 1yr ago