Adding Group Layer

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:

• Positioning layers
• Animating layers
• Masking layers
• Layer parallax effect