{"id":15097945,"url":"https://github.com/ionic-team/collide","last_synced_at":"2025-12-12T04:25:13.175Z","repository":{"id":18948620,"uuid":"22168677","full_name":"ionic-team/collide","owner":"ionic-team","description":"A powerful javascript animation engine for web and hybrid mobile apps, inspired by Facebook Pop, built by the Ionic team.","archived":true,"fork":false,"pushed_at":"2015-06-30T20:44:44.000Z","size":377,"stargazers_count":234,"open_issues_count":0,"forks_count":25,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-01-18T21:58:27.052Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://collide.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ionic-team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-23T18:35:43.000Z","updated_at":"2023-04-17T18:28:07.000Z","dependencies_parsed_at":"2022-07-16T17:16:53.799Z","dependency_job_id":null,"html_url":"https://github.com/ionic-team/collide","commit_stats":null,"previous_names":["driftyco/collide"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionic-team%2Fcollide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionic-team%2Fcollide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionic-team%2Fcollide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ionic-team%2Fcollide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ionic-team","download_url":"https://codeload.github.com/ionic-team/collide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235678929,"owners_count":19028301,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-25T16:41:32.552Z","updated_at":"2025-10-08T03:30:47.716Z","avatar_url":"https://github.com/ionic-team.png","language":"JavaScript","readme":"Collide\n--------\n\nCollide is a powerful yet simple javascript animation engine for web and hybrid mobile apps, inspired by [Facebook Pop](https://github.com/facebook/pop), built by the [Ionic](http://ionicframework.com/) team.\n\nAnimations in Collide have more power and control than CSS animations or transitions, all without sacrificing performance.\n\nCollide 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.\n\nWe 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.\n\nCollide 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.\n\nComing Soon:\n\n- Animation decay. Set a velocity on an animation and let it decelerate to a certain point.\n\n### Development\n\n- `npm install`\n- `npm install -g browserify`\n- `npm run test` runs jasmine-node tests. `npm run autotest` will watch and test\n- `npm run build`\n- Generated file `dist/collide.js` is require/CommonJS/window friendly. If you include it, it will be included as `window.collide`.\n- Note: the `collide.js` found in project root is only updated on release. The built version in dist is not added to git and should be used while developing.\n\n### API\n\n**This is in flux, better documentation coming after API is stable**\n\n```js\nvar animation = collide.animation({\n  // 'linear|ease|ease-in|ease-out|ease-in-out|cubic-bezer(x1,y1,x2,y2)',\n  // or function(t, duration),\n  // or a dynamics configuration (see below)\n  easing: 'ease-in-out', \n  duration: 1000,\n  percent: 0,\n  reverse: false\n});\n\n// Actions, all of these return `this` and are chainable\n// .on('step' callback is given a 'percent', 0-1, as argument (for springs it could be outside 0-1 range)\n// .on('stop' callback is given a boolean, wasCompleted\nanimation.on(/step|destroy|start|stop|complete/, function() {})\nanimation.once(...) //same event types\nanimation.off(...) //works like jquery.off\nanimation.stop(); //stop/pause at current position\nanimation.start(shouldSetImmediately); //start from current position\nanimation.restart();\nanimation.velocity(n) //starts the animation going at the given velocity ,relative to the distance, decaying\nanimation.distance(n); //distance for the velocity to be relative to\nanimation.destroy(); //unbind all events \u0026 deallocate\n\nanimation.isRunning(); //boolean getter\n\n//These are getters and setters.\n//No arguments is a getter, argument is a chainable setter.\nanimation.percent(newPercent, shouldSetImmediately); //0-1\nanimation.duration(duration); //milliseconds\nanimation.reverse(isReverse);\n\nanimation.easing(easing); //setter, string|function(t,duration)|dynamicsConfiguration.\n// Dynamics configuration looks like this one of these:\n// animation.easing({\n//   type: 'spring',\n//   frequency: 15,\n//   friction: 200,\n//   initialForce: false\n// });\n// animation.easing({\n//   type: 'gravity',\n//   bounce: 40,\n//   gravity: 1000,\n// });\n\n```\n\n### Examples\n\nSee test.html.\n\n```js\nvar animation = collide.animation({\n  duration: 1000,\n  easing: 'ease-in-out'\n})\n  .on('step', function(v) {\n    //Have the element spring over 400px\n    myElement.css('webkitTransform', 'translateX(' + (v*400) + 'px)');\n  })\n  .start();\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fionic-team%2Fcollide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fionic-team%2Fcollide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fionic-team%2Fcollide/lists"}