{"id":21009242,"url":"https://github.com/shisama/pulsator-js","last_synced_at":"2025-05-15T02:33:03.552Z","repository":{"id":29351216,"uuid":"120489291","full_name":"shisama/Pulsator-JS","owner":"shisama","description":"Pulse animation using Web Animations API","archived":false,"fork":false,"pushed_at":"2025-05-12T20:31:23.000Z","size":52840,"stargazers_count":1,"open_issues_count":13,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T21:41:03.139Z","etag":null,"topics":["animation","javascript","pulse"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/pulsator","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/shisama.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2018-02-06T16:36:49.000Z","updated_at":"2021-09-21T18:49:30.000Z","dependencies_parsed_at":"2024-09-16T22:02:32.052Z","dependency_job_id":"1b48fce4-3db8-4d39-a32f-55124b785fc5","html_url":"https://github.com/shisama/Pulsator-JS","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shisama%2FPulsator-JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shisama%2FPulsator-JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shisama%2FPulsator-JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shisama%2FPulsator-JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shisama","download_url":"https://codeload.github.com/shisama/Pulsator-JS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254262521,"owners_count":22041437,"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","javascript","pulse"],"created_at":"2024-11-19T09:16:01.555Z","updated_at":"2025-05-15T02:33:00.862Z","avatar_url":"https://github.com/shisama.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pulsator JS\nPulse animation with Web Animations API inspired by [Pulsator](https://github.com/shu223/Pulsator)\n\n![](capture/pulsator.gif)\n\n##  [Demo](https://shisama.github.io/Pulsator-JS/demo/)\n\n## Usage\n+ Install\n`npm install pulsator --save`\n\n+ import pulsator.js in your JavaScript files\n\n  `import Pulsator from \"pulsator\"`\n\n+ create Pulsator instance with arguments\n  * options: object for changing pulsator\n  \n`const pulsator = new Pulsator(options)`\n\nexample(below is a part of [Demo](https://shisama.github.io/Pulsator-JS/demo/))\n\n\n```typescript\nimport Pulsator, {Options} from \"pulsator\";\n\nconst options: Options = {\n  style: {\n    width: \"20px\",\n    height: \"20px\",\n  },\n  color: {\n    r: 244,\n    g: 67,\n    b: 54\n  },\n  duration: 1200,\n  iterations: 10,\n};\n\nconst parent = document.querySelector(\".demo-space\");\nconst pulsator = new Pulsator(options);\nconst el = pulsator.getElement();\nel.style.position = \"absolute\";\n\nif (parent === null) {\n  throw new Error('Parent node is null');\n}\nparent.appendChild(el);\n\nparent.addEventListener('click', (e) =\u003e {\n  if (e instanceof MouseEvent) {\n    pulsator.startByMouseEvent(e)\n  }\n});\n\nel.addEventListener('mouseover', () =\u003e pulsator.pause());\n\nel.addEventListener('mouseleave', () =\u003e pulsator.start());\n\nwindow.addEventListener('keydown', e =\u003e {\n  switch(e.key) {\n    case 'Escape':\n      pulsator.stop();\n      break;\n    case 'Enter':\n      pulsator.reverse();\n      break;\n  }\n});\n\n```\n\n## API\n### start()\nThis starts pulse animation\n\n### startByMouseEvent(e: MouseEvent)\nThis starts pulse animation triggered by mouse event.\nThis takes MouseEvent object as an argument.\n\n### stop()\nThis stops pulse animation\n\n### pause()\nThis s pulse animation\n\n### reverse()\nThis reverses pulse animation\n\n### getElement()\nThis returns the element of pulsator\n\n## Options\n\n```typescript\nexport type Options = Partial\u003c{\n  style: Partial\u003c{\n    width: string | number; // default: 15px\n    height: string | number; // default: 15px\n  }\u003e;\n  duration: number; // default: 1500\n  iterations: number; // default: Infinity\n  color: Partial\u003c{\n    r: number; // default: 255\n    g: number; // default: 0\n    b: number; // default: 0\n  }\u003e\n}\u003e;\n```\n\n# Browser compatibility\nsee [Web Animations API Browser compatibility](https://caniuse.com/web-animation)!\n\n# LICENSE\nThis project is licensed under the terms of the [MIT license](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshisama%2Fpulsator-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshisama%2Fpulsator-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshisama%2Fpulsator-js/lists"}