{"id":16441087,"url":"https://github.com/phegman/animate-vanilla-js","last_synced_at":"2025-03-21T04:33:40.249Z","repository":{"id":35095926,"uuid":"198562405","full_name":"phegman/animate-vanilla-js","owner":"phegman","description":"A tiny promise based animation function implemented in vanilla JavaScript","archived":false,"fork":false,"pushed_at":"2022-12-10T23:28:19.000Z","size":2832,"stargazers_count":9,"open_issues_count":24,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T21:42:21.791Z","etag":null,"topics":["animate","easing","easings","es6","es6-javascript","typescript","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phegman.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":"2019-07-24T05:09:22.000Z","updated_at":"2023-03-10T04:05:55.000Z","dependencies_parsed_at":"2023-01-15T14:00:26.688Z","dependency_job_id":null,"html_url":"https://github.com/phegman/animate-vanilla-js","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phegman%2Fanimate-vanilla-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phegman%2Fanimate-vanilla-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phegman%2Fanimate-vanilla-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phegman%2Fanimate-vanilla-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phegman","download_url":"https://codeload.github.com/phegman/animate-vanilla-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244738857,"owners_count":20501927,"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":["animate","easing","easings","es6","es6-javascript","typescript","vanilla-javascript","vanilla-js"],"created_at":"2024-10-11T09:13:46.213Z","updated_at":"2025-03-21T04:33:39.949Z","avatar_url":"https://github.com/phegman.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animate Vanilla JS\n\nA tiny promise based animation function implemented in vanilla JavaScript.\n\n- 👻 **3kb (1kb gzipped)**\n- 📦 **No dependencies**\n- 🌚 **TypeScript support**\n- 🕺 **Multiple built-in easings**\n- 🤝 **Promise based**\n- ⚙ **Uses requestAnimationFrame**\n- 🙅‍♂️ **Cancelable**\n\n## [Demo](https://animate-vanilla-js.peterhegman.com/)\n\n## Installation\n\n### Module bundler (e.g. Webpack)\n\n```sh\nyarn add animate-vanilla-js\n```\n\n```javascript\nimport animate from 'animate-vanilla-js'\n```\n\n### Script tag\n\nDownload `animate-vanilla-js-browser.js` from the latest release here: [https://github.com/phegman/animate-vanilla-js/releases](https://github.com/phegman/animate-vanilla-js/releases)\n\n```html\n\u003cscript type=\"text/javascript\" src=\"animate-vanilla-js-browser.js\"\u003e\u003c/script\u003e\n```\n\nThe animation function will then be usable via the global function `animateVanillaJs()`\n\n## Usage\n\n### Parameters\n\n| Parameter  | Type                                                      | Description                                       | Options                                                                                                                                                                                                   |\n| ---------- | --------------------------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `from`     | `number`                                                  | Starting animation value                          | N/A                                                                                                                                                                                                       |\n| `to`       | `number`                                                  | Ending animation value                            | N/A                                                                                                                                                                                                       |\n| `duration` | `number`                                                  | Animation duration                                | N/A                                                                                                                                                                                                       |\n| `easing`   | `string` \\|\\| [`EasingFunction`](#custom-easing-function) | Easing                                            | `linear`, `easeInQuad`, `easeOutQuad`, `easeInOutQuad`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `easeInQuart`, `easeOutQuart`, `easeInOutQuart`, `easeInQuint`, `easeOutQuint`, `easeInOutQuint` |\n| `update`   | `Function`                                                | Function with animation value passed as parameter | N/A                                                                                                                                                                                                       |\n\n### Basic Usage\n\n```typescript\nimport animate from 'animate-vanilla-js'\n\nanimate(\n  0, // from\n  100, // to\n  500, // duration\n  'easeInOutQuad', // easing\n  value =\u003e {\n    // update function\n    console.log(value)\n    // Perform DOM manipulation\n  }\n).then(() =\u003e {\n  console.log('Done animating')\n})\n```\n\n### Canceling animations\n\n```typescript\nimport animate from 'animate-vanilla-js'\n\nconst promise = animate(\n  0, // from\n  100, // to\n  500, // duration\n  'easeInOutQuad', // easing\n  value =\u003e {\n    // update function\n    console.log(value)\n    // Perform DOM manipulation\n  }\n)\n\ndocument.addEventListener('keydown', event =\u003e {\n  event = event || window.event\n  // Escape key is pressed\n  if (event.keyCode === 27) {\n    promise.cancel()\n  }\n})\n\npromise.then(() =\u003e {\n  console.log('Done animating')\n})\n```\n\n### Custom easing\n\n```typescript\nimport animate from 'animate-vanilla-js'\n\nanimate(\n  0, // from\n  100, // to\n  500, // duration\n  (t, b, c, d) =\u003e (c * t) / d + b, // easing function\n  value =\u003e {\n    // update function\n    console.log(value)\n    // Perform DOM manipulation\n  }\n).then(() =\u003e {\n  console.log('Done animating')\n})\n```\n\n#### Custom Easing Function\n\n| Parameter | Type     | Description     |\n| --------- | -------- | --------------- |\n| `t`       | `number` | Current time    |\n| `b`       | `number` | Beginning value |\n| `c`       | `number` | Change in value |\n| `d`       | `number` | Duration        |\n\n### Examples\n\n#### Animate to `height: auto`\n\n```typescript\nconst el = document.getElementById('el')\nconst toggleButton = document.getElementById('toggle-button')\n\ntoggleButton.addEventListener('click', () =\u003e {\n  if (el.classList.contains('open')) {\n    animate(el.scrollHeight, 0, 500, 'easeInOutQuad', value =\u003e {\n      el.style.height = `${value}px`\n    }).then(() =\u003e {\n      el.style.cssText = ''\n      el.classList.remove('open')\n      el.setAttribute('aria-hidden', 'true')\n      toggleButton.setAttribute('aria-expanded', 'false')\n    })\n  } else {\n    animate(0, el.scrollHeight, 500, 'easeInOutQuad', value =\u003e {\n      el.style.height = `${value}px`\n    }).then(() =\u003e {\n      el.style.cssText = ''\n      el.classList.add('open')\n      el.setAttribute('aria-hidden', 'false')\n      toggleButton.setAttribute('aria-expanded', 'true')\n    })\n  }\n})\n```\n\n#### Smooth Scroll\n\n```typescript\nfunction addEventListenerMulti(\n  element: Element | NodeList,\n  listeners: string,\n  callback: (arg0: Event) =\u003e void\n) {\n  function addListeners(el: Element) {\n    listeners\n      .split(' ')\n      .forEach(listener =\u003e el.addEventListener(listener, callback))\n  }\n\n  if (NodeList.prototype.isPrototypeOf(element)) {\n    ;[...(\u003cNodeList\u003eelement)].forEach(addListeners)\n  } else {\n    addListeners(\u003cElement\u003eelement)\n  }\n}\n\nfunction removeEventListenerMulti(\n  element: Element | NodeList,\n  listeners: string,\n  callback: (arg0: Event) =\u003e void\n) {\n  function removeListeners(el: Element) {\n    listeners\n      .split(' ')\n      .forEach(listener =\u003e el.removeEventListener(listener, callback))\n  }\n\n  if (NodeList.prototype.isPrototypeOf(element)) {\n    ;[...(\u003cNodeList\u003eelement)].forEach(removeListeners)\n  } else {\n    removeListeners(\u003cElement\u003eelement)\n  }\n}\n\nconst button = document.querySelector('.scroll-button')\nconst scrollAnchor = document.getElementById('scroll-anchor')\n\nbutton.addEventListener('click', () =\u003e {\n  const currentScrollPosition =\n    (document.documentElement \u0026\u0026 document.documentElement.scrollTop) ||\n    document.body.scrollTop\n  const scrollAnchorTop =\n    scrollAnchor.getBoundingClientRect().top + currentScrollPosition\n\n  const promise = animate(\n    currentScrollPosition,\n    scrollAnchorTop,\n    500,\n    'easeInQuad',\n    value =\u003e {\n      window.scrollTo(0, value)\n    }\n  )\n\n  promise.then(() =\u003e {\n    // Try to focus on element\n    scrollAnchor.focus()\n\n    // If that element was not able to be focused, set tabindex and then refocus\n    if (document.activeElement !== scrollAnchor) {\n      scrollAnchor.tabIndex = -1\n      scrollAnchor.focus()\n      // We can hide the outline here because normally this element wouldn't be focusable.\n      // We made it focusable so the tab order could be set correctly\n      scrollAnchor.style.outline = 'none'\n    }\n\n    cancelScroll()\n  })\n\n  addEventListenerMulti(\n    document.querySelectorAll('html, body'),\n    'scroll mousedown wheel DOMMouseScroll mousewheel touchmove',\n    cancelScroll\n  )\n\n  function cancelScroll() {\n    promise.cancel()\n    removeEventListenerMulti(\n      document.querySelectorAll('html, body'),\n      'scroll mousedown wheel DOMMouseScroll mousewheel touchmove',\n      cancelScroll\n    )\n  }\n})\n```\n\n## Browser Support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eiOS Safari |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE11, \u003e Edge 12                                                                                                                                                                                                 | \u003e 23                                                                                                                                                                                                              | \u003e 24                                                                                                                                                                                                          | \u003e 6.1                                                                                                                                                                                                         | \u003e 7.1                                                                                                                                                                                                                         |\n\n## Development\n\n**Start development server with hot module reloading**\n\n```sh\nyarn serve\n```\n\n**Build project for production**\n\n```sh\nyarn build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphegman%2Fanimate-vanilla-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphegman%2Fanimate-vanilla-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphegman%2Fanimate-vanilla-js/lists"}