Misc style fixes and packaging

dwarcher · Oct 22, 2014 · 621ff01 · 621ff01
1 parent db34238
commit 621ff01
Show file tree

Hide file tree

Showing 13 changed files with 2,331 additions and 229 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -27,12 +27,22 @@ module.exports = function(grunt) {
         files: {
           'examples/styles.css': 'examples/styles.scss'
         }
+      },
+      dist: {
+        files: [{
+          'dist/reboundgen.css': 'dist/reboundgen.scss'
+        }]
       }
     },
     cssmin: {
+      testpage: {
+        files: {
+          'examples/styles.min.css': 'examples/styles.css',
+        }
+      },
       dist: {
         files: [{
-          'examples/styles.min.css': 'examples/styles.css'
+          'dist/reboundgen.min.css': 'dist/reboundgen.css'
         }]
       }
     },

diff --git a/README.html b/README.html
@@ -999,18 +999,18 @@
     page-break-after: avoid;
   }
 }
-</style><title>README</title></head><body><article class="markdown-body"><h1 id="reboundgen"><a name="user-content-reboundgen" href="#reboundgen" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>reboundgen</h1>
-<p>Keyframe animation generator that uses Rebound.js</p>
+</style><title>README</title></head><body><article class="markdown-body"><h1 id="reboundgen"><a name="user-content-reboundgen" href="#reboundgen" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>ReboundGen</h1>
+<p>Keyframe animation generator built on (Facebook&rsquo;s Rebound.js)[<a href="https://github.com/facebook/rebound-js">https://github.com/facebook/rebound-js</a>]</p>
 <h2 id="examples"><a name="user-content-examples" href="#examples" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>Examples</h2>
-<p>Are <a href="http://dwarcher.github.io/reboundgen/examples/">here</a></p>
+<p>See <a href="http://dwarcher.github.io/reboundgen/examples/">here</a> for a list of the &lsquo;out of the box&rsquo; animations.</p>
 <h2 id="how-to-use"><a name="user-content-how-to-use" href="#how-to-use" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>How to use</h2>
 <h4 id="easy-instructions"><a name="user-content-easy-instructions" href="#easy-instructions" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>Easy instructions</h4>
 <ol>
 <li><a href="https://github.com/dwarcher/reboundgen/archive/master.zip">Download</a> this package.</li>
 <li>SCSS files are available in the <code>dist/</code> folder. You can import the <code>_animations.scss</code> file to include all the animations.</li>
 <li>Simply put the corresponding class on the element you want to animate. For Example: <code>bounceInRight</code>. Note that for the flipping animations you may need <code>perspective: XXXXpx;</code> on the container element for the full effect.</li>
 </ol>
-<p>It&rsquo;s recommended that you comment out animations you aren&rsquo;t using from <code>_animations.scss</code>, as these animations can get quite large.</p>
+<p>It&rsquo;s recommended that you comment out animations you aren&rsquo;t using from <code>_animations.scss</code> to save on file size. If you just want to use a pre-built css file, you can find it <a href="http://dwarcher.github.io/reboundgen/dist/reboundgen.min.css">here</a> (47kb.)</p>
 <h2 id="how-to-customize-and-build-your-own-animations"><a name="user-content-how-to-customize-and-build-your-own-animations" href="#how-to-customize-and-build-your-own-animations" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>How to customize and build your own animations</h2>
 <ol>
 <li>Clone this repo <code>git clone https://github.com/dwarcher/reboundgen.git .</code></li>
@@ -1020,6 +1020,7 @@ <h2 id="how-to-customize-and-build-your-own-animations"><a name="user-content-ho
 <li>Built animations will go into <code>dist/</code></li>
 <li>Or, you can run <code>grunt watch</code> to build whenever you make a change.</li>
 </ol>
+<p>This will build individual animations, compiled .css files and automatically add any new animations to the example page so you can see them immediately. This can be a big help for quickly developing new animations. </p>
 <p>Alertnately, you can compile from code.</p>
 <p>Install the module with: <code>npm install reboundgen</code></p>
 <pre><code class="javascript">var reboundgen = require('../lib/reboundgen.js');
@@ -1057,7 +1058,7 @@ <h2 id="data-format"><a name="user-content-data-format" href="#data-format" clas
 <h4 id="steps"><a name="user-content-steps" href="#steps" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>steps</h4>
 <p>Type: <code>Number</code><br />
 Default value: <code>50</code></p>
-<p>The number of keyframes to generate. Depending on how complex your animation becomes, you may need more or less frames.</p>
+<p>The number of keyframes to generate. In most cases you can leave this at 50, since reboundgen will remove unnecessary keyframes. However you can experiment with using lower values like 25 to save on file size.</p>
 <h4 id="name"><a name="user-content-name" href="#name" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>name</h4>
 <p>Type: <code>String</code></p>
 <p>The name of the animation and resulting .scss file. Be sure to avoid illegal characters.</p>
@@ -1102,6 +1103,14 @@ <h4 id="properties"><a name="user-content-properties" href="#properties" class="
 <li>skewX</li>
 <li>skewY</li>
 </ul>
+<h4 id="originx"><a name="user-content-originx" href="#originx" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>originX</h4>
+<p>Type: <code>Number</code><br />
+Default value: <code>0.5</code></p>
+<p>The transform-origin x parameter in the range of 0&hellip;1.0</p>
+<h4 id="originy"><a name="user-content-originy" href="#originy" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>originY</h4>
+<p>Type: <code>Number</code><br />
+Default value: <code>0.5</code></p>
+<p>The transform-origin y parameter in the range of 0&hellip;1.0</p>
 <p>If you specify an object for the property, you can set the <code>start</code> and <code>end</code>. Additionally, any of the above parameters (friction, tension, etc.) can be overriden per property. If you don&rsquo;t specify an object and simply specify a number instead, then it is assumed that you are transitioning from 0 to the number with the default settings.</p>
 <h2 id="release-history"><a name="user-content-release-history" href="#release-history" class="headeranchor-link"  aria-hidden="true"><span class="headeranchor"></span></a>Release History</h2>
 <p><em>(Nothing yet)</em></p>

diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
-# reboundgen
+# ReboundGen
 
-Keyframe animation generator that uses Rebound.js
+Keyframe animation generator built on (Facebook's Rebound.js)[https://github.com/facebook/rebound-js]
 
 
 ## Examples
-Are [here](http://dwarcher.github.io/reboundgen/examples/)
+See [here](http://dwarcher.github.io/reboundgen/examples/) for a list of the 'out of the box' animations.
 
 ## How to use
 
@@ -14,7 +14,7 @@ Are [here](http://dwarcher.github.io/reboundgen/examples/)
 2. SCSS files are available in the `dist/` folder. You can import the `_animations.scss` file to include all the animations.
 3. Simply put the corresponding class on the element you want to animate. For Example: `bounceInRight`. Note that for the flipping animations you may need `perspective: XXXXpx;` on the container element for the full effect.
 
-It's recommended that you comment out animations you aren't using from `_animations.scss`, as these animations can get quite large.
+It's recommended that you comment out animations you aren't using from `_animations.scss` to save on file size. If you just want to use a pre-built css file, you can find it [here](http://dwarcher.github.io/reboundgen/dist/reboundgen.min.css) (47kb.)
 
 ## How to customize and build your own animations
 
@@ -25,6 +25,8 @@ It's recommended that you comment out animations you aren't using from `_animati
 5. Built animations will go into `dist/`
 6. Or, you can run `grunt watch` to build whenever you make a change.
 
+This will build individual animations, compiled .css files and automatically add any new animations to the example page so you can see them immediately. This can be a big help for quickly developing new animations. 
+
 Alertnately, you can compile from code.
 
 Install the module with: `npm install reboundgen`
@@ -69,7 +71,7 @@ This could easily be turned into a grunt or gulp plugin...
 Type: `Number`
 Default value: `50`
 
-The number of keyframes to generate. Depending on how complex your animation becomes, you may need more or less frames.
+The number of keyframes to generate. In most cases you can leave this at 50, since reboundgen will remove unnecessary keyframes. However you can experiment with using lower values like 25 to save on file size.
 
 #### name
 Type: `String`
@@ -130,6 +132,18 @@ List of properties to animate. Currently we're suppporting:
 + skewX
 + skewY
 
+#### originX
+Type: `Number`
+Default value: `0.5`
+
+The transform-origin x parameter in the range of 0...1.0
+
+#### originY
+Type: `Number`
+Default value: `0.5`
+
+The transform-origin y parameter in the range of 0...1.0
+
 If you specify an object for the property, you can set the `start` and `end`. Additionally, any of the above parameters (friction, tension, etc.) can be overriden per property. If you don't specify an object and simply specify a number instead, then it is assumed that you are transitioning from 0 to the number with the default settings.
 
 ## Release History