{"id":21855068,"url":"https://github.com/wix-incubator/react-sequence-animator","last_synced_at":"2025-04-14T18:07:38.737Z","repository":{"id":45960040,"uuid":"138884589","full_name":"wix-incubator/react-sequence-animator","owner":"wix-incubator","description":"A React library for sequence animations","archived":false,"fork":false,"pushed_at":"2023-06-28T11:18:48.000Z","size":15810,"stargazers_count":26,"open_issues_count":5,"forks_count":8,"subscribers_count":74,"default_branch":"master","last_synced_at":"2025-04-14T18:07:32.305Z","etag":null,"topics":["animation","react","sequence","sequence-animation"],"latest_commit_sha":null,"homepage":"https://wix-incubator-react-sequence-animator.surge.sh","language":"TypeScript","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/wix-incubator.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-27T13:21:27.000Z","updated_at":"2025-04-09T01:06:25.000Z","dependencies_parsed_at":"2024-06-21T16:41:31.410Z","dependency_job_id":"f7141e52-2165-48ec-a52a-7f977a0552b0","html_url":"https://github.com/wix-incubator/react-sequence-animator","commit_stats":{"total_commits":45,"total_committers":4,"mean_commits":11.25,"dds":0.06666666666666665,"last_synced_commit":"01c41597292522fd9e8a383b540083c5f37fb096"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-sequence-animator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-sequence-animator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-sequence-animator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-sequence-animator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wix-incubator","download_url":"https://codeload.github.com/wix-incubator/react-sequence-animator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248933338,"owners_count":21185460,"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","react","sequence","sequence-animation"],"created_at":"2024-11-28T02:13:18.654Z","updated_at":"2025-04-14T18:07:38.708Z","avatar_url":"https://github.com/wix-incubator.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-sequence-animator\nThis is a supper simple React library that lets us create animations in an easy and straight forward manner.\n\nThe idea behind this library was to create animations that can be controlled very easily.\n\nFor example, a loader that has smooth transitions to a *success* and *fail* mode:\n\n![Advanced Sequence Animation](./statics/AdvancedSequenceAnimator.gif?raw=true \"Advanced Sequence Animation\")\n\n## How to Install\n```sh\nnpm install --save react-sequence-animator\n```\nor\n```sh\nyarn add react-sequence-animator\n```\n\n## What You Get\n\nThe library has two components:\n`SpriteAnimator` and `SequenceAnimator`.\n\n### `SpriteAnimator`\n\nThe `SpriteAnimator` receives one child, which it respects as a sprite image, a `getPosition` function,\nwhich for every frame number should return a position object of the form: `{top: 0, left: 0, width: 100, height: 100}`,\nand the number of frames in the sequence.\n\nIn order to use this component you should know where each frame is located in the sprite image.\n\n```javascript\nimport { SpriteAnimator } from 'react-sequence-animator';\nimport sprite from './sprites-cat-running.png';\n\nconst WIDTH = 512;\nconst HEIGHT = 256;\n\nclass SpriteAnimatorStory extends React.Component {\n  constructor() {\n    super();\n    this._getPosition = this._getPosition.bind(this);\n  }\n\n  render() {\n    return (\n      \u003cSpriteAnimator autoplay numOfFrames={8} getPosition={this._getPosition}\u003e\n        \u003cimg src={sprite} alt=\"my-sprite\" width={WIDTH * 4} height={HEIGHT * 2}/\u003e\n      \u003c/SpriteAnimator\u003e\n    );\n  }\n\n  _getPosition(frame) {\n    return {\n      width: WIDTH,\n      height: HEIGHT,\n      top: (frame \u003c 4) ? 0 : HEIGHT,\n      left: (frame % 4) * WIDTH\n    };\n  }\n}\n```\n\nThe `SpriteAnimator` receives several props:\n\n|Name|Type|default|Description|\n|:---|:---|:---|:---|\n|`children`| a single node | --- | the sprite to be \"played\"\n|`getPosition`| function | () =\u003e {top: 0, left: 0, width: '100%', height: '100%'} | a function that is called for each frame and should return the position of the frame in the sprite\n|`numOfFrames`| number | 0 | the number of frames in the animation\n|`autoplay`| bool | true | should play automatically or not\n|`duration`| number | 1000 | the duration in milliseconds of the animation\n|`loop`| bool | true | should play in a loop\n|`easing`| string | 'linear' | the easing of the animation (read more about this [here](#easing))\n|`onSequenceEnd`| func | () =\u003e {} | a callback function that is called each time the sequence reached its end\n|`onAnimationStop`| func | () =\u003e {} | a callback function that is called when the animation stops completely\n\n##### Notice: There's no restriction on the type of element the child should be. It can also be an SVG or even a react component or a div\n\n#### API\n`play` - Plays the animation (from the current frame)\n\n`stop` - Stops the animation\n\n`reset` - Resets the animation to the first frame (0)\n\n\n### `SequenceAnimator`\nThe `SequenceAnimator` receives a sequence of images as its children, and *\"plays\"* them one after the other.\n\n```javascript\nimport { SequenceAnimator } from 'react-sequence-animator';\nimport cat1 from './statics/cat1.png';\nimport cat2 from './statics/cat2.png';\nimport cat3 from './statics/cat3.png';\nimport cat4 from './statics/cat4.png';\nimport cat5 from './statics/cat5.png';\nimport cat6 from './statics/cat6.png';\nimport cat7 from './statics/cat7.png';\nimport cat8 from './statics/cat8.png';\n\nclass SequenceAnimatorExample extends React.Component {\n  render() {\n    return (\n      \u003cSequenceAnimator\u003e\n        \u003cimg src={cat1} alt=\"cat1\"/\u003e\n        \u003cimg src={cat2} alt=\"cat2\"/\u003e\n        \u003cimg src={cat3} alt=\"cat3\"/\u003e\n        \u003cimg src={cat4} alt=\"cat4\"/\u003e\n        \u003cimg src={cat5} alt=\"cat5\"/\u003e\n        \u003cimg src={cat6} alt=\"cat6\"/\u003e\n        \u003cimg src={cat7} alt=\"cat7\"/\u003e\n        \u003cimg src={cat8} alt=\"cat8\"/\u003e\n      \u003c/SequenceAnimator\u003e\n    );\n  }\n}\n```\n\nThe `SequenceAnimator` receives several props:\n\n|Name|Type|default|Description|\n|:---|:---|:---|:---|\n|`children`| node or array of nodes | [] | the nodes to be \"played\"\n|`autoplay`| bool | true | should play automatically or not\n|`duration`| number | 1000 | the duration in milliseconds of the animation\n|`loop`| bool | true | should play in a loop\n|`easing`| string | 'linear' | the easing of the animation (read more about this [here](#easing))\n|`onSequenceEnd`| func | () =\u003e {} | a callback function that is called each time the sequence reached its end\n|`onAnimationStop`| func | () =\u003e {} | a callback function that is called when the animation stops completely\n\n##### Notice: There's no restriction on the types of elements the children should be. They can also be SVG's or even react components or divs\n\n#### API\n`play` - Plays the animation (from the current frame)\n\n`stop` - Stops the animation\n\n`reset` - Resets the animation to the first frame (0)\n\n## Easing\nThe components can apply to the animations, easings as described in the library [easing-utils](https://github.com/AndrewRayCode/easing-utils).\n\nIt was initially introduced in order to allow control of the animation's duration (using the linear easing), but other easings may be applied.\n\nIt is recommended to use easings only on linear animations.\n\n#### Notice: When using easings other than *linear*, we cannot be assured that all frames will be played\n\n### Example:\n\n![Ball Easing Example](./statics/BallEasingAnimation.gif?raw=true \"Ball Easing Example\")\n\nBoth of the basketball animations above use the same sequence of images.\n\nThe right animation is played with a linear easing; A ball falling in a constant velocity.\n\nAdding the easing `easeOutBounce` gives us the feeling of a ball in free fall, and bouncing after hitting the ground (left animation).\n\nNotice how the eased animation (on the left) isn't as smooth as the linear animation.\n\nThat happens because the `easeOutBounce` skips some frames at the end.\n\nIn order to achieve a smoother animation, we would have needed much more frames (which really isn't cost effective).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Freact-sequence-animator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwix-incubator%2Freact-sequence-animator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Freact-sequence-animator/lists"}