{"id":21571141,"url":"https://github.com/cheprasov/js-web-animation","last_synced_at":"2025-03-18T06:15:25.458Z","repository":{"id":33861628,"uuid":"161853689","full_name":"cheprasov/js-web-animation","owner":"cheprasov","description":" Simple class WebAnimation for perform an animation on the web via JavaScript. It is based on requestAnimationFrame for performance.","archived":false,"fork":false,"pushed_at":"2023-01-03T15:38:41.000Z","size":897,"stargazers_count":2,"open_issues_count":16,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-25T04:05:02.107Z","etag":null,"topics":["requestanimationframe","tween","web-animation"],"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/cheprasov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"cheprasov","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-12-15T00:08:38.000Z","updated_at":"2021-06-10T19:43:13.000Z","dependencies_parsed_at":"2023-01-15T03:01:14.818Z","dependency_job_id":null,"html_url":"https://github.com/cheprasov/js-web-animation","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/cheprasov%2Fjs-web-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheprasov%2Fjs-web-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheprasov%2Fjs-web-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheprasov%2Fjs-web-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cheprasov","download_url":"https://codeload.github.com/cheprasov/js-web-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244110170,"owners_count":20399562,"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":["requestanimationframe","tween","web-animation"],"created_at":"2024-11-24T11:15:00.600Z","updated_at":"2025-03-18T06:15:25.437Z","avatar_url":"https://github.com/cheprasov.png","language":"JavaScript","funding_links":["https://github.com/sponsors/cheprasov"],"categories":[],"sub_categories":[],"readme":"[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n\n@cheprasov/web-animation\n=========\n\nSimple class WebAnimation for perform an animation on the web via JavaScript. It is based on requestAnimationFrame for performance.\n\n##### Features:\n- Based on requestAnimationFrame for performance.\n- It allows to use any functions fo easing.\n- Easy to use for looped animation.\n\n### 1. How to install\n\n```bash\n\u003e npm install @cheprasov/web-animation\n```\n\n```javascript\nimport WebAnimation from '@cheprasov/web-animation';\n```\n\n### 2. Quick examples\n\nExample 1: Moving div to left on 500px for 2 sec with easing f(x) = n^2. \n\n```javascript\nimport WebAnimation from '@cheprasov/web-animation';\n\nconst div1 = document.getElementById('div1');\n\nconst animation = new WebAnimation({\n    duration: 2000,\n    easing: n =\u003e n ** 2,\n});\n\nconst move = 500;\n\nanimation.setOnStep((progress) =\u003e {\n    const shiftX = progress.tween * move;\n    div1.style.transform = `translate3d(${shiftX}px, 0, 0)`;\n});\n\nanimation.setOnFinish(() =\u003e {\n    div1.style.transform = 'none';\n    div1.style.left = `${move}px`;\n});\n\nanimation.run();\n```\n\n### 3. Documentation\n\n#### constructor ( options = {...} )\n\n- **`duration`**: `number`, `optional`, `default = 1000`. Duration time (ms) for animation.\n\n- **`easing`**: `function`, `optional`, `default = (n =\u003e n)`. Easing function for animation tween.\n    **Arguments:** \n    - **`ratio`**: `number` - Ratio of `elapsedTime / duration`\n       \n    **Returns** `number`. Return of the function will be used like tween for animation progress.\n \n- **`rAF`**: `function`, `optional`, `default = window.requestAnimationFrame`. Function for animation tick.\n    **Arguments:** \n    - **`function`** - the functions which should be called on animation tick. \n    \n- **`onStep`**: `function`, `optional`, `default = null`. Function will be called on each animation step.\n    **Arguments:** \n    - **`progress`** - object with progress state of animation (see more below).\n    - **`animation`** - link to instance of `WebAnimation` class.\n    \n- **`onStop`**: `function`, `optional`, `default = null`. Function will be called when animation terminated by call `stop()` method.\n    **Arguments:** \n    - **`progress`** - object with progress state of animation (see more below).\n    - **`animation`** - link to instance of `WebAnimation` class.\n    \n- **`onFinish`**: `function`, `optional`, `default = null`. Function will be called when animation is finished.\n    **Arguments:** \n    - **`progress`** - object with progress state of animation (see more below).\n    - **`animation`** - link to instance of `WebAnimation` class.\n    \nExample:    \n```javascript\nconst options = {\n    duration: 2000,\n    easing: n =\u003e n ** 2,\n    onStep: (progress) =\u003e {\n        someDiv.style.opacity = progress.tween;\n    },\n    onFinish: (progress) =\u003e {\n        someDiv.style.display = 'none';\n    },\n};\n\nconst animation = new WebAnimation(options);\n```\n    \n#### Object `progress` for onStep, onStop, onFinish methods\n\n- **`elapsedTime`**: `number` - Elapsed time\n- **`ratio`**: `number` - Ratio of elapsed time / duration. `0 \u003c= n \u003c= 1` \n- **`tween`**: `number` - Tween value for animation. `tween = easing(ratio)`\n- **`isFinished`**: `boolean` - Is animation finished?  \n\nExample:\n```\n{\n    elapsedTime: 1000,\n    ratio: 0.2,\n    tween: 0.04,\n    isFinished: false,\n}\n```\n\n#### run()\n\nMethod run to perform animation.\n\n```javascript\nconst animation = new WebAnimation();\nanimation.run();\n```\n\n#### stop()\n\nMethod run to stop animation. It will call `onStop` callback;\n\n```javascript\nconst animation = new WebAnimation({\n    duration: 1000,\n    onStop: (progress) =\u003e {\n        console.log('Animation progress', progress);    \n    },\n});\n\nanimation.run();\n\nsetTimeout(() =\u003e {\n    animation.stop();\n}, 500);\n```\n\n#### setOnStop(function)\nSetter for onStop callback.\n```javascript\nanimation.setOnStop((progress, animation) =\u003e {\n    console.log('Animation is stopped');\n})\n```\n    \n#### setOnStep(function)\nSetter for onStep callback.\n```javascript\nanimation.setOnStep((progress, animation) =\u003e {\n    console.log('Animation step');\n})\n```\n\n#### setOnFinish(function)\nSetter for onFinish callback.\n```javascript\nanimation.setOnFinish((progress, animation) =\u003e {\n    console.log('Animation is finished');\n})\n```\n\n#### getProgress(): `progress`\nGet progress state of animation. See `progress` object above.\n \n```javascript\nsetTimeout(() =\u003e {\n    console.log('Animation progress', animation.getProgress());\n}, 100);\n```\n## Something does not work\n\nFeel free to fork project, fix bugs, tests and finally request for pull\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheprasov%2Fjs-web-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheprasov%2Fjs-web-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheprasov%2Fjs-web-animation/lists"}