• Available since: v1.2
• Type: attribute
• Data type: String
• Allowed values: onSlideStartOpening, onSlideOpened, onSlideStartClosing
• Default value: no default value

Specifies when should animation of an element start.

The described attribute can be used only if one of the below listed groups of attributes or combination of them was set.

• data-fade - with value true

or

• data-moveDirection
• data-offset
• animated element has to be absolutely or relatively positioned

The described attribute can have 3 values, each of them specify when animation of displaying element should start.

onSlideStartOpening

Element is displayed while a slide is opening and when it's fully open. Animation starts when event onSlideStartOpening is triggered.

<h1 class="caption" data-initEvent="onSlideStartOpening" data-fade="true" style="top:10%;left:5%;">
	h1.caption, onSlideStartOpening, fade only
</h1>

onSlideOpened

Element is displayed when a slide is fully open. Animation starts when event onSlideOpened is triggered.

<div class="description" data-initEvent="onSlideOpened" data-fade="true">
	<h1>onSlideOpened, fade only</h1>
	<p>This is div with class description containing h1 and p elements.</p>
</div>

onSlideStartClosing

Element is displayed when a slide is closed. Animation starts when event onSlideStartClosing is triggered.

<h1 class="title" data-initEvent="onSlideStartClosing" data-fade="true">
	h1.title, onSlideStartClosing, fade only
</h1>

Demo 1 demonstrates usage of all 3 allowed values of described attribute.