Group

Use the Group layer to group a basket of layers and provide a common layer configuration to them. If the layers in the group already have layer configuration set, any configuration set in the group will override the existing configuration with the exception of transitions, which will be added to instead of replaced outright. If you add a group to a sequence, the entire group will be sequenced as one unit.

Layer configuration

The config argument supports the following layer configuration properties:

Examples

Sequencing

const video1 = await composition.addVideo("https://editframe.com/docs/composition/layers/group/doge-short.mp4");
const text1 = composition.addText({text: 'Group 1'});
const group1 = composition.addGroup([video1, text1], {
  position: {
    x: 'center'
  },
  trim: {
    end: 2
  } 
})

const video2 = await composition.addVideo("https://editframe.com/docs/composition/layers/group/drone-lagoon-short.mp4")
const text2 = composition.addText({text: 'Group 2'});
const group2 = composition.addGroup([video2, text2], {
  position: {
    x: 'right'
  },
  trim: {
    end: 3
  } 
})

await composition.addSequence([group1, group2])

Adding transitions

const image = await composition.addImage("https://editframe.com/docs/composition/layers/group/cyber-feathers.jpg",{ 
  transitions: [ 
    { 
      type: "kenBurns", 
      options: { 
        start: 0, 
        end: 3, 
        scale1: 2, 
        scale2: 1.5, 
        x1: 100, 
        x2: 0, 
        y1: 100, 
        y2: 0, 
      }, 
    }, 
  ], 
});

const video = await composition.addVideo("https://editframe.com/docs/composition/layers/group/drone-lagoon-short.mp4");
composition.addGroup([image, video], { 
  transitions: [ 
    { 
      type: "fadeIn", 
      options: { 
        duration: 1, 
      }, 
    }, 
  ], 
  trim: { 
    end: 3 
  }, 
});

await composition.addSequence([image, video]);