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>