Keyframes.Pathfinder

Move elements in a circle on along a curve

HTML

<script src="https://rawgithub.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
<script src="https://rawgithub.com/jQueryKeyframes/Keyframes.Pathfinder/master/keyframes.pathfinder.js"></script>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>

CSS

.block {
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(http://www.nhc.noaa.gov/graphics/twitter_logo.png);
}

JavaScript

var rules1 = {
    name: 'curvey'
};

var rules2 = {
    name: 'curveyplus'
};

var rules3 = {
    name: 'circular'   
}

/* Nice and smooth */
$.keyframe.pathfinderOpts.bezierSteps = 100;

/* Draw a pentagram! */
$.keyframe.pathfinderOpts.circleSteps = 5;

rules1 = $.keyframe.bezierPath(rules1, [-50, 1], [800, 1], [400, 600]);

/* Bird 2 uses a 4th coordinate */
rules2 = $.keyframe.bezierPath(rules2, [-50, 1], [800, 100], [600, -100], [300, 400]);

/* Bird 3 uses a circle path */
rules3 = $.keyframe.circlePath(rules3, [100, 100], 40);

$.keyframe.define([rules1, rules2, rules3]);

$('.block1').playKeyframe('curvey 1s linear 0s infinite normal forwards');
$('.block2').playKeyframe('curveyplus 1s linear 0s infinite normal forwards');
$('.block3').playKeyframe('circular 1s linear 0s infinite normal forwards');