Last updated 13 February 2014. Created on 11 March 2013.
Edited by Junior211, monymirza. Log in to edit this page.

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

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)

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

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

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″.


<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>

Looking for support? Visit the forums, or join #drupal-support in IRC.


huma2000’s picture

I want to make it working with a content type, I créate a content type with the fields:
Title -> First text to appear
Image -> Background image
Bosy -> Text to appear last

How can I do it?


monymirza’s picture

You have to customize your code. In views, it will not work.

anthony0perez’s picture

Can you data-ease-in / data-ease-out with just the wysiwig editor under admin/config/user-interface/fractionslider?