animate div on bezier curves

http://stackoverflow.com/questions/12021750/move-object-from-one-point-to-another-point useful links: https://github.com/weepy/jquery.path/blob/master/README.markdown http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/

by lalatino

HTML

<script src="http://github.com/weepy/jquery.path/raw/master/jquery.path.js"></script>
<span id="message">Hello World</span>

CSS

html, body {
    height:1500px;
}

#message {
    position:absolute;
    border:1px solid red;
}

JavaScript

var bezier_params1 = {
    start: { x: 250, y: 10, angle: -10 },
    end: { x: 20, y: 10, angle: 20, length: 3.0 }
};

var bezier_params2 = {
    start: { x: 20, y: 10, angle: 85 },
    end: { x: 170, y: 250, angle: -60, length: 0.3 }
};

var bezier_params3 = {
    start: { x: 170, y: 250, angle: -60 },
    end: { x: 150, y: 350, angle: 10, length: 0.8 }
};

$("#message").animate({
    path: new $.path.bezier(bezier_params1)
}, 5000).animate({
    path: new $.path.bezier(bezier_params2)
}, 3000).animate({
    path: new $.path.bezier(bezier_params3)
}, 2000);