{"id":13453261,"url":"https://github.com/bitshadow/iconate","last_synced_at":"2025-05-15T05:07:50.519Z","repository":{"id":31579512,"uuid":"35144284","full_name":"bitshadow/iconate","owner":"bitshadow","description":"Transform your icons with trendy animations.","archived":false,"fork":false,"pushed_at":"2019-06-05T17:04:19.000Z","size":521,"stargazers_count":1977,"open_issues_count":3,"forks_count":214,"subscribers_count":66,"default_branch":"master","last_synced_at":"2025-05-14T07:11:49.530Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://bitshadow.github.io/iconate","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bitshadow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-06T07:02:56.000Z","updated_at":"2025-04-04T11:40:07.000Z","dependencies_parsed_at":"2022-08-31T00:01:40.822Z","dependency_job_id":null,"html_url":"https://github.com/bitshadow/iconate","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/bitshadow%2Ficonate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitshadow%2Ficonate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitshadow%2Ficonate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitshadow%2Ficonate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitshadow","download_url":"https://codeload.github.com/bitshadow/iconate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"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":[],"created_at":"2024-07-31T08:00:36.844Z","updated_at":"2025-05-15T05:07:45.508Z","avatar_url":"https://github.com/bitshadow.png","language":"JavaScript","readme":"# iconate.js\n*A call to transform your existing icons in a cool trendy way*\n\n`iconate.js` is a tiny performant library for cross-browser icon transformation animations in your projects.\n\n## [Demo](http://bitshadow.github.io/iconate)\n\nInstallation\n------------\n- NPM: `npm install iconate`\n- Bower: `bower install iconate`\n- [Download zip](https://github.com/bitshadow/iconate/archive/master.zip).\n\n**Note**: **iconate.js** also supports AMD and commonJS module pattern.\n\n\n## Basic Usage\n1. Include the Stylesheet and Javascript files in your html.\n\n    ```html\n    \u003clink rel=\"stylesheet\" href=\"iconate.min.css\"\u003e\n    \u003cscript type=\"text/javascript\" src=\"iconate.min.js\"\u003e\n    ```\n2. Create icon element.\n\n    ```html\n    \u003ci id=\"icon\" class=\"fa fa-bars fa-lg\"\u003e\u003c/i\u003e\n    ```\n3. Animate icon from `fa-bar` to `fa-arrow-right` with `rubberBand` animation.\n\n    ```js\n    var iconElement = document.getElementById('icon');\n    var options = {\n        from: 'fa-bars',\n        to: 'fa-arrow-right',\n        animation: 'rubberBand'\n    };\n\n    iconate(iconElement, options);\n    ```\n\n\n3. Following AnimationTypes can be used in iconate call.\n    * `rollOutRight`\n    * `rollOutLeft`\n    * `rubberBand`\n    * `zoomOut`\n    * `zoomIn`\n    * `fadeOut`\n    * `fadeOutRight`\n    * `fadeOutLeft`\n    * `fadeOutTop`\n    * `fadeOutBottom`\n    * `horizontalFlip`\n    * `verticalFlip`\n    * `bounceOutBottom`\n    * `bounceOutTop`\n    * `bounceOutLeft`\n    * `bounceOutRight`\n    * `rotateClockwise`\n    * `rotateAntiClockwise`\n    * `tada`\n\n\nPublic API\n----------\n\n### iconate(element, [, options] [, callback] )\n\nAnimate an icon element.\n* `element` - Icon Element to perform operations on.\n* `options` - Object containing options to control the animation.\n    * `from` - Current icon class name (ex. 'fa-bars' in case of font-awesome)\n    * `to` - Final icon class name (ex. 'fa-arrow-right')\n    * `animation` - You can choose any animation from above listed animation types.  (ex. 'fadeOutRight')(default: 'zoomOut')\n* `callback` - Optional callback to execute after animation completes.\n\nBrowser Support\n---------------\n\n![Chrome](https://user-images.githubusercontent.com/574802/34985987-f0d3fea4-fadb-11e7-8270-3f0f484ed72c.png) |\n![Firefox](https://user-images.githubusercontent.com/574802/34985991-f124e094-fadb-11e7-9ebc-f5c4f69ae1c1.png) |\n![IE](https://user-images.githubusercontent.com/574802/34985990-f0fd3cec-fadb-11e7-8f2b-57e23816161f.png) |\n![Opera](https://user-images.githubusercontent.com/574802/34985992-f14f87fe-fadb-11e7-9a9c-9ad3617cd4d2.png) |\n![Safari](https://user-images.githubusercontent.com/574802/34985993-f17e4544-fadb-11e7-890a-e3801da59be1.png) |\n--- | --- | --- | --- | --- |\n4+ ✔ | 16+ ✔ | 10+ ✔ | 15+ ✔ | 6+ ✔ |\n\nLicense\n-------\n\nCopyright (c) 2015 Jignesh Kakadiya, http://bitshadow.github.io\nLicensed under the [MIT license](http://opensource.org/licenses/MIT).\n","funding_links":[],"categories":["JavaScript","16. 动画(Animate) ##","JavaScript Libs","16. 动画(Animate)"],"sub_categories":["13.20 视差滚动(Parallax Scrolling) ###","Animation","13.20 视差滚动(Parallax Scrolling)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitshadow%2Ficonate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitshadow%2Ficonate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitshadow%2Ficonate/lists"}