{"id":18389565,"url":"https://github.com/anseki/anim-sequence","last_synced_at":"2025-04-07T02:34:31.215Z","repository":{"id":15424087,"uuid":"78117702","full_name":"anseki/anim-sequence","owner":"anseki","description":"Simple Animation Controller with Timeline","archived":false,"fork":false,"pushed_at":"2025-02-22T03:00:48.000Z","size":904,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-22T11:45:02.350Z","etag":null,"topics":["animation","animation-controller","frame","performance","performance-animation","preparation","repeat","requestanimationframe","reverse","timeline"],"latest_commit_sha":null,"homepage":"https://anseki.github.io/anim-sequence/","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/anseki.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":"2017-01-05T14:01:34.000Z","updated_at":"2025-02-22T02:59:44.000Z","dependencies_parsed_at":"2023-01-13T18:25:00.823Z","dependency_job_id":null,"html_url":"https://github.com/anseki/anim-sequence","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fanim-sequence","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fanim-sequence/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fanim-sequence/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fanim-sequence/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anseki","download_url":"https://codeload.github.com/anseki/anim-sequence/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247583489,"owners_count":20962041,"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","animation-controller","frame","performance","performance-animation","preparation","repeat","requestanimationframe","reverse","timeline"],"created_at":"2024-11-06T01:43:45.153Z","updated_at":"2025-04-07T02:34:26.206Z","avatar_url":"https://github.com/anseki.png","language":"JavaScript","readme":"# AnimSequence\n\n[![npm](https://img.shields.io/npm/v/anim-sequence.svg)](https://www.npmjs.com/package/anim-sequence) [![GitHub issues](https://img.shields.io/github/issues/anseki/anim-sequence.svg)](https://github.com/anseki/anim-sequence/issues) [![dependencies](https://img.shields.io/badge/dependencies-No%20dependency-brightgreen.svg)](package.json) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\nSimple Animation Controller with Timeline\n\n**\u003ca href=\"https://anseki.github.io/anim-sequence/\"\u003eDocument and Examples https://anseki.github.io/anim-sequence/\u003c/a\u003e**\n\n[![ss-01](ss-01.gif)](https://anseki.github.io/anim-sequence/)\n[![ss-02](ss-02.gif)](https://anseki.github.io/anim-sequence/)\n\nSimple lightweight library for high performance animation in a web page, makes preparations for each frame and calls the frames with optimized timeline for animation.\n\n## Methods\n\n### `AnimSequence.add`\n\n```js\nanimId = AnimSequence.add(valueCallback, frameCallback, duration, count, timing, reverse, timeRatio)\n```\n\nAdd new animation, and return `animId` that is used to start and remove the animation.  \n\nFor example:\n\n```js\nanimId = AnimSequence.add(\n  function(outputRatio) {\n    return 80 + (680 - 80) * outputRatio + 'px';\n  },\n  function(value) {\n    element.style.left = value;\n  },\n  3000, 0, 'ease-in-out');\n```\n\nArguments:\n\n#### `valueCallback`\n\n*Type:* function or `undefined`  \n*Default:* `undefined`\n\n```js\nvalue = valueCallback(outputRatio)\n```\n\nA function that returns a value that is used to draw each frame.  \nFor high performance animation, the function is called for all frames *before* the animation starts. That is, it makes preparations for each value that is used to draw the frame.\n\n`outputRatio` is a number ranging from `0` to `1` to calculate a value.  \nThe function can return something that is used to draw an frame. The value can be an Object or Array that contains multiple values.\n\nFor example, move an element rightward, it changes a `left` CSS property, from `80px` to `680px`.\n\n```js\n// Return `80px` when `outputRatio` is `0%` (0), `680px` when `outputRatio` is `100%` (1).\nfunction(outputRatio) {\n  // This value is used by `frameCallback` to draw a frame.\n  return 80 + (680 - 80) * outputRatio + 'px';\n}\n```\n\n#### `frameCallback`\n\n*Type:* function\n\n```js\ntoNext = frameCallback(value, finish, timeRatio, outputRatio)\n```\n\nA function that draws a frame.  \nThe function is called when it should draw a frame, it draws a frame with passed arguments.\n\n- `value` is something that was returned by [`valueCallback`](#valuecallback).\n- `finish` is `true` if the function should draw a last frame.\n- `timeRatio` is a number ranging from `0` to `1` to indicate the progress time of the animation played. It means also the ratio of the progress time and [`duration`](#duration).\n- `outputRatio` is the same as an argument of [`valueCallback`](#valuecallback).\n\nIf the function returns `false`, stop the animation forcedly.\n\nFor example, move an element rightward, it changes a `left` CSS property.\n\n```js\nfunction(value, finish, timeRatio, outputRatio) {\n  element.style.left = value; // It was already calculated by `valueCallback`.\n  if (finish) {\n    element.style.backgroundColor = 'red'; // Change the color to red at the right.\n  }\n}\n```\n\n#### `duration`\n\n*Type:* number\n\nA number determining how long (milliseconds) the animation will run.\n\n#### `count`\n\n*Type:* number  \n*Default:* `0`\n\nA number of times the animation should repeat. The animation will repeat forever if `0` is specified.\n\n#### `timing`\n\n*Type:* Array or string\n\nAn Array that is `[x1, y1, x2, y2]` as a \"timing function\" that indicates how to change the speed. It works same as that of [CSS animation](https://developer.mozilla.org/en/docs/Web/CSS/timing-function).\n\nYou can specify one of the following keywords also. These values mean [keywords for common timing functions](https://developer.mozilla.org/en/docs/Web/CSS/timing-function#Keywords_for_common_timing-functions).\n\n- `ease`\n- `linear`\n- `ease-in`\n- `ease-out`\n- `ease-in-out`\n\n#### `reverse`\n\n*Type:* boolean  \n*Default:* `false`\n\nThe animation plays backward if `true` is specified.  \nIt can be specified by [`AnimSequence.start`](#animsequencestart) also.\n\n#### `timeRatio`\n\n*Type:* number or boolean  \n*Default:* `0`\n\nA number ranging from `0` to `1` to play from the midst or `false` that prevents it starting.  \nIt can be specified by [`AnimSequence.start`](#animsequencestart) also.\n\n### `AnimSequence.remove`\n\n```js\nAnimSequence.remove(animId)\n```\n\nRemove an animation.\n\nArguments:\n\n#### `animId`\n\n*Type:* number\n\nThe `animId` that was returned by [`AnimSequence.add`](#animsequenceadd).\n\n### `AnimSequence.start`\n\n```js\nAnimSequence.start(animId, reverse, timeRatio)\n```\n\nStart an animation.\n\nArguments:\n\n#### `animId`\n\n*Type:* number\n\nThe `animId` that was returned by [`AnimSequence.add`](#animsequenceadd).\n\n#### `reverse`\n\n*Type:* boolean  \n*Default:* `false`\n\nThe animation plays backward if `true` is specified.\n\n#### `timeRatio`\n\n*Type:* number  \n*Default:* `0`\n\nA number ranging from `0` to `1` to play from the midst.\n\n### `AnimSequence.stop`\n\n```js\ntimeRatio = AnimSequence.stop(animId, getTimeRatioByFrame)\n```\n\nStop an animation.  \n`timeRatio` is a number ranging from `0` to `1` for restarting the animation from the frame that was stopped.\n\nArguments:\n\n#### `animId`\n\n*Type:* number\n\nThe `animId` that was returned by [`AnimSequence.add`](#animsequenceadd).\n\n#### `getTimeRatioByFrame`\n\n*Type:* boolean  \n*Default:* `false`\n\nIf `true` is specified, return `timeRatio` of the last played frame.\n\n### `AnimSequence.validTiming`\n\n```js\nisValid = AnimSequence.validTiming(timing)\n```\n\nCheck whether an Array or string as [`timing`](#timing) is valid.\n\n---\n\nThanks for images: [CGvector](http://www.cgvector.com/), [Vecteezy](https://www.vecteezy.com/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fanim-sequence","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanseki%2Fanim-sequence","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fanim-sequence/lists"}