{"id":13393588,"url":"https://github.com/bendc/animateplus","last_synced_at":"2025-05-14T06:11:43.489Z","repository":{"id":31937137,"uuid":"35506729","full_name":"bendc/animateplus","owner":"bendc","description":"A+ animation module for the modern web","archived":false,"fork":false,"pushed_at":"2018-07-10T07:56:42.000Z","size":78,"stargazers_count":5959,"open_issues_count":0,"forks_count":279,"subscribers_count":152,"default_branch":"master","last_synced_at":"2025-05-11T00:46:32.524Z","etag":null,"topics":["animation","css","design","javascript","motion","svg"],"latest_commit_sha":null,"homepage":"","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/bendc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-12T18:54:16.000Z","updated_at":"2025-05-07T15:36:34.000Z","dependencies_parsed_at":"2022-07-14T08:49:39.107Z","dependency_job_id":null,"html_url":"https://github.com/bendc/animateplus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bendc%2Fanimateplus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bendc%2Fanimateplus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bendc%2Fanimateplus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bendc%2Fanimateplus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bendc","download_url":"https://codeload.github.com/bendc/animateplus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254079998,"owners_count":22011306,"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","design","javascript","motion","svg"],"created_at":"2024-07-30T17:00:56.499Z","updated_at":"2025-05-14T06:11:43.433Z","avatar_url":"https://github.com/bendc.png","language":"JavaScript","readme":"# Animate Plus\n\nAnimate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It\naims to deliver a steady 60 FPS and weighs less than 3 KB (minified and compressed), making it particularly well-suited for mobile.\n\n## Getting started\n\n`npm install animateplus` or download `animateplus.js` and start animating things:\n\n```javascript\nimport animate from \"/animateplus.js\";\n\nanimate({\n  elements: \"div\",\n  duration: 2000,\n  delay: index =\u003e index * 100,\n  transform: [\"scale(0)\", \"scale(1)\"]\n})\n.then(options =\u003e animate({\n  ...options,\n  transform: [\"translate(0%)\", \"translate(500%)\"]\n}));\n```\n\n[Preview this example \u0026#8594;](http://animateplus.com/examples/getting-started/)\n\n## Options\n\n### elements\n\n| Default | Type\n| :---    | :---\n| `null`  | String \\| Element \\| NodeList \\| Array\n\nDetermines the DOM elements to animate. You can either pass it a CSS selector or DOM elements.\n\n```javascript\nanimate({\n  elements: document.body.children,\n  transform: [\"rotate(0turn)\", \"rotate(1turn)\"]\n});\n```\n\n### easing\n\n| Default       | Type\n| :---          | :---\n| `out-elastic` | String\n\nDetermines the acceleration curve of your animation.\n\n| constant | accelerate     | decelerate      | accelerate-decelerate\n| :---     | :---           | :---            | :---\n| linear   | in-cubic       | out-cubic       | in-out-cubic\n|          | in-quartic     | out-quartic     | in-out-quartic\n|          | in-quintic     | out-quintic     | in-out-quintic\n|          | in-exponential | out-exponential | in-out-exponential\n|          | in-circular    | out-circular    | in-out-circular\n|          | in-elastic     | out-elastic     | in-out-elastic\n\nThe amplitude and period of elastic easings can be configured by providing space-separated values.\nAmplitude defaults to `1`, period to `0.4`.\n\n```javascript\n// Increase elasticity\nanimate({\n  elements: \"span\",\n  easing: \"out-elastic 1.4 0.2\",\n  transform: [\"translate(0px)\", \"translate(500px)\"]\n});\n```\n\n### duration\n\n| Default | Type\n| :---    | :---\n| `1000`  | Number \\| Function\n\nDetermines the duration of your animation in milliseconds. By passing it a callback, you can define\na different duration for each element. The callback takes the index of each element as its argument\nand returns a number.\n\n```javascript\n// First element fades out in 1s, second element in 2s, etc.\nanimate({\n  elements: \"span\",\n  easing: \"linear\",\n  duration: index =\u003e (index + 1) * 1000,\n  opacity: [1, 0]\n});\n```\n\n### delay\n\n| Default | Type\n| :---    | :---\n| `0`     | Number \\| Function\n\nDetermines the delay of your animation in milliseconds. By passing it a callback, you can define\na different delay for each element. The callback takes the index of each element as its argument\nand returns a number.\n\n```javascript\n// First element fades out after 1s, second element after 2s, etc.\nanimate({\n  elements: \"span\",\n  easing: \"linear\",\n  delay: index =\u003e (index + 1) * 1000,\n  opacity: [1, 0]\n});\n```\n\n### loop\n\n| Default | Type\n| :---    | :---\n| `false` | Boolean\n\nDetermines if the animation should repeat.\n\n### direction\n\n| Default  | Type\n| :---     | :---\n| `normal` | String\n\nDetermines the direction of the animation. `reverse` runs the animation backwards, `alternate`\nswitches direction after each iteration if the animation loops.\n\n### speed\n\n| Default | Type\n| :---    | :---\n| `1`     | Number\n\nDetermines the animation playback rate. Useful in the authoring process to speed up some parts of a\nlong sequence (value above 1) or slow down a specific animation to observe it (value below 1).\n\n### optimize\n\n| Default | Type\n| :---    | :---\n| `false` | Boolean\n\nForces hardware acceleration during an animation if set to `true`. Unless you experience performance\nissues, it's recommended to leave it off as hardware acceleration comes with potentially harmful\nside-effects.\n\n### blur\n\n| Default | Type\n| :---    | :---\n| `null`  | Object \\| Function\n\nSimulates a motion blur effect. Takes an object or a function returning an object that specifies the\nstrength of the directional blur on the `x` and `y` axes. A missing axis defaults to `0`, which\ndisables the blur on that axis.\n\n```javascript\nanimate({\n  elements: \"circle\",\n  easing: \"out-exponential\",\n  duration: 2500,\n  loop: true,\n  direction: \"alternate\",\n  blur: {x: 20, y: 2},\n  transform: [\"translate(0%)\", \"translate(80%)\"]\n});\n```\n\n[Preview this example \u0026#8594;](http://animateplus.com/examples/motion-blur/)\n\n### change\n\n| Default | Type\n| :---    | :---\n| `null`  | Function\n\nDefines a callback invoked on every frame of the animation. The callback takes as its argument the\nanimation progress (between 0 and 1) and can be used on its own without being tied to `elements`.\n\n```javascript\n// Linearly outputs the percentage increase during 5s\nanimate({\n  duration: 5000,\n  easing: \"linear\",\n  change: progress =\u003e\n    document.body.textContent = `${Math.round(progress * 100)}%`\n});\n```\n\n## Animations\n\nAnimate Plus lets you animate HTML and SVG elements with any property that takes numeric values,\nincluding hexadecimal colors.\n\n```javascript\n// Animate the radius and fill color of an SVG circle\nanimate({\n  elements: \"circle\",\n  r: [0, 50],\n  fill: [\"#80f\", \"#fc0\"]\n});\n```\n\nEach property you animate needs an array defining the start and end values. For convenience, you can\nomit everything but the numbers in the end values.\n\n```javascript\n// Same as [\"translate(0px)\", \"translate(100px)\"]\nanimate({\n  elements: \"span\",\n  transform: [\"translate(0px)\", 100]\n});\n```\n\nThese arrays can optionally be returned by a callback that takes the index of each element, just\nlike with [duration](#duration) and [delay](#delay).\n\n```javascript\n// First element translates by 100px, second element by 200px, etc.\nanimate({\n  elements: \"span\",\n  transform: index =\u003e [\"translate(0px)\", (index + 1) * 100]\n});\n```\n\n## Promise\n\n`animate()` returns a promise which resolves once the animation finishes. The promise resolves to\nthe object initially passed to `animate()`, making animation chaining straightforward and\nconvenient. The [Getting started](#getting-started) section gives you a basic promise example.\n\nSince Animate Plus relies on native promises, you can benefit from all the usual features promises\nprovide, such as `Promise.all`, `Promise.race`, and especially `async/await` which makes animation\ntimelines easy to set up.\n\n```javascript\nconst play = async () =\u003e {\n  const options = await animate({\n    elements: \"span\",\n    duration: 3000,\n    transform: [\"translateY(-100vh)\", 0]\n  });\n\n  await animate({\n    ...options,\n    transform: [\"rotate(0turn)\", 1]\n  });\n\n  await animate({\n    ...options,\n    duration: 800,\n    easing: \"in-quintic\",\n    transform: [\"scale(1)\", 0]\n  });\n};\n\nplay();\n```\n\n[Preview this example \u0026#8594;](http://animateplus.com/examples/timeline/)\n\n## Additional functions\n\n### stop\n\nStops the animations on the [elements](#elements) passed as the argument.\n\n```javascript\nimport {stop} from \"/animateplus.js\";\n\nanimate({\n  elements: \"span\",\n  easing: \"linear\",\n  duration: index =\u003e 8000 + index * 200,\n  loop: true,\n  transform: [\"rotate(0deg)\", 360]\n});\n\ndocument.addEventListener(\"click\", ({target}) =\u003e stop(target));\n```\n\n[Preview this example \u0026#8594;](http://animateplus.com/examples/stop/)\n\n### delay\n\nSets a timer in milliseconds. It differentiates from `setTimeout()` by returning a promise and being\nmore accurate, consistent and battery-friendly. The [delay](#delay) option relies internally on\nthis method.\n\n```javascript\nimport {delay} from \"/animateplus.js\";\n\ndelay(500).then(time =\u003e console.log(`${time}ms elapsed`));\n```\n\n## Browser support\n\nAnimate Plus is provided as a native ES2015 module, which means you may need to transpile it\ndepending on your browser support policy. The library works as is using `\u003cscript type=module\u003e` in\nthe following browsers:\n\n* Chrome 61\n* Safari 11.1\n* Firefox 60\n\n## Content delivery networks\n\nAnimate Plus is available on [CDNJS](https://cdnjs.com/libraries/animateplus) and [jsDelivr](https://www.jsdelivr.com/package/npm/animateplus).\n\n```javascript\nimport animate from \"https://cdn.jsdelivr.net/npm/animateplus@2/animateplus.js\";\n\nanimate({\n  elements: \"div\",\n  transform: [\"translate(0%)\", 100]\n});\n```\n\n## Best practices\n\nAnimations play a major role in the design of good user interfaces. They help connecting actions to\nconsequences, make the flow of interactions manifest, and greatly improve the polish and perception\nof a product. However, animations can be damaging and detrimental to the user experience if they get\nin the way. Here are a few best practices to keep your animations effective and enjoyable:\n\n* **Speed**: Keep your animations fast. A quick animation makes a software feel more productive and\n  responsive. The optimal duration depends on the effect and animation curve, but in most cases you\nshould likely stay under 500 milliseconds.\n* **Easing**: The animation curve contributes greatly to a well-crafted animation. The ease-out\n  options are usually a safe bet as animations kick off promptly, making them react to user\ninteractions instantaneously.\n* **Performance**: Having no animation is better than animations that stutter. When animating HTML\n  elements, aim for using exclusively `transform` and `opacity` as these are the only properties\nbrowsers can animate cheaply.\n* **Restraint**: Tone down your animations and respect user preferences. Animations can rapidly feel\n  overwhelming and cause motion sickness, so it's important to keep them subtle and to attenuate\nthem even more for users who need reduced motion, for example by using `matchMedia(\"(prefers-reduced-motion)\")` in JavaScript.\n\n## Examples\n\n* [Stress test](http://animateplus.com/examples/stress-test/): 500 elements animated concurrently.\n* [Burst](http://animateplus.com/examples/burst/): Intensive burst animation based on `mousemove`/`touchmove`.\n* [Accordion](http://animateplus.com/examples/accordion/): Animated accordion.\n* [Morphing](http://animateplus.com/examples/clip-path/): CSS polygon morphing using `clip-path`.\n* [Motion path](http://animateplus.com/examples/motion-path/): Animation along a custom path.\n* [Line drawing](http://animateplus.com/examples/line-drawing/): SVG line drawing animation.\n* [Elasticity](http://animateplus.com/examples/elasticity/): SVG circles following your clicks.\n* [External SVG](http://animateplus.com/examples/external-svg/): Animating paths from an external\n  SVG file.\n* [Anchors](http://animateplus.com/examples/anchor-scroll/): Anchor scrolling animation using `change()`.\n* [Progress](http://animateplus.com/examples/progress/): Animation progress using `change()`.\n* [Text](http://animateplus.com/examples/text/): Text splitting animation.\n","funding_links":[],"categories":["JavaScript","Animations","Utilities","Libraries","Common"],"sub_categories":["React Components","JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbendc%2Fanimateplus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbendc%2Fanimateplus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbendc%2Fanimateplus/lists"}