{"id":15374350,"url":"https://github.com/warengonzaga/animatecssplugin","last_synced_at":"2025-04-15T15:11:34.749Z","repository":{"id":92763091,"uuid":"68279507","full_name":"warengonzaga/animatecssplugin","owner":"warengonzaga","description":"This is the plugin for improvising Animate.css animations into GSAP.","archived":false,"fork":false,"pushed_at":"2020-03-29T06:51:26.000Z","size":155,"stargazers_count":9,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T05:31:07.196Z","etag":null,"topics":["animate-css","animatecss","animation","animations","css","front-end","greensock","greensock-animation-platform","gsap","gsap-plugin","gulp","javascript","javascript-plugin","plugin","tweenlite","tweenmax","web-animation","website","website-animation"],"latest_commit_sha":null,"homepage":"https://warengonzaga.github.io/sites/animatecssplugin.html","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/warengonzaga.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,"governance":null},"funding":{"custom":["https://warengonza.ga/coffee4dev","https://paypal.me/warengonzagaofficial"]}},"created_at":"2016-09-15T08:51:49.000Z","updated_at":"2024-07-30T08:47:36.000Z","dependencies_parsed_at":"2023-04-14T00:52:57.606Z","dependency_job_id":null,"html_url":"https://github.com/warengonzaga/animatecssplugin","commit_stats":{"total_commits":93,"total_committers":6,"mean_commits":15.5,"dds":0.6666666666666667,"last_synced_commit":"e85a037c15efff39726d918c6283733faccbc949"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Fanimatecssplugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Fanimatecssplugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Fanimatecssplugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Fanimatecssplugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/warengonzaga","download_url":"https://codeload.github.com/warengonzaga/animatecssplugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249086313,"owners_count":21210432,"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":["animate-css","animatecss","animation","animations","css","front-end","greensock","greensock-animation-platform","gsap","gsap-plugin","gulp","javascript","javascript-plugin","plugin","tweenlite","tweenmax","web-animation","website","website-animation"],"created_at":"2024-10-01T13:58:25.287Z","updated_at":"2025-04-15T15:11:34.725Z","avatar_url":"https://github.com/warengonzaga.png","language":"JavaScript","readme":"## AnimateCSSPlugin [![Developer](https://img.shields.io/badge/Developed%20by-WarenGonzaga-blue.svg)](https://github.com/WarenGonzaga/) [![GitHub release](https://img.shields.io/github/release/WarenGonzaga/AnimateCSSPlugin.svg)](https://github.com/WarenGonzaga/AnimateCSSPlugin/releases) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\u003ci\u003e\"The Easiest Way to Animate\"\u003c/i\u003e - **[Demo](http://warengonzaga.github.io/sites/animatecssplugin.html)**\n***\n[![Build Status](https://travis-ci.org/WarenGonzaga/AnimateCSSPlugin.svg?branch=master)](https://travis-ci.org/WarenGonzaga/AnimateCSSPlugin) [![devDependencies Status](https://david-dm.org/WarenGonzaga/AnimateCSSPlugin/dev-status.svg)](https://david-dm.org/WarenGonzaga/AnimateCSSPlugin?type=dev) [![GitHub fork](https://img.shields.io/github/forks/WarenGonzaga/AnimateCSSPlugin.svg)](https://github.com/WarenGonzaga/AnimateCSSPlugin)\n[![GitHub star](https://img.shields.io/github/stars/WarenGonzaga/AnimateCSSPlugin.svg)](https://github.com/WarenGonzaga/AnimateCSSPlugin) [![Built with Gulp](https://img.shields.io/badge/Built%20with-GULP-%23CF4646.svg)](http://gulpjs.com/) [![chat](https://img.shields.io/badge/chat-gitter-green.svg)](https://gitter.im/animatecssplugin/Lobby)\n[![Liberapay giving](http://img.shields.io/liberapay/receives/WarenGonzaga.svg?logo=liberapay)](https://github.com/WarenGonzaga/AnimateCSSPlugin)\n\n### For GreenSock (TweenMax \u0026 TweenLite) \u003c/h3\u003e\n\u003cp\u003eAnimateCSSPlugin is a plugin for GreenSock Animation Platform or GSAP. This plugin is a replicate of all animations from Animate.css. The reason was they cannot be both used in creating custom animation such as Banner Ads making. So I decided to create a project that could be mimic all of the animations that can be found on Animate.css. I know this is a silly idea but this will help others to use both animate.css and GSAP with no worries. You can contribute and mimic the animations from animate.css then make a pull request then I will review it as soon as possible thanks!\u003c/p\u003e\n\n\u003ch3\u003e Usage \u003c/h3\u003e\n\u003cp\u003ePut the plugin in your html inside your head above the link of your GSAP (\u003cu\u003eTweenMax\u003c/u\u003e or \u003cu\u003eTweenLite\u003c/u\u003e)\u003c/p\u003e\n\n\u003ch4\u003e TweenMax: \u003c/h4\u003e\n\n```html\n \u003cscript src=\"http://warengonzaga.github.io/cdn/animatecssplugin/animateCSSPlugin.min.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js\"\u003e\u003c/script\u003e\n```\n\n\u003ch4\u003e TweenLite: \u003c/h4\u003e\n\n```html\n \u003cscript src=\"http://warengonzaga.github.io/cdn/animatecssplugin/animateCSSPlugin.min.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js\"\u003e\u003c/script\u003e\n```\n\n\u003ch3\u003e Example \u003c/h3\u003e\n\n\u003cp\u003eThis is for using Animate.css - \u003cb\u003eBounce:\u003c/b\u003e\u003c/p\u003e\n\n```javascript\n TweenMax.to(\"#obj\", 1, {onStart: bounce});\n```\n\n\u003cp\u003eThis is for using Animate.css - \u003cb\u003eFlash:\u003c/b\u003e\u003c/p\u003e\n\n```javascript\n TweenMax.to(\"#obj\", 1, {onStart: flash});\n```\n\n\u003cp\u003eThis is for using Animate.css - \u003cb\u003eRubber Band:\u003c/b\u003e\u003c/p\u003e\n\n```javascript\n TweenMax.to(\"#obj\", 1, {onStart: rubberBand});\n```\n\n\u003ch3\u003e Example Script \u003c/h3\u003e\n\n```javascript\n\nfunction animation() {\n  TweenMax.to(\"#objectOne\", 1, {onStart: bounce});\n  TweenMax.to(\"#objectTwo\", 1, {onStart: flash, delay: 1})\n  TweenMax.to(\"#objectThree\", 1, {onStart: shake, delay: 2});\n}\n\n```\n\n\u003ch2\u003e Codepen \u003c/h2\u003e\nTry the codepen demo here! --\u003e http://codepen.io/Waren_Gonzaga/pen/YGGRBz\n\n\u003ch3\u003e Installation \u003c/h3\u003e\n\n1. AnimateCSSPlugin requires [Node.js](https://nodejs.org/) v7+ to run.\n2. Download and extract the [latest release](https://github.com/WarenGonzaga/AnimateCSSPlugin/releases).\n3. Install the dependencies and devDependencies.\n\n```sh\n $ npm install\n $ npm install -g gulp\n```\n\n\u003ch3\u003e Development \u003c/h3\u003e\nWhat to contribute? That would be great!\nAnimateCSSPlugin.js uses Gulp.js + Pug.js (formely Jade) + SASS for faster development. Make a change in your file and instantanously see your updates!\n\n```sh\n $ gulp dev\n```\n\n\u003ch3\u003e Building Source \u003c/h3\u003e\nTo build your changes do this:\n\n```sh\n $ gulp build\n```\n\n\u003ch3\u003e Contribution \u003c/h3\u003e\n\n* To contribute you must have idea on how to use GreenSock Animation Platform.\n* To contribute you should have experience in using preprocessors such as Pug.js (formely Jade) and SASS.\n* To contribute follow the coding style in the dev/animateCSSPlugin.js so this will make the project neat and consistent.\n\n\u003ch4\u003eNote\u003c/h4\u003e\n\nIt will generate `demo/` and `build/` folders in your directory. **Demo** folder contains one html file, css file and js file for demo purposes while **Build** folder contains the minified javascript of AnimateCSSPlugin (AnimateCSSPlugin.min.js) and production javascript version of AnimateCSSPlugin (AnimateCSSPlugin.js). After executing the `gulp build` command please do a `gulp update` so that the downloadable files are always updated. The downloadable files are the animateCSSPlugin files in the root of this project. Always pull the latest copy of this repo to prevent any problem while contributing. Make pull request for any updates!\n\n\u003ch3\u003e GreenSock Forum \u003c/h3\u003e\nGreenSock Forum - http://greensock.com/forums/topic/15115-animatecssplugin-is-now-open/\n\n\u003ch3\u003eDonate\u003c/h3\u003e\nIf you love this project please consider to support the development by donating. We spend our time just to save your time! Be a sponsor or backer of this project.\u003cbr\u003e\n\n[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/warengonzagaofficial)\n[![Donate](https://img.shields.io/badge/Donate-Buy%20Me%20A%20Coffee-orange.svg)](https://www.buymeacoffee.com/warengonzagadev)\u003cbr\u003e\n**Bitcoin:** 39qo5h3aic9K2aTFRzdGSVNuqtS8uMBKJu\n\n\u003ch3\u003eAuthor\u003c/h3\u003e\n\nAnimateCSSPlugin is Developed and Maintained by **Waren Gonzaga**\n\n* **Facebook:** https://facebook.com/warengonzagaofficialpage\n* **Twitter:** https://twitter.com/waren_gonzaga\n* **Email:** warengonzaga.dev@gmail.com\n\nIn Collaboration with [SakhirAtwi](https://github/SakhirAtwi) and awesome help from [contributors](https://github.com/WarenGonzaga/AnimateCSSPlugin/graphs/contributors).\n\n***\n**\u003c/\u003e** with **\u003c3** by **Waren Gonzaga**\n","funding_links":["https://warengonza.ga/coffee4dev","https://paypal.me/warengonzagaofficial","https://www.buymeacoffee.com/warengonzagadev"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarengonzaga%2Fanimatecssplugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarengonzaga%2Fanimatecssplugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarengonzaga%2Fanimatecssplugin/lists"}