Play an animation by dragging an element

Hi mobly!

It's the same concept of the parallax websites: there, when you scroll the bar up and down, the timeline goes forth an back; here, I would that when you drag to right the animation goes forth (so text fade in) and when you drag to left the animation goes back until it returns to 0 milliseconds.

Thanks or your attention!

Davide

Hi resdesign! Simply because I want that the element I drag be part of the animation, instead in parallax you scroll horizontal or vertical the viewport, not single elements.

Many thanks for your attention!

Davide

Hi resdesign!

Thanks for your work! Actually, my goal is a little bit different. I would that the red box moves only in the boundaries of the parent (the dotted rectangle) and that - when you drag it to the right or to the left - the animation goes forth and back according to the dragging. It's like the parallax, only applied to a single element. It's because of that that I used, in the code, the formula:

/* pos = (X * animation duration in millisecond) / width of sliding (from 4 to 259 top left) */

var pos = (x *1000) / 255;

sym.stop(pos);

Still many thanks for your precious work!

Davide

Hi!

I've modified a little bit the code, now if you take a glance to http://www.terredainventare.it/slide/scrubber.html you'll see, in the second example, what I mean (tough it still doesn't work: the red box - when dragged to right - gets out of the parent (the dotted box) and the text fades in only out of the parent).

Project files here: http://www.terredainventare.it/slide/Scrubber.zip

Thanks for the help!

Davide

Hi res! I wonder if you had time to see my last file!

Many thanks,

Davide