warengonzaga / animatecssplugin

This is the plugin for improvising Animate.css animations into GSAP.
https://warengonzaga.github.io/sites/animatecssplugin.html
MIT License
9 stars 3 forks source link
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

AnimateCSSPlugin Developer GitHub release license

"The Easiest Way to Animate" - Demo


Build Status devDependencies Status GitHub fork GitHub star Built with Gulp chat Liberapay giving

For GreenSock (TweenMax & TweenLite)

AnimateCSSPlugin 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!

Usage

Put the plugin in your html inside your head above the link of your GSAP (TweenMax or TweenLite)

TweenMax:

 <script src="http://warengonzaga.github.io/cdn/animatecssplugin/animateCSSPlugin.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

TweenLite:

 <script src="http://warengonzaga.github.io/cdn/animatecssplugin/animateCSSPlugin.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>

Example

This is for using Animate.css - Bounce:

 TweenMax.to("#obj", 1, {onStart: bounce});

This is for using Animate.css - Flash:

 TweenMax.to("#obj", 1, {onStart: flash});

This is for using Animate.css - Rubber Band:

 TweenMax.to("#obj", 1, {onStart: rubberBand});

Example Script


function animation() {
  TweenMax.to("#objectOne", 1, {onStart: bounce});
  TweenMax.to("#objectTwo", 1, {onStart: flash, delay: 1})
  TweenMax.to("#objectThree", 1, {onStart: shake, delay: 2});
}

Codepen

Try the codepen demo here! --> http://codepen.io/Waren_Gonzaga/pen/YGGRBz

Installation

  1. AnimateCSSPlugin requires Node.js v7+ to run.
  2. Download and extract the latest release.
  3. Install the dependencies and devDependencies.
 $ npm install
 $ npm install -g gulp

Development

What to contribute? That would be great! AnimateCSSPlugin.js uses Gulp.js + Pug.js (formely Jade) + SASS for faster development. Make a change in your file and instantanously see your updates!

 $ gulp dev

Building Source

To build your changes do this:

 $ gulp build

Contribution

Note

It 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!

GreenSock Forum

GreenSock Forum - http://greensock.com/forums/topic/15115-animatecssplugin-is-now-open/

Donate

If 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.

Donate Donate
Bitcoin: 39qo5h3aic9K2aTFRzdGSVNuqtS8uMBKJu

Author

AnimateCSSPlugin is Developed and Maintained by Waren Gonzaga

In Collaboration with SakhirAtwi and awesome help from contributors.


</> with <3 by Waren Gonzaga