Collide is a powerful yet simple javascript animation engine for web and hybrid mobile apps, inspired by Facebook Pop, built by the Ionic team.
Animations in Collide have more power and control than CSS animations or transitions, all without sacrificing performance.
Collide allows the user to pause, play, reverse, repeat, and skip to any part of an animation at any time, and has support for non-cubic bezier curves, enabling powerful Physics animations (Springs, Gravity, and Velocity) without the complexity of a full-fledged physics engine.
We built Collide because we wanted to give Ionic developers the power to build complicated animation and gesture driven mobile apps with HTML5 and Javascript, something that wasn't possible before.
Collide solves the problems with CSS animations using a simple Javascript animation engine and API. It also provides a tweening API similar to WebAnimations, and allows the developer to hook into every frame for full control over the behavior of the animation.
Coming Soon:
- Animation decay. Set a velocity on an animation and let it decelerate to a certain point.
npm installnpm install -g browserifynpm run testruns jasmine-node tests.npm run autotestwill watch and testnpm run build- Generated file
dist/collide.jsis require/CommonJS/window friendly. If you include it, it will be included aswindow.collide. - Note: the
collide.jsfound in project root is only updated on release. The built version in dist is not added to git and should be used while developing.
This is in flux, better documentation coming after API is stable
var animation = collide.animation({
// 'linear|ease|ease-in|ease-out|ease-in-out|cubic-bezer(x1,y1,x2,y2)',
// or function(t, duration),
// or a dynamics configuration (see below)
easing: 'ease-in-out',
duration: 1000,
percent: 0,
reverse: false
});
// Actions, all of these return `this` and are chainable
// .on('step' callback is given a 'percent', 0-1, as argument (for springs it could be outside 0-1 range)
// .on('stop' callback is given a boolean, wasCompleted
animation.on(/step|destroy|start|stop|complete/, function() {})
animation.once(...) //same event types
animation.off(...) //works like jquery.off
animation.stop(); //stop/pause at current position
animation.start(shouldSetImmediately); //start from current position
animation.restart();
animation.velocity(n) //starts the animation going at the given velocity ,relative to the distance, decaying
animation.distance(n); //distance for the velocity to be relative to
animation.destroy(); //unbind all events & deallocate
animation.isRunning(); //boolean getter
//These are getters and setters.
//No arguments is a getter, argument is a chainable setter.
animation.percent(newPercent, shouldSetImmediately); //0-1
animation.duration(duration); //milliseconds
animation.reverse(isReverse);
animation.easing(easing); //setter, string|function(t,duration)|dynamicsConfiguration.
// Dynamics configuration looks like this one of these:
// animation.easing({
// type: 'spring',
// frequency: 15,
// friction: 200,
// initialForce: false
// });
// animation.easing({
// type: 'gravity',
// bounce: 40,
// gravity: 1000,
// });See test.html.
var animation = collide.animation({
duration: 1000,
easing: 'ease-in-out'
})
.on('step', function(v) {
//Have the element spring over 400px
myElement.css('webkitTransform', 'translateX(' + (v*400) + 'px)');
})
.start();
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent