{"id":15063243,"url":"https://github.com/jmdisuanco/jm-react-anime","last_synced_at":"2025-04-10T10:42:38.773Z","repository":{"id":92794946,"uuid":"197388604","full_name":"jmdisuanco/jm-react-anime","owner":"jmdisuanco","description":"JM's react-animejs","archived":false,"fork":false,"pushed_at":"2021-02-24T13:24:13.000Z","size":4376,"stargazers_count":26,"open_issues_count":4,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T12:59:39.615Z","etag":null,"topics":["animation","anime","animejs","library","react","react-anime","react-animejs","reactjs"],"latest_commit_sha":null,"homepage":"https://jmdisuanco.github.io/jm-react-anime","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/jmdisuanco.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,"governance":null}},"created_at":"2019-07-17T12:49:43.000Z","updated_at":"2024-04-28T17:06:14.000Z","dependencies_parsed_at":"2023-06-07T21:45:22.158Z","dependency_job_id":null,"html_url":"https://github.com/jmdisuanco/jm-react-anime","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.125,"last_synced_commit":"327d1a9bef74841a6fa4d7c80ea13ddabccaff9d"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmdisuanco%2Fjm-react-anime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmdisuanco%2Fjm-react-anime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmdisuanco%2Fjm-react-anime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmdisuanco%2Fjm-react-anime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmdisuanco","download_url":"https://codeload.github.com/jmdisuanco/jm-react-anime/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248199773,"owners_count":21063755,"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","anime","animejs","library","react","react-anime","react-animejs","reactjs"],"created_at":"2024-09-24T23:53:52.806Z","updated_at":"2025-04-10T10:42:38.753Z","avatar_url":"https://github.com/jmdisuanco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JM's react-animejs\n\nA React animation library for creating amazing React App.\n\n\u003cimg src=\"docs/assets/react-animejs-hero-demo.gif\" alt=\"react-animejs\" width=\"80%\"/\u003e\n\n[Live demo](https://jmdisuanco.github.io/jm-react-anime/)\n\n## Getting Started\n\n### Prerequisites\n\n```\nReact 16.8 and above\n```\n\n### Installing\n\nOn your React project directory run\n\n```\nnpm i react-animejs\n```\n\nor\n\n```\nyarn add react-animejs\n```\n\n## Usage\n\n- Import ReactAnime\n\n```\nimport ReactAnime from 'react-animejs'\nconst {Anime, stagger} = ReactAnime\n```\n\n- Basic Usage\n\n```javascript\n\u003cAnime\n  initial={[\n    {\n      targets: \"#Box\",\n      translateX: 50,\n      easing: \"linear\"\n    }\n  ]}\n\u003e\n  \u003cdiv id=\"Box\" style={{ height: 50, width: 50, background: \"#d3d\" }} /\u003e\n\u003c/Anime\u003e\n```\n\n- Working with Keyframe\n\n```javascript\n\u003cAnime\n  initial={[\n    {\n      targets: \"#Box\",\n      keyframes: [\n        {\n          translateX: 50\n        },\n        {\n          translateY: 50\n        },\n        {\n          translateX: 0\n        },\n        {\n          translateY: 0\n        }\n      ],\n      // easing:'spring',\n      duration: 3500,\n      loop: true\n    }\n  ]}\n\u003e\n  \u003cBox /\u003e\n\u003c/Anime\u003e\n```\n\n- Working with timeline\n\n```javascript\n\u003cAnime\n      initial={[\n        { //1st segment\n          targets: \".tl_square\",\n          translateX: 250\n        },\n        { //2nd\n          targets: \".tl_circle\",\n          translateX: 250\n        },\n        { //3rd\n          targets: \".tl_triangle\",\n          translateX: 250\n        }\n      ]}\n    \u003e\n\n```\n\n- With Controller Scrubber\n\n\u003cimg src=\"docs/assets/react-animejs-scrubber-demo.gif\" alt=\"react-animejs scrubber demo\" width=\"250\"/\u003e\n\nimportant: use `setMeta` to `\u003cAnime\u003e` compontent like `\u003cAnime setMeta={setMea} ...`\n\n```javascript\nconst ControlledDemo = () =\u003e {\n  const [control, setControl] = useState(null); //controller state\n\n  const [meta, setMeta] = useState({\n    //meta state of the player\n    control: control,\n    progress: 0,\n    currentTime: 0,\n    duration: 0\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cAnime\n        control={control}\n        setMeta={setMeta} // important to pull state of the player\n        animeConfig={{\n          autoplay: false,\n          duration: 1500,\n          easing: \"easeInOutSine\"\n        }}\n        initial={[\n          {\n            targets: \".tl_square\",\n            translateX: 250\n          },\n          {\n            targets: \".tl_circle\",\n            translateX: 250\n          },\n          {\n            targets: \".tl_triangle\",\n            translateX: 250\n          }\n        ]}\n      \u003e\n        \u003cdiv\n          className=\"tl_square\"\n          style={{ height: 50, width: 50, background: \"#d3f454\" }}\n        /\u003e\n        \u003cdiv\n          className=\"tl_circle\"\n          style={{\n            height: 50,\n            width: 50,\n            background: \"#d3f454\",\n            borderRadius: \"50%\"\n          }}\n        /\u003e\n        \u003cdiv\n          className=\"tl_triangle\"\n          style={{\n            height: 50,\n            width: 50,\n            background: \"#d3f454\",\n            clipPath: \"polygon(50% 0, 0 100%, 100% 100%)\"\n          }}\n        /\u003e\n      \u003c/Anime\u003e\n      \u003cdiv\n        className=\"button\"\n        onClick={() =\u003e {\n          setControl(\"play\");\n        }}\n      \u003e\n        Play\n      \u003c/div\u003e\n      \u003cdiv\n        className=\"button\"\n        onClick={() =\u003e {\n          setControl(\"pause\");\n        }}\n      \u003e\n        Pause\n      \u003c/div\u003e\n      \u003cdiv\n        className=\"button\"\n        onClick={() =\u003e {\n          setControl(\"restart\");\n        }}\n      \u003e\n        Restart\n      \u003c/div\u003e\n      \u003cinput\n        type=\"range\"\n        min=\"1\"\n        max=\"100\"\n        value={meta.progress || 0}\n        className=\"slider\"\n        id=\"myRange\"\n        onChange={e =\u003e console.log(setControl([\"seek\", e.currentTarget.value]))}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n- Events\n  remember to place `_` in front of event like `_onClick` to call anime on click event\n\n```javascript\n\u003cAnime\n  style={{ width: 100 }}\n  _onMouseEnter={[\n    {\n      targets: \"#Box\",\n      backgroundColor: `rgba(255,0,22,0.5)`,\n      easing: \"linear\"\n    }\n  ]}\n  _onMouseLeave={[\n    {\n      targets: \"#Box\",\n      backgroundColor: \"#d3d\",\n      easing: \"linear\"\n    }\n  ]}\n\u003e\n  \u003cBox /\u003e\n\u003c/Anime\u003e\n```\n\n- Component type\n  by default Anime Components are `\u003cdiv\u003e` but you can declare the type for the component like `button`\n\n```javascript\n\u003cAnime\n  type=\"button\" // \u003c------ Like this\n  id=\"self\"\n  onClick={() =\u003e {\n    console.log(\"clicked\");\n  }}\n  style={{ position: \"absolute\", width: 50, height: 80, background: \"#d5d5d5\" }}\n  initial={[\n    {\n      targets: \"#self\",\n      height: \"150px\",\n      width: \"150px\",\n      translateX: 100,\n      translateY: 300,\n      easing: \"spring\"\n    }\n  ]}\n  _onClick={[\n    {\n      targets: \"#self\",\n      scale: 0.5,\n      easing: \"easeInOutSine\",\n      duration: 2000\n    }\n  ]}\n  _onMouseEnter={[\n    {\n      targets: \"#self\",\n      background: \"#d3d\",\n      easing: \"easeInOutSine\",\n      direction: \"alternate\",\n      duration: 2000\n    }\n  ]}\n  _onMouseLeave={[\n    {\n      targets: \"#self\",\n      background: \"#d5d5d5\",\n      easing: \"easeInOutSine\",\n      duration: 2000\n    }\n  ]}\n\u003e\n  Default Button\n\u003c/Anime\u003e\n```\n\n## Properties\n\n| Property       | Description                                                       | Type                               | Optional |\n| -------------- | ----------------------------------------------------------------- | ---------------------------------- | -------- |\n| setMeta        | use this to pull in progress of the Anime Component               | object                             | true     |\n| iniital        | animation that will run on the initial rendering of the component | object                             | true     |\n| \\_onUpdate     | animation that will run on every update of a component            | object                             | true     |\n| \\_onUnmount    | animation that will run on every unmount event of a component     | object                             | true     |\n| animeConfig    | configuration of the Anime of component                           | object                             | true     |\n| explode        | chop the string into words or characters                          | string `'characters'` or `'words'` |          |\n| explodeOptions | options for the exloded elements                                  | object `{{name:'atomic'}}`         |          |\n\n## Currently supported events\n\n|               |                 |                 |                |               |\n| ------------- | --------------- | --------------- | -------------- | ------------- |\n| \\_onClick     | \\_onContextMenu | \\_onDoubleClick | \\_onDrag       | \\_onDragEnd   |\n| \\_onDragEnter | \\_onDragExit    | \\_onDragLeave   | \\_onDragOver   | \\_onDragStart |\n| \\_onDrop      | \\_onMouseDown   | \\_onMouseEnter  | \\_onMouseLeave | \\_onMouseMove |\n| \\_onMouseOut  | \\_onMouseOver   | \\_onMouseUp     |\n\n## Contributing\n\n- star this repo\n- contribute to the code just `fork` and issue a `pull request`\n- share to fellow devs\n\n## Authors\n\n- **JM Disuanco** - _React-AnimeJS component_ - [JM Disuanco](https://jm.disuan.co)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Acknowledgments\n\n- Julian Garnier for his amazing AnimeJS library\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmdisuanco%2Fjm-react-anime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmdisuanco%2Fjm-react-anime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmdisuanco%2Fjm-react-anime/lists"}