{"title":"Masking a Layer","id":51971,"link":"https:\/\/env.averta.net\/en\/step\/masking-a-layer\/","parent":[51827],"content":"<p>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 <code>data-masked=\"true\"<\/code> attribute to the layer element. The layer mask size can be modified by <code>data-mask-width<\/code> and <code>data-mask-height<\/code> otherwise, it fits to the layer content.<\/p>\n<p>The following example creates a masked text layer and a masked group layer containing two text layers.<\/p>\n<pre class=\"lang:xhtml decode:true \">\t&lt;div id=\"masterslider\" class=\"master-slider\"&gt;\r\n\t\t&lt;div class=\"ms-slide\"&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t\t&lt;div \r\n\t\t\t\tclass=\"ms-layer\"\r\n\t\t\t\tdata-type=\"text\"\r\n\t\t\t\tdata-masked=\"true\"\r\n\t\t\t\tdata-animation-in=\"{duration:1; y:50px; from:true;}\"&gt;\r\n\t\t\t\tText layer content here...\r\n\t\t\t&lt;\/div&gt;\r\n\r\n\t\t\t&lt;div class=\"ms-layer\"\r\n\t\t\t\t\t data-type=\"group\"\r\n\t\t\t\t\t data-masked=\"true\"\r\n\t\t\t\t\t data-mask-width=\"200p\"\r\n\t\t\t\t\t data-mask-height=\"200\"\r\n\t\t\t&gt;\r\n\t\t\t\t&lt;div class=\"ms-layer\"\r\n\t\t\t\t\t\t data-type=\"text\"\r\n\t\t\t\t\t\t data-animation-in=\"{duration:1; y:-50px; from:true;}\"&gt;\r\n\t\t\t\t\tText layer content here...\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"ms-layer\"\r\n\t\t\t\t\t\t data-type=\"text\"\r\n\t\t\t\t\t\t data-offset=\"{y:150px;}\"\r\n\t\t\t\t\t\t data-animation-in=\"{duration:1; y:50px; from:true;}\"&gt;\r\n\t\t\t\t\tText layer content here...\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;!-- .... --&gt;\r\n\t&lt;\/div&gt;<\/pre>\n","type":"solution"}