Find sub-compositions and widgets

This example explains how to get composition's sub-compositions and widgets.

Functions covered

  • find()

  • findWidget()

Load this example composition to follow along in a real composition.

Composition structure

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.

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

Composition scripts

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


    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


    close: function(comp, context) {}

Last updated