Move An Element Alone A Motion Path - Johnnys Path

Johnnys Path is a tiny jQuery based animation library that enable the developers to move any DOM elements at a certain speed along a specified motion path.

How to use it:

1. Load the jQuery Johnnys Path's main JavaScript after loading jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/lib/index.js"></script>

2. Make sure your element has the position: absolute:

<div class="box">Element</div>

.box { 
  position: absolute; 
  top: 150px; 
  left: 200px;
}

3. Override the default options:

d: Duration of the animation. Default: 400ms.

e: Easing function. Default: 'linear'. For more easing functions, you might need a 3rd library like jQuery UI or jQuery easing.

var options = {
    d: 500, 
    e: "easeInOutQuad"
};

4. Define the motion path in an array of objects containing the 'x' and 'y' values.

var paths = [
    { x: 100, y: 0 }, 
    { x: 100, y: 100 }, 
    { x: 0, y: 100 }, 
    { x: 0, y: 0 }
]

5. Initialize the plugin to animate the element.

$(".box").johnnysPath(options, paths);

6. Execute a function when the animation is finished.

$(".box").johnnysPath(options, paths,function(){
  alert('done');
});

---

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