Masking a Layer

By masking a layer, the layer animation does not display outside of the layer box. It helps you create more complex animations. You can set a layer to mask its content individually, or mask a group of layers by a group layer. To enable masked feature, you need to add data-masked="true" attribute to the layer element. The layer mask size can be modified by data-mask-width and data-mask-height otherwise, it fits to the layer content.

The following example creates a masked text layer and a masked group layer containing two text layers.

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- .... -->
			<div 
				class="ms-layer"
				data-type="text"
				data-masked="true"
				data-animation-in="{duration:1; y:50px; from:true;}">
				Text layer content here...
			</div>

			<div class="ms-layer"
					 data-type="group"
					 data-masked="true"
					 data-mask-width="200p"
					 data-mask-height="200"
			>
				<div class="ms-layer"
						 data-type="text"
						 data-animation-in="{duration:1; y:-50px; from:true;}">
					Text layer content here...
				</div>
				<div class="ms-layer"
						 data-type="text"
						 data-offset="{y:150px;}"
						 data-animation-in="{duration:1; y:50px; from:true;}">
					Text layer content here...
				</div>
			</div>
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>