Open Source Ecosystems

AnimateCSSPlugin

"The Easiest Way to Animate" - Demo

For GreenSock (TweenMax & 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/TweenMax.min.js"></script>

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

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

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

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


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

AnimateCSSPlugin requires Node.js v7+ to run.
Download and extract the latest release.
Install the dependencies and devDependencies.

 $ npm install
 $ npm install -g gulp

 $ gulp dev

 $ gulp build

To contribute you must have idea on how to use GreenSock Animation Platform.
To contribute you should have experience in using preprocessors such as Pug.js (formely Jade) and SASS.
To contribute follow the coding style in the dev/animateCSSPlugin.js so this will make the project neat and consistent.

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!

Bitcoin: 39qo5h3aic9K2aTFRzdGSVNuqtS8uMBKJu

AnimateCSSPlugin is Developed and Maintained by Waren Gonzaga