Tricks to a successful animation.

When building a new animation you will need access to the elemnts that you want to use. You may have noticed that in the sample script all of the img data-positions are 0,0. The trick here is to place each element onto a transparent layer and position the image onto the layer.

I use photoshop to build my animations, start with an image background that is the full expected size of the slider. 

Then add each layer on top with the element to slide. So that when you are finished the resulting image represents the final design.

Now save each element as a transparent png, so that all of the data-positions will be 0,0 and you can be sure that the final effect will be correct.

For text it is harder to get the top/left of the text string but quicker in that you can easily edit the script and css to get the resulting desired effect.