jQuery Plugin To Moves An Element Along A SVG Path - MotionJS

MotionJS is a jQuery plugin which enables you to moves an element along a motion path using CSS3 transform, SVG DOM API, jQuery easing plugin and jQuery Animation.

Basic usage:

1. Include the needed jQuery library and jQuery easing plugin on the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.easing.min.js"></script>

2. Download and include the MotionJS plugin's script after jQuery.

<script src="motion.js"></script>

3. Create a SVG path as follow:

<svg width="1000" height="1000">
  <path d="M 436.5 333.5 C 553.5 298.5 725.5 296.5 594.5 496.5 C 463.5 696.5 292.5 771.5 258.5 616.5 C 224.5 461.5 791.5 326.5 845.5 370.5 C 899.5 414.5 1078.5 679.5 846.5 693.5 C 614.5 707.5 17.5 254.5 105.5 143.5 C 193.5 32.5 646.5 -54.5 652.5 202.5 C 658.5 459.5 734.5 765.5 863.5 637.5 C 992.5 509.5 982.5 149.5 823.5 153.5 C 664.5 157.5 283.5 247.5 207.5 373.5 C 131.5 499.5 52.5 647.5 51.5 647.5" fill="none" stroke="#fff" ></path>
</svg>

4. Create an element you want to move along the SVG path.

<div id="box">
</div>

5. Create a new Motion object as this:

var demo = new Motion($("#box"), {
    path: 'M 436.5 333.5 C 553.5 298.5 725.5 296.5 594.5 496.5 C 463.5 696.5 292.5 771.5 258.5 616.5 C 224.5 461.5 791.5 326.5 845.5 370.5 C 899.5 414.5 1078.5 679.5 846.5 693.5 C 614.5 707.5 17.5 254.5 105.5 143.5 C 193.5 32.5 646.5 -54.5 652.5 202.5 C 658.5 459.5 734.5 765.5 863.5 637.5 C 992.5 509.5 982.5 149.5 823.5 153.5 C 664.5 157.5 283.5 247.5 207.5 373.5 C 131.5 499.5 52.5 647.5 51.5 647.5'
});

6. Star to move the element:

demo.to(1, {duration:10000,easing:'easeOutBounce'})
    .to(0, {duration:10000,easing:'easeOutQuint'})
    .to(.5, 2000)
    .to(.8)
    .to(.6)
    .to(.7)
    .to(0, {duration:3000});
};

7. Default settings.

var demo = new Motion(el, {
    path: '',
    offset: 0,
    rotation: 'auto'
});

8. Config the animation.

demo.to(number, {
  duration: 1000,
  easing: 'linear',
  complete: function(){}
})

---

This awesome jQuery plugin is developed by liuxiaole. For more Advanced Usages, please check the demo page or visit the official website.