diff --git a/Readme.md b/Readme.md index 255e4e6..1f4ced2 100644 --- a/Readme.md +++ b/Readme.md @@ -4,321 +4,151 @@ ## Installation - -### [esundahl/animations](https://github.com/esundahl/animations) - Combination of all animations +To install all available animations: $ component install esundahl/animations -or install any of the collections or animations from the list below. +If you want to install specific collections of animations, see [collections](#collections). If you want to install an individual animation you can do that by `component install esundahl/`. ## Usage -All animations require a base class of .animated followed by the class of the animation that you want to invoke. For example in order to invoke the flash animation on an element you would do the following +All animations require a base class of `.animated` followed by the class of the animation that you want to invoke. For example in order to invoke the `fade` animation on an element you would do the following
Content to be animated
-## Collections - - -### [esundahl/attentions-seekers](https://github.com/esundahl/attention-seekers) - Attention seeking animations - - $ component install esundahl/attentions-seekers - -### [esundahl/bouncing-entrances](https://github.com/esundahl/bouncing-entrances) - Bouncing entrance animations - - $ component install esundahl/bouncing-entrances - -### [esundahl/bouncing-exits](https://github.com/esundahl/bouncing-exits) - Bouncing exit animations - - $ component install esundahl/bouncing-exits - -### [esundahl/fading-entrances](https://github.com/esundahl/fading-entrances) - Fading entrance animations - - $ component install esundahl/fading-entrances - -### [esundahl/fading-exits](https://github.com/esundahl/fading-exits) - Fading exit animations - - $ component install esundahl/fading-exits - -### [esundahl/flippers](https://github.com/esundahl/flippers) - Flipper Animations - - $ component install esundahl/flippers - -### [esundahl/light-speed](https://github.com/esundahl/light-speed) - Light speed animations - - $ component install esundahl/light-speed - -### [esundahl/rotating-entrances](https://github.com/esundahl/rotating-entrances) - Rotating entrance animations - - $ component install esundahl/rotating-entrances - -### [esundahl/rotating-exits](https://github.com/esundahl/rotating-exits) - Rotating exit animations - - $ component install esundahl/rotating-exits - -### [esundahl/specials](https://github.com/esundahl/specials) - Special animations - - $ component install esundahl/specials - -## Individual Animations - -### [esundahl/bounce](https://github.com/esundahl/bounce) - Bounce animation - - $ component install esundahl/bounce - -### [esundahl/flash](https://github.com/esundahl/flash) - Flash animation - - $ component install esundahl/flash - -### [esundahl/pulse](https://github.com/esundahl/pulse) - Pulse animation - - $ component install esundahl/ - -### [esundahl/shake](https://github.com/esundahl/shake) - Shake animation - - $ component install esundahl/ - -### [esundahl/swing](https://github.com/esundahl/swing) - Swing animation - - $ component install esundahl/ - -### [esundahl/tada](https://github.com/esundahl/tada) - Tada animation - - $ component install esundahl/ - -### [esundahl/wiggle](https://github.com/esundahl/wiggle) - Wiggle animation - - $ component install esundahl/ - -### [esundahl/wobble](https://github.com/esundahl/wobble) - Wobble animation - - $ component install esundahl/ - -### [esundahl/bounce-in](https://github.com/esundahl/bounce-in) - Bounce-in animation - - $ component install esundahl/ - -### [esundahl/bounce-in-down](https://github.com/esundahl/bounce-in-down) - Bounce-in-down animation - - $ component install esundahl/ - -### [esundahl/bounce-in-left](https://github.com/esundahl/bounce-in-left) - Bounce-in-left animation - - $ component install esundahl/ - -### [esundahl/bounce-in-right](https://github.com/esundahl/bounce-in-right) - Bounce-in-right animation - - $ component install esundahl/ - -### [esundahl/bounce-in-up](https://github.com/esundahl/bounce-in-up) - Bounce-in-up animation - - $ component install esundahl/ - -### [esundahl/bounce-out](https://github.com/esundahl/bounce-out) - Bounce-out animation - - $ component install esundahl/ - -### [esundahl/bounce-out-down](https://github.com/esundahl/bounce-out-down) - Bounce-out-down animation - - $ component install esundahl/ - -### [esundahl/bounce-out-left](https://github.com/esundahl/bounce-out-left) - Bounce-out-left animation - - $ component install esundahl/ - -### [esundahl/bounce-out-right](https://github.com/esundahl/bounce-out-right) - Bounce-out-right animation - - $ component install esundahl/ - -### [esundahl/bounce-out-up](https://github.com/esundahl/bounce-out-up) - Bounce-out-up animation - - $ component install esundahl/ - -### [esundahl/fade-in](https://github.com/esundahl/fade-in) - Fade-in animation - - $ component install esundahl/ - -### [esundahl/fade-in-down](https://github.com/esundahl/fade-in-down) - Fade-in-dowm animation - - $ component install esundahl/ - -### [esundahl/fade-in-down-big](https://github.com/esundahl/fade-in-down-big) - Fade-in-down-big animation - - $ component install esundahl/ - -### [esundahl/fade-in-left](https://github.com/esundahl/fade-in-left) - Fade-in-left animation - - $ component install esundahl/ - -### [esundahl/fade-in-left-big](https://github.com/esundahl/fade-in-left-big) - Fade-in-left-big animation - - $ component install esundahl/ - -### [esundahl/fade-in-right](https://github.com/esundahl/fade-in-right) - Fade-in-right animation - - $ component install esundahl/ - -### [esundahl/fade-in-right-big](https://github.com/esundahl/fade-in-right-big) - Fade-in-right-big animation - - $ component install esundahl/ - -### [esundahl/fade-in-up](https://github.com/esundahl/fade-in-up) - Fade-in-up animation - - $ component install esundahl/ - -### [esundahl/fade-in-up-big](https://github.com/esundahl/fade-in-up-big) - Fade-in-up-big animation - - $ component install esundahl/ - -### [esundahl/fade-out](https://github.com/esundahl/fade-out) - Fade-out animation - - $ component install esundahl/ - -### [esundahl/fade-out-down](https://github.com/esundahl/fade-out-down) - Fade-out-down animation - - $ component install esundahl/ - -### [esundahl/fade-out-down-big](https://github.com/esundahl/fade-out-down-big) - Fade-out-down-big animation - - $ component install esundahl/ - -### [esundahl/fade-out-left](https://github.com/esundahl/fade-out-left) - Fade-out-left animation - - $ component install esundahl/ - -### [esundahl/fade-out-left-big](https://github.com/esundahl/fade-out-left-big) - Fade-out-left-big animation - - $ component install esundahl/ - -### [esundahl/fade-out-right](https://github.com/esundahl/fade-out-right) - Fade-out-right animation - - $ component install esundahl/ - -### [esundahl/fade-out-right-big](https://github.com/esundahl/fade-out-right-big) - Fade-out-right-big animation - - $ component install esundahl/ - -### [esundahl/fade-out-up](https://github.com/esundahl/fade-out-up) - Fade-out-up animation - - $ component install esundahl/ - -### [esundahl/fade-out-up-big](https://github.com/esundahl/fade-out-up-big) - Fade-out-up-big animation - - $ component install esundahl/ - -### [esundahl/flip](https://github.com/esundahl/flip) - Flip animation - - $ component install esundahl/ - -### [esundahl/flip-in-x](https://github.com/esundahl/flip-in-x) - Flip-in-x animation - - $ component install esundahl/ - -### [esundahl/flip-in-y](https://github.com/esundahl/flip-in-y) - Flip-in-y animation - - $ component install esundahl/ - -### [esundahl/flip-out-x](https://github.com/esundahl/flip-out-x) - Flip-out-x animation - - $ component install esundahl/ - -### [esundahl/flip-out-y](https://github.com/esundahl/flip-out-y) - Flip-out-y animation - - $ component install esundahl/ - -### [esundahl/light-speed-in](https://github.com/esundahl/light-speed-in) - Light-speed-in animation - - $ component install esundahl/ - -### [esundahl/light-speed-out](https://github.com/esundahl/light-speed-out) - Light-speed-out animation - - $ component install esundahl/ - -### [esundahl/rotate-in](https://github.com/esundahl/rotate-in) - Rotate-in animation - - $ component install esundahl/ - -### [esundahl/rotate-in-down-left](https://github.com/esundahl/rotate-in-down-left) - Rotate-in-down-left animation - - $ component install esundahl/ - -### [esundahl/rotate-in-down-right](https://github.com/esundahl/rotate-in-down-right) - Rotate-in-down-right animation - - $ component install esundahl/ +Or via JavaScript -### [esundahl/rotate-in-up-left](https://github.com/esundahl/rotate-in-up-left) - Rotate-in-up-left animation - - $ component install esundahl/ +``` js +divElement.className = 'animated fade' +``` -### [esundahl/rotate-in-up-right](https://github.com/esundahl/rotate-in-up-right) - Rotate-in-up-right animation - - $ component install esundahl/ +### [Attention seeking animations](https://github.com/esundahl/attention-seekers) -### [esundahl/rotate-out](https://github.com/esundahl/rotate-out) - Rotate-out animation - - $ component install esundahl/ + $ component install esundahl/attention-seekers -### [esundahl/rotate-out-down-left](https://github.com/esundahl/rotate-out-down-left) - Rotate-out-down-left animation - - $ component install esundahl/ +This collection contains the individual animations: -### [esundahl/rotate-out-down-right](https://github.com/esundahl/rotate-out-down-right) - Rotate-out-down-right animation - - $ component install esundahl/ +* [flash](https://github.com/esundahl/flash) +* [bounce](https://github.com/esundahl/bounce) +* [shake](https://github.com/esundahl/shake) +* [tada](https://github.com/esundahl/tada) +* [swing](https://github.com/esundahl/swing) +* [wobble](https://github.com/esundahl/wobble) +* [wiggle](https://github.com/esundahl/wiggle) +* [pulse](https://github.com/esundahl/pulse) -### [esundahl/rotate-out-up-left](https://github.com/esundahl/rotate-out-up-left) - Rotate-out-up-left animation - - $ component install esundahl/ +### [Bouncing entrance animations](https://github.com/esundahl/bouncing-entrances) -### [esundahl/rotate-out-up-right](https://github.com/esundahl/rotate-out-up-right) - Rotate-out-up-right animation - - $ component install esundahl/ + $ component install esundahl/bouncing-entrances -### [esundahl/hinge](https://github.com/esundahl/hinge) - Hinge animation - - $ component install esundahl/hinge +This collection contains the individual animations: -### [esundahl/roll-in](https://github.com/esundahl/roll-in) - Roll-in animation - - $ component install esundahl/roll-in +* [bounce-in](https://github.com/esundahl/bounce-in) +* [bounce-in-down](https://github.com/esundahl/bounce-in-down) +* [bounce-in-up](https://github.com/esundahl/bounce-in-up) +* [bounce-in-left](https://github.com/esundahl/bounce-in-left) +* [bounce-in-right](https://github.com/esundahl/bounce-in-right) -### [esundahl/roll-out](https://github.com/esundahl/roll-out) - Roll-out animation - - $ component install esundahl/roll-out +### [Bouncing exit animations](https://github.com/esundahl/bouncing-exits) + $ component install esundahl/bouncing-exits +This collection contains the individual animations: +* [bounce-out](https://github.com/esundahl/bounce-out) +* [bounce-out-down](https://github.com/esundahl/bounce-out-down) +* [bounce-out-up](https://github.com/esundahl/bounce-out-up) +* [bounce-out-left](https://github.com/esundahl/bounce-out-left) +* [bounce-out-right](https://github.com/esundahl/bounce-out-right) +### [Fading entrance animations](https://github.com/esundahl/fading-entrances) + $ component install esundahl/fading-entrances +This collection contains the individual animations: +* [fade-in](https://github.com/esundahl/fade-in) +* [fade-in-up](https://github.com/esundahl/fade-in-up) +* [fade-in-down](https://github.com/esundahl/fade-in-down) +* [fade-in-left](https://github.com/esundahl/fade-in-left) +* [fade-in-right](https://github.com/esundahl/fade-in-right) +* [fade-in-up-big](https://github.com/esundahl/fade-in-up-big) +* [fade-in-down-big](https://github.com/esundahl/fade-in-down-big) +* [fade-in-left-big](https://github.com/esundahl/fade-in-left-big) +* [fade-in-right-big](https://github.com/esundahl/fade-in-right-big) +### [Fading exit animations](https://github.com/esundahl/fading-exits) + $ component install esundahl/fading-exits +This collection contains the individual animations: +* [fade-out](https://github.com/esundahl/fade-out) +* [fade-out-up](https://github.com/esundahl/fade-out-up) +* [fade-out-down](https://github.com/esundahl/fade-out-down) +* [fade-out-left](https://github.com/esundahl/fade-out-left) +* [fade-out-right](https://github.com/esundahl/fade-out-right) +* [fade-out-up-big](https://github.com/esundahl/fade-out-up-big) +* [fade-out-down-big](https://github.com/esundahl/fade-out-down-big) +* [fade-out-left-big](https://github.com/esundahl/fade-out-left-big) +* [fade-out-right-big](https://github.com/esundahl/fade-out-right-big) +### [Flipper Animations](https://github.com/esundahl/flippers) + $ component install esundahl/flippers +This collection contains the individual animations: +* [flip](https://github.com/esundahl/flip) +* [flip-in-x](https://github.com/esundahl/flip-in-x) +* [flip-out-x](https://github.com/esundahl/flip-out-x) +* [flip-in-y](https://github.com/esundahl/flip-in-y) +* [flip-out-y](https://github.com/esundahl/flip-out-y) +### [Light speed animations](https://github.com/esundahl/light-speed) + $ component install esundahl/light-speed +This collection contains the individual animations: +* [light-speed-in](https://github.com/esundahl/light-speed-in) +* [light-speed-out](https://github.com/esundahl/light-speed-out) +### [Rotating entrance animations](https://github.com/esundahl/rotating-entrances) + $ component install esundahl/rotating-entrances +This collection contains the individual animations: +* [rotate-in](https://github.com/esundahl/rotate-in) +* [rotate-in-down-left](https://github.com/esundahl/rotate-in-down-left) +* [rotate-in-down-right](https://github.com/esundahl/rotate-in-down-right) +* [rotate-in-up-left](https://github.com/esundahl/rotate-in-up-left) +* [rotate-in-up-right](https://github.com/esundahl/rotate-in-up-right) +### [Rotating exit animations](https://github.com/esundahl/rotating-exits) + $ component install esundahl/rotating-exits +This collection contains the individual animations: +* [rotate-out](https://github.com/esundahl/rotate-out) +* [rotate-out-down-left](https://github.com/esundahl/rotate-out-down-left) +* [rotate-out-down-right](https://github.com/esundahl/rotate-out-down-right) +* [rotate-out-up-left](https://github.com/esundahl/rotate-out-up-left) +* [rotate-out-up-right](https://github.com/esundahl/rotate-out-up-right) +### [Special animations](https://github.com/esundahl/specials) + $ component install esundahl/specials +This collection contains the individual animations: +* [hinge](https://github.com/esundahl/hinge) +* [roll-in](https://github.com/esundahl/roll-in) +* [roll-out](https://github.com/esundahl/roll-out) - ## License diff --git a/generate_docs.js b/generate_docs.js new file mode 100644 index 0000000..1785408 --- /dev/null +++ b/generate_docs.js @@ -0,0 +1,28 @@ + +var collections = [ + {repo: 'attention-seekers', label: 'Attention seeking animations'}, + {repo: 'bouncing-entrances', label: 'Bouncing entrance animations'}, + {repo: 'bouncing-exits', label: 'Bouncing exit animations'}, + {repo: 'fading-entrances', label: 'Fading entrance animations'}, + {repo: 'fading-exits', label: 'Fading exit animations'}, + {repo: 'flippers', label: 'Flipper Animations'}, + {repo: 'light-speed', label: 'Light speed animations'}, + {repo: 'rotating-entrances', label: 'Rotating entrance animations'}, + {repo: 'rotating-exits', label: 'Rotating exit animations'}, + {repo: 'specials', label: 'Special animations'} +] + +collections.forEach(function(coll){ + var config = require('./components/esundahl-' + coll.repo + '/component.json') + console.log('### [' + coll.label + '](https://github.com/esundahl/' + coll.repo + ')') + console.log() + console.log(' $ component install esundahl/' + coll.repo) + console.log() + console.log('This collection contains the individual animations:') + console.log() + for (var dep in config.dependencies){ + var animation = dep.split('/')[1] + console.log('* [' + animation + '](https://github.com/' + dep + ')') + } + console.log() +}) \ No newline at end of file