Element options reference

Last updated on
8 February 2018

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

You can control many aspects of the animation for each html-element individually. Just use the following data-attributes on the element.

data-position
position of the element inside the slider. Format: “top,left” in pixels

data-in / data-out
type of the in-animation/out-animation (default is left)
possible values: fade, none ,left, topLeft, bottomLeft, right, topRight, bottomRight, top, bottom
none lets the element just appear/disappear at the desired location
the direction-type values define the direction in which the element is animated.
example: data-in="left":the element will start right side of the slider and move left till its at the target location
example: data-out="left": the element will move left till its out of the slider

data-ease-in / data-ease-out
easing for the animations (you can use all in jquery-ui contained easing methods)

data-time
time after which the elements animation is complete. It will start at the beginning of the slide/step, or after its specificed delay

data-delay
time in ms before the in transition starts (in the current step / see steps)

data-step
You can group your elements in different steps. All animation of one step will start at the same time (maybe with your choosen element-specific data-delay). Elements of the next step will not start before the previous step is finished. If an element has no data-step attribute the plugin will thread it as having data-step=”0″.

example:

<p data-position="10,50" data-step="0">I start first</p>
<p data-position="10,50" data-step="0">me to</p>
<a data-position="10,50" data-step="1">I start when both paragraphs are finished</a>

Help improve this page

Page status: No known problems

You can: