Skip to content

Instantly share code, notes, and snippets.

@mulhoon
Last active August 29, 2015 14:02
Show Gist options
  • Save mulhoon/6fc612cee12663cd165b to your computer and use it in GitHub Desktop.
Save mulhoon/6fc612cee12663cd165b to your computer and use it in GitHub Desktop.
Timeline a VelocityJS animation
// requires underscore or lodash + velocity + jquery
var animation = {
play:function(sequence, complete){
_.each(sequence, function(o){
var el = $(o.el);
el.attr('style','');
_.each(o.timeline, function(a, i){
el.velocity(a, {delay:a.delay, complete:a.end ? complete : null});
});
});
}
};
// Usage
var anim1 = [
{
el:'.box1',
timeline:[
{
translateX:300,
duration:800,
easing:"swing",
delay:0
},
{
translateY:300,
delay:400,
borderRadius:50,
rotateZ:"45deg",
duration:500,
easing:"swing",
end:true
}
]
},
{
el:'.box2',
timeline:[
{
translateY:300,
duration:800,
easing:"swing",
delay:0
},
{
translateX:300,
borderRadius:50,
delay:0,
duration:500,
easing:"swing"
}
]
}
];
animation.play(anim1, callback);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment