{"id":13547814,"url":"https://github.com/gibbok/animatelo","last_synced_at":"2025-04-04T14:04:27.803Z","repository":{"id":41526914,"uuid":"75188386","full_name":"gibbok/animatelo","owner":"gibbok","description":"Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.","archived":false,"fork":false,"pushed_at":"2022-11-06T19:26:32.000Z","size":5602,"stargazers_count":491,"open_issues_count":0,"forks_count":39,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-28T13:06:11.651Z","etag":null,"topics":["animation","animations","cross-browser-animations","css","javascript","web-animations-api"],"latest_commit_sha":null,"homepage":"https://gibbok.github.io/animatelo","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/gibbok.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}},"created_at":"2016-11-30T13:16:05.000Z","updated_at":"2025-03-28T01:17:23.000Z","dependencies_parsed_at":"2022-08-26T06:00:25.906Z","dependency_job_id":null,"html_url":"https://github.com/gibbok/animatelo","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gibbok%2Fanimatelo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gibbok%2Fanimatelo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gibbok%2Fanimatelo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gibbok%2Fanimatelo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gibbok","download_url":"https://codeload.github.com/gibbok/animatelo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190159,"owners_count":20898697,"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","animations","cross-browser-animations","css","javascript","web-animations-api"],"created_at":"2024-08-01T12:01:01.392Z","updated_at":"2025-04-04T14:04:27.788Z","avatar_url":"https://github.com/gibbok.png","language":"JavaScript","readme":"# Animatelo\n[![CDNJS version](https://img.shields.io/cdnjs/v/animatelo.svg)](https://cdnjs.com/libraries/animatelo)\n\n*Just-add-water Web Animations*\n\nAnimatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.\n\nThis is a porting to Web Animation API of the fabulous [animate.css](//github.com/daneden/animate.css) project.\n\n[Check out all the animations here!](//gibbok.github.io/animatelo)\n\n# What is Web Animations API?\nWeb Animations API is a new JavaScript API for driving animated content on the web.\n\nWeb Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.\n\nWith the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior.\n\nWith the Web Animations API, we no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction.\n\n# Browser Support\nWeb Animations API features is available by default in Firefox 48+ and Chrome 36+.\nFor other browsers there’s a [handy maintained polyfill](//github.com/web-animations/web-animations-js) that tests for feature support and adds it where necessary.\n\nThe polyfill and Animatelo are supported on modern versions of all major browsers, including:\n- Chrome\n- Firefox 27+\n- IE10+ (including Edge)\n- Safari (iOS) 7.1+\n- Safari (Mac) 9+\n\n# Installation\n\nTo install via Bower, simply do the following:\n\n```bash\n$ bower install animatelo --save\n```\nor you can install via npm:\n\n```bash\n$ npm install animatelo --save\n```\n\n# Basic Usage\nHere's a simple example of an animation that flip a text in a  `\u003ch1\u003e`.  \n[Try it as a live demo.](//codepen.io/gibbok/pen/pRJXQq)\n\n```html\n\u003c!-- Include the polyfill --\u003e\n\u003cscript src=\"https://cdn.rawgit.com/web-animations/web-animations-js/2.2.2/web-animations.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Include Animatelo --\u003e\n\u003cscript src=\"https://cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Set up a target to animate --\u003e\n\u003ch1 id=\"hello\"\u003eHello world!\u003c/h1\u003e\n\n\u003c!-- Animate! --\u003e\n\u003cscript\u003e\n    window.animatelo.flip('#hello');\n\u003c/script\u003e\n```\n\n# Advanced Usage Documentation\nMore information and technical documentation on Animatelo can be found at [Usage](./usage.md) page.\n\n# License\nAnimatelo is licensed under the [MIT license](//opensource.org/licenses/MIT).\n","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects","JavaScript"],"sub_categories":["Other Effect"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgibbok%2Fanimatelo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgibbok%2Fanimatelo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgibbok%2Fanimatelo/lists"}