{"id":24030510,"url":"https://github.com/callmecavs/tail-end","last_synced_at":"2025-04-19T11:41:39.484Z","repository":{"id":65514098,"uuid":"85138262","full_name":"callmecavs/tail-end","owner":"callmecavs","description":"Promise-wrapped CSS animations and transitions (async/await friendly).","archived":false,"fork":false,"pushed_at":"2018-12-28T23:13:52.000Z","size":61,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T07:22:46.435Z","etag":null,"topics":["animationend","async","await","css","promise","transitionend"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/callmecavs.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":"2017-03-16T01:26:03.000Z","updated_at":"2024-12-15T15:04:18.000Z","dependencies_parsed_at":"2023-01-26T20:55:20.169Z","dependency_job_id":null,"html_url":"https://github.com/callmecavs/tail-end","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callmecavs%2Ftail-end","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callmecavs%2Ftail-end/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callmecavs%2Ftail-end/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callmecavs%2Ftail-end/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/callmecavs","download_url":"https://codeload.github.com/callmecavs/tail-end/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249391818,"owners_count":21263362,"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":["animationend","async","await","css","promise","transitionend"],"created_at":"2025-01-08T17:44:36.602Z","updated_at":"2025-04-19T11:41:39.452Z","avatar_url":"https://github.com/callmecavs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tail-end\n\n[![tail-end on NPM](https://img.shields.io/npm/v/tail-end.svg?style=flat-square)](https://www.npmjs.com/package/tail-end) [![tail-end Downloads on NPM](https://img.shields.io/npm/dm/tail-end.svg?style=flat-square)](https://www.npmjs.com/package/tail-end) [![Standard JavaScript Style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)\n\nPromise-wrapped CSS animations and transitions (`async`/`await` friendly).\n\n## Install\n\n```sh\n$ npm i tail-end --save\n```\n\n## API\n\nThe following functions are exported:\n\n* `animationEnd(node[, function])`\n* `transitionEnd(node[, function])`\n\nBoth exports add a Promise-wrapped event handler to the node. The Promise removes the event listener and resolves itself when the event is triggered.\n\n```javascript\nimport { animationEnd } from 'tail-end'\n\n// bind the event, then trigger it\nanimationEnd(node)\n  .then(() =\u003e console.log('Transition ended.'))\n  .catch(error =\u003e console.log('Invalid node passed in: ', error))\n\nnode.classList.add('will-animate')\n```\n\nFor usage with `async`/`await` you can pass in a `function` as the second parameter. The function will be called in an [animation frame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) after the event listener is bound, and passed the `node`.\n\n```javascript\nimport { transitionEnd } from 'tail-end'\n\n// define a sequence of animations/transitions with async/await\nconst sequence = async () =\u003e {\n  await transitionEnd(node, node =\u003e node.style.transform = 'translate3d(100px, 0, 0)')\n  await transitionEnd(node, node =\u003e node.style.transform = 'translate3d(0, 0, 0)')\n  await transitionEnd(node, node =\u003e node.style.transform = 'translate3d(-100px, 0, 0)')\n}\n\n// run the sequence\nsequence().then(() =\u003e console.log('Sequence completed.'))\n```\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT). © 2018 Michael Cavalea\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallmecavs%2Ftail-end","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcallmecavs%2Ftail-end","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallmecavs%2Ftail-end/lists"}