Group layer lets you group your layers. Layers can be inside a group and get position related to the group layer. It helps you easily move multiple layers, add single or additional layer animation to them, and create a masked area to move layers inside it.
To create a group layer, you need to specify it with data-layer
class name and set its type by data-type="group"
. Other layers need to be added as a child element of the group to locate inside the group layer. The following example create a group layer containing two text layers.
<div id="masterslider" class="master-slider"> <div class="ms-slide"> <!-- .... --> <div class="ms-layer" data-type="group"> <div class="ms-layer" data-type="text"> Text layer content here... </div> <div class="ms-layer" data-type="text"> Text layer content here... </div> </div> <!-- .... --> </div> <!-- .... --> </div>
This article only describes how to create the group layer. If you need more information about layers, check out the following articles: