• Available since: v1.2
• Type: attribute
• Data type: String
• Default value: no default value

Offset (of property determined by data-moveDirection) of animated element (relative to final position set via css). Any unit is acceptable - px, %, em, etc. Value without specified unit is treat as pixel unit (px). Using of relative unit is highly recommended to achieve responsive animated elements. See image related to code below:

<h3 class="caption" data-initEvent="onSlideOpened" data-moveDirection="top" data-offset="27%" data-fade="true" style="top:30%;left:10%">
		This is just a one line text
</h3>

Note: You can create opposite direction of animation by setting negative offset, which is useful when you want to specify css property top (then moveDirection has to be top as well) but you want the element to move from top to bottom. See example below:

<!--Even though direction of the animation is supposed to be from bottom to top it's actually from top to bottom because of negative offset.-->
<h3 class="caption" data-initEvent="onSlideOpened" data-moveDirection="top" data-offset="-27%" data-fade="true" style="top:30%;left:10%">
		This is just a one line text
</h3>

The described attribute can be used only if the below listed attributes were set.

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

Demo 1 demonstrates usage of described attribute.

Loading content...

Positive offset

t

l

c

r

b

Negative offset

t

l

c

r

b

Negative offset

t

l

c

r

b

Negative offset

t

l

c

r

b