I've created this android app that sends onTouchEvents points to a web server, and I have a page which gets the motion points JSON data via Ajax like so:

{"data":[
{"x":224.28035,"y":235.4906},
{"x":263.32916,"y":219.45718},
{"x":293.3667,"y":215.44885},.....]}

Now I want to use this data and animate a div on the screen with smooth path animation, similar to flash path animation, is there a plugin that solves this issue?

PS: .path/ does not seem to have a custom path animation, or I may be missing something.

Thanks :)

I've created this android app that sends onTouchEvents points to a web server, and I have a page which gets the motion points JSON data via Ajax like so:

{"data":[
{"x":224.28035,"y":235.4906},
{"x":263.32916,"y":219.45718},
{"x":293.3667,"y":215.44885},.....]}

Now I want to use this data and animate a div on the screen with smooth path animation, similar to flash path animation, is there a plugin that solves this issue?

PS: http://weepy.github./jquery.path/ does not seem to have a custom path animation, or I may be missing something.

Thanks :)

• javascript
• jquery
• json
• animation

• github./weepy/jquery.path – vsync Commented Jan 30, 2013 at 1:55

2 Answers 2

Hopefully this is the one you're searching for: jQuery plugin crSpline

You can see its demo in here.

pathAnimator

Ultra-lightweight, high performance with a nice range of settings.

Example:

var path         = "M150 0 L75 200 L225 200 Z"; // an SVG path
    pathAnimator = new PathAnimator( path ),   // initiate a new pathAnimator object
    speed        = 6, // seconds that will take going through the whole path
    reverse      = false,  // go back or forward along the path
    startOffset  = 0,   // between 0% to 100%
    easing = function(t){ t*(2-t) };  // optional easing function


pathAnimator.start(speed, step, reverse, startOffset, finish, easing);

function step( point, angle ){
    // do something every "frame" with: point.x, point.y & angle
}

function finish(){
    // do something when animation is done
}