update version to 0.1.2

Author: bentzibentz

README.md

@@ -16,16 +16,33 @@ yarn add tailwindcss-animatecss
 ## Usage
 
 Add Tailwind CSS to your project as described [here](https://tailwindcss.com/docs/installation).
-
-Add plugin to your tailwind config file.
+Install tailwindcss plugin as described above and add it to your tailwind.config.js file. 
 
 ```js
 plugins: [
   // Other plugins
-  require('tailwindcss-animatecss')(['responsive']),
+  require('tailwindcss-animatecss')({
+        settings: {
+          animatedSpeed: 1000,
+          heartBeatSpeed: 1000,
+          hingeSpeed: 2000,
+          bounceInSpeed: 750,
+          bounceOutSpeed: 750
+        },
+        variants: ['responsive'],
+      }),
 ]
 ```
 
+### Adjustable, optional settings
+* ```animatedSpeed``` used for the animationDuration of the .animated class
+* ```heartBeat``` used for the animationDuration of the .heartBeat class
+* ```hingeSpeed``` used for the animationDuration of the .hingeSpeed class
+* ```bounceInSpeed``` used for the animationDuration of the .bounceInSpeed class
+* ```bounceOutSpeed``` used for the animationDuration of the .bounceOutSpeed class
+
+All of these settings are optional, if not set basic animate.css fallback animationDuration speed is used.
+
 The plugin generates all the animate.css utility classes for you.
 
 ### Available Animate CSS classes
@@ -79,7 +96,7 @@ The plugin generates all the animate.css utility classes for you.
 * .bounceOutLeft
 * .bounceOutRight
 * .slideInDown
-*	.slideInLeft
+* .slideInLeft
 * .slideInRight
 * .slideInUp
 * .slideOutDown

animate/animate.js

@@ -13,12 +13,20 @@ const keyframesSlideOut = require('./keyframes/slideOut');
 const keyframesFadeIn = require('./keyframes/fadeIn');
 const keyframesFadeOut = require('./keyframes/fadeOut');
 
-module.exports = function () {
-    return function ({ addUtilities, variants }) {
+module.exports = function (settings = {}, variants = ['responsive']) {
+    return function ({ e, addUtilities, variants }) {
+
+        // set fallback if speed not defined
+        const animatedSpeed = settings.settings.animatedSpeed ? settings.settings.animatedSpeed : 1000;
+        const heartBeatSpeed = settings.settings.heartBeatSpeed ? settings.settings.heartBeatSpeed : 1000;
+        const hingeSpeed = settings.settings.hingeSpeed ? settings.settings.hingeSpeed : 2000;
+        const bounceInSpeed = settings.settings.bounceInSpeed ? settings.settings.bounceInSpeed : 750;
+        const bounceOutSpeed = settings.settings.bounceOutSpeed ? settings.settings.bounceOutSpeed : 750;
+        const opacity = settings.settings.opacity ? settings.settings.opacity : 1;
 
         addUtilities({
             '.animated': {
-                animationDuration: '1s',
+                animationDuration: `${animatedSpeed}ms`,
                 animationFillMode: 'both'
             },
             '.infinite': {
@@ -59,12 +67,12 @@ module.exports = function () {
             },
             '.heartBeat': {
                 animationName: 'heartBeat',
-                animationDuration: '1s',
+                animationDuration: `${heartBeatSpeed}ms`,
                 animationTimingFunction: 'ease-in-out'
             },
             '.hinge': {
                 animationName: 'hinge',
-                animationDuration: '2s',
+                animationDuration: `${hingeSpeed}ms`,
             },
             '.jackInTheBox': {
                 animationName: 'jackInTheBox',
@@ -160,7 +168,7 @@ module.exports = function () {
             },
             '.bounceOut': {
                 animationName: 'bounceOut',
-                animationDuration: '0.75s'
+                animationDuration: `${bounceOutSpeed}ms`,
             },
             '.bounceOutDown': {
                 animationName: 'bounceOutDown',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-animatecss",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Add Animate CSS as Tailwind CSS plugin to your project.",
   "main": "index.js",
   "repository": {