{"id":16990645,"url":"https://github.com/lukejacksonn/actuate","last_synced_at":"2025-07-20T05:33:25.028Z","repository":{"id":57172950,"uuid":"34105014","full_name":"lukejacksonn/Actuate","owner":"lukejacksonn","description":"One line easy actuation of CSS animation sequences","archived":false,"fork":false,"pushed_at":"2018-08-01T09:01:52.000Z","size":25,"stargazers_count":41,"open_issues_count":0,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-14T06:57:02.222Z","etag":null,"topics":["animation","css","css-animations","javascript","promise","transform"],"latest_commit_sha":null,"homepage":"http://codepen.io/lukejacksonn/pen/dvaPPG","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukejacksonn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-17T08:23:13.000Z","updated_at":"2024-04-04T10:22:14.000Z","dependencies_parsed_at":"2022-08-24T13:21:29.540Z","dependency_job_id":null,"html_url":"https://github.com/lukejacksonn/Actuate","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/lukejacksonn/Actuate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukejacksonn%2FActuate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukejacksonn%2FActuate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukejacksonn%2FActuate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukejacksonn%2FActuate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukejacksonn","download_url":"https://codeload.github.com/lukejacksonn/Actuate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukejacksonn%2FActuate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266071519,"owners_count":23871940,"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":["animation","css","css-animations","javascript","promise","transform"],"created_at":"2024-10-14T03:23:11.611Z","updated_at":"2025-07-20T05:33:20.016Z","avatar_url":"https://github.com/lukejacksonn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Actuate\n\n\u003e ac·tu·ate /ˈak(t)SHəˌwāt/ : cause (a machine or device) to operate.\n\nA shiny new (~500b) vanilla implementation of what was previously [A tiny jQuery wrapper for animate.css](https://github.com/lukejacksonn/Actuate/releases/tag/v1.0.0) which allows for _one line easy_ actuation of CSS animation sequences with _thenable_ chaining.\n\nCheck out this [example on CodePen](http://codepen.io/lukejacksonn/pen/dvaPPG).\n\n![Actuate Banner](https://cloud.githubusercontent.com/assets/1457604/24648564/34adf08c-194e-11e7-9c12-dd97d85363b8.gif)\n\n## Getting Started\n\n\u003e Note: this library uses [promises](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) for which you [might need](http://caniuse.com/#feat=promises) a [polyfill](https://polyfill.io/v2/docs/)\n\n### Include the library\nDirectly in the `head` of your document from the CDN\n```html\n\u003cscript src='https://unpkg.com/actuatejs'\u003e\u003c/script\u003e\n```\nor require it in your source files after `npm install actuatejs`\n```js\nimport Actuate from 'actuatejs' // ES6\n```\n\n### Define a CSS animation\nYou can define your own or employ a library like [animate.css](https://github.com/daneden/animate.css)\n```css\n@keyframes pulse {\n  from { transform: scale(1) }\n  50% { transform: scale(1.05) }\n  to { transform: scale(1) }\n}\n.pulse {\n  animation-name: pulse;\n}\n```\n\n### Run with javascript\nIn a script tag before the closing `body` tag\n```js\nActuate('pulse')(document.body)\n.then($ =\u003e console.log('Finished animating', $))\n.catch($ =\u003e console.log($, 'was already animating'))\n```\n\n## Usage\n\nThe API is intended to be as simple as possible providing low overhead syntax for animation sequencing, chaining of sequences and `animationEnd` detection.\n\n### Single Animation\n\nTo animate an HTML element, first pass the `Actuate` function the name of the CSS `animation` you would like to apply. This primes the animation ready to be bound to a `target` element (in this case `document.body`) which is passed as the second argument:\n\n```js\nActuate('tada')(document.body)\n```\n\nOnce the function has received both arguments, the animation will initiate. You can pass in any single HTML element as the `target` element. For example using the native [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) method:\n\n```js\nActuate('tada')(document.querySelector('.class'))\nActuate('tada')(document.querySelector('#id'))\nActuate('tada')(document.querySelector('input[type=text]'))\n```\n\n### Sequential Animations\n\nOften it is desirable to run animations one after another. There is no native method that assists this behavior. The Actuate function accepts a space delimited list of named CSS animations as the first argument and handles this complexity for you:\n\n```js\nActuate('rollIn tada rollOut')(document.body)\n```\n\nYou can also pass in an array of named animations if you prefer:\n\n```js\nActuate(['rollIn', 'tada', 'rollOut'])(document.body)\n```\n\nWhen one animation finishes the next one will start until there are no more to apply.\n\n### Animation End\n\nThe Actuate function returns a promise which means you can easily declare a `then` function which is guaranteed to execute once all the animations in a sequence have been applied.\n\n```js\nActuate('tada fadeOut')(document.body)\n.then($ =\u003e console.log('Finished Animating', $))\n```\n\nThe `then` function gets passed the `target` element. In the above case `$ === document.body`.\n\n### Already Animating\n\nThe only time Actuate will throw an _error_ is if you try animate an element that is already animating:\n\n```js\naddEventListener('click', () =\u003e\n  Actuate('tada')(document.body)\n  .then($ =\u003e console.log('Finished'))\n  .catch($ =\u003e console.log('Already Animating'))\n)\n```\n\n### Chaining sequences\n\nThe Actuate function takes advantage of [partial appliction](https://en.wikipedia.org/wiki/Partial_application) which means that animation sequences can be defined without having to immediately specify a `target` element.\n\n```js\nvar intro = Actuate('rollIn')\nvar showoff = Actuate('bounce tada bounce')\nvar outro = Actuate('rollOut')\n```\n\nYou can then provide a `target` element and let it flow through a chain of predefined animation sequences:\n\n```js\nPromise.resolve(document.body)\n.then(intro)\n.then(showoff)\n.then(outro)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukejacksonn%2Factuate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukejacksonn%2Factuate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukejacksonn%2Factuate/lists"}