This article describes how to animate layers. Each layer can be added over a slide or as an overlay layer. Layers support three animation phases: animation-in, animation-between, and animation-out.
Defining Animation
Before setting the animation for each phase, you need to know how to define an animation. Each animation can contain multiple steps and each step defines an state for the layer. A new state usually contains layer transform style and animation timing parameters. State parameters defines like param:value and you need to add them between { and }. To separate each parameters add ;. For example:?{ duration:1; x:100px; y:10px; }
You can define multiple animation steps by separating them with comma like { duration:1; x:100px; y:10px; }, { duration:0.3; z:100px; delay:1 }
Animation parameters
To make a new animation step, you need to set a new state for the layer. The state can contain CSS parameters like:
Timing and special parameters
| Name | Description |
| duration | Specifies the animation step duration in seconds. Default value is 1. |
| delay | Specifies the delay amount before stating the animation step in seconds. Default value is 0. |
| ease | Specifies the easing function to change the rate of changing values relative the the animation time. |
| from | Enabling this parameter makes a from-to animation instead of to animation. The layer first jumps to the defined state and animates to the previous state. This parameter is useful if you need to set a layer how to appear (from:true). |
| repeat | Number of times that the animation step should repeat. |
| repeatDelay | Delay amount between repeats, in seconds. |
| yoyo | Enabling this parameter causes odd animation repeats play in opposite direction. |
| waite | Prevents the animation to start automatically. This parameter is useful when you need to use layer actions to control layer animation. |
Animation parameters
You can animate almost any CSS properties of a layer. To animate layer transform parameters, you can simply define the parameter value inside the animation state instead using “transform”. Since Master Slider uses GSAP to animation layers, you can find detailed information about supported parameters in the GSAP documentation.
Animation-in
Layer animation-in is the initial animation phase which usually can be used to make the layer appeare animation. To define this animation phase for the layer, you need to add data-animation-in attribute.
<div id="masterslider" class="master-slider">
<div class="ms-slide">
<!-- .... -->
<div class="ms-layer"
data-type="text"
data-offset="{x:100px; y:100px}"
data-animation-in="{duration:1.3; delay:1; from: true; x:-300px; opacity:0;},
{duration:1; delay:0.3; x:100px: rotation:45deg;}"
>
Text layer content here...
</div>
<!-- .... -->
</div>
<!-- .... -->
</div>
The example above, defines an animation-in for the text layer. It contains two animation steps. The layer first starts from -300px width then after one second, moves and fades to its initial location (x:100px and y:100px). It waits 0.3s then moves and rotates right (i.e. x:200px).
Recommended: As transition-in is usually used for the animation appearing, it is recommended to add from:true parameter for the first animation step.
Animation-between
The second layer animation phase, starts right after the animation-in, It is useful if you need to add a loop animation. In addition to the animation attribute, you can set how many times the animation repeats by data-animation-between-repeat and enable the repeat yoyo effect by data-animation-between-yoyo attributes.
<div id="masterslider" class="master-slider">
<div class="ms-slide">
<!-- .... -->
<div class="ms-layer"
data-type="text"
data-offset="{x:100px; y:100px}"
data-animation-in="{duration:1.3; delay:1; from: true; x:-300px; opacity:0;},
{duration:1; delay:0.3; x:100px: rotation:45deg;}"
data-animation-between="{duration:2; rotation:180deg;}"
data-animation-between-repeat="10"
data-animation-between-yoyo="true"
>
Text layer content here...
</div>
<!-- .... -->
</div>
<!-- .... -->
</div>
The example above, adds an animation-between and repeats for 10 times with yoyo effect.
Note: To make an infinite loop animation, you can set the repeat value to -1
Animation-out
This is the last layer animation phase. It is usually used for creating layer hide animation effect.
<div id="masterslider" class="master-slider">
<div class="ms-slide">
<!-- .... -->
<div class="ms-layer"
data-type="text"
data-offset="{x:100px; y:100px}"
data-animation-in="{duration:1.3; delay:1; from: true; x:-300px; opacity:0;},
{duration:1; delay:0.3; x:100px: rotation:45deg;}"
data-animation-out="{duration:2; delay:10; y:200px; opacity:0;}"
>
Text layer content here...
</div>
<!-- .... -->
</div>
<!-- .... -->
</div>
In the example above, the layer waits doe 10 seconds after completing the animation-in, then will be hidden.
Note: Overlay layers support another type of animation which lets you define complex animations relative to the active slide. For more information check Overlay layers article.