[ { "path": ".gitignore", "content": "# Ignore modules\n/node_modules" }, { "path": ".travis.yml", "content": "language: node_js\n\nnode_js:\n - 0.10\n - 0.11\n\nbefore_install:\n - npm install -g gulp\n\nscript:\n - gulp ci" }, { "path": "Cquence.js", "content": "\nvar Cq;\n\nCq = function(){\n var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function( f ){ setTimeout( f, 1000/60 ); };\n var elem = function( id ){ return document.getElementById( id ); };\n\n // IE checking\n var IEVERSION = getInternetExplorerVersion();\n var IE8 = IEVERSION === 8;\n var IEWTF = IEVERSION < 8 && IEVERSION > -1;\n\n var style = function( e, k, v ){\n if( k === 'opacity' ){\n if( IE8 ){ // gemene browsers\n e.style[ \"-ms-filter\" ] = \"progid:DXImageTransform.Microsoft.Alpha(Opacity=\" + Math.floor( v * 100 ) + \")\";\n e.style.filter = \"alpha(opacity=\" + Math.floor( v * 100 ) + \")\";\n\n } else { // lieve browsers\n e.style[k] = v;\n }\n } else {\n e.style[k] = v + \"px\";\n }\n };\n\n var combine = function(){\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments\n var list = Array.prototype.slice.call( arguments, 0 );\n var d = 0;\n for( var i=0; i t ){\n last.f( t );\n } else {\n if( !last.done ){\n last.f( last.d );\n last.done = true;\n }\n }\n\n }\n }\n };\n };\n\n var sequence = function(){\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments\n var timeline = Array.prototype.slice.call( arguments, 0 );\n var d = 0;\n for( var i=0; i t ){\n last.f( t - total );\n return;\n }\n if( !last.done ){\n last.f( last.d );\n last.done = true;\n }\n total = total + last.d;\n }\n }\n };\n };\n\n var animate = function( transform ){\n return function( id, dur, begin, fin ){\n return {\n d: dur,\n f: function( t ){\n var e = elem( id );\n for( var k in begin ){\n\n var bv = begin[k]; // begin waarde\n var fv = fin[k]; // finish waarde\n var dx = fv - bv; // verschil (afstand)\n\n // p is nu een waarde tussen de 0 en 1 .. en geeft aan hoe ver de animatie is\n var p = transform( Math.max( t/dur, 0 ) );\n\n // nieuwe waarde is de factor maal de afstand\n var nv = bv + (p * dx);\n style( e, k, nv );\n }\n }\n };\n };\n };\n\n // animation variants\n // http://upshots.org/actionscript/jsas-understanding-easing\n var linear = animate( function( p ){\n return p;\n });\n var easeIn = animate( function( p ){\n return Math.pow( p, 5 );\n });\n var easeOut = animate( function( p ){\n return 1 - Math.pow( 1 - p, 5 );\n });\n var sleep = function( d ){\n return { d: d, f: function(t){} };\n };\n\n /* from: http://stackoverflow.com/questions/10964966/detect-ie-version-in-javascript */\n function getInternetExplorerVersion()\n // Returns the version of Internet Explorer or a -1\n // (indicating the use of another browser).\n {\n var rv = -1; // Return value assumes failure.\n if (navigator.appName == 'Microsoft Internet Explorer')\n {\n var ua = navigator.userAgent;\n var re = new RegExp(\"MSIE ([0-9]{1,}[\\.0-9]{0,})\");\n if (re.exec(ua) !== null)\n rv = parseFloat( RegExp.$1 );\n }\n return rv;\n }\n\n var timeline = [];\n var start = (+new Date()); // unix timestamp\n var second = 1000;\n var stop = 15 * second;\n var render = null;\n\n // gets called recursive by request-animation-frame\n var renderloop = function(){\n // console.log('1. ', window.render );\n var now = (+new Date()) - start; // relatieve tijd vanaf begin animatie\n if( now < stop ) raf( renderloop ); // recursion, baby\n // console.log('2. ', window.render );\n if( window.render ) window.render.f( now );\n\n };\n\n return {\n combine: combine,\n sequence: sequence,\n linear: linear,\n animate: animate,\n easeIn: easeIn,\n easeOut: easeOut,\n sleep: sleep,\n renderloop: renderloop\n };\n\n}();\n" }, { "path": "Gulpfile.js", "content": "var gulp = require(\"gulp\"),\nuglify = require(\"gulp-uglify\"),\njshint = require('gulp-jshint'),\nstylish = require('jshint-stylish');\n\ngulp.task('lint', function() {\n return gulp.src('./Cquence.js')\n .pipe(jshint())\n .pipe(jshint.reporter( stylish ));\n});\n\ngulp.task(\"compress\", function(){\n\tgulp.src(\"./Cquence.js\").pipe( uglify() ).pipe( gulp.dest(\"minified\") );\n});\n\n\ngulp.task('ci', ['lint', 'compress']);\n" }, { "path": "README.md", "content": "\n\n# Cquence.js\n\n[![Build Status](https://travis-ci.org/RamonGebben/Cquence.svg?branch=master)](https://travis-ci.org/RamonGebben/Cquence)\n\nCquence is a very small Javascript animation library developed for banners and advertisement.\n\n[Demo](http://ramongebben.github.io/Cquence)\n\n## Basic usage\n\n```javascript\nrender = null; // Define the render object so that the renderloop knows what to render.\n\nrender = Cquence.combine() // Combine fires the sequences in its body the same time\n\nrender = Cquence.sequence() // Define the animations in order to create a timeline\n\nCq.sequence(\n\tCq.easIn( :id, :time, { :from }, { :to }),\n\tCq.easOut( :id, :time, { :from }, { :to }),\n\tCq.sleep( :time ) // Wait utill time is passed\n)\n\n```\n\n## Full example\n\n```javascript\n\nrender = Cq.combine(\n\tCq.sequence(\n\t Cq.sleep( 100 ),\n\t Cq.linear('frame3', 10000, { left: -900 }, {left: 300 })\n\t),\n\tCq.sequence(\n\t Cq.easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),\n\t Cq.easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),\n\t Cq.easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),\n\t Cq.combine(\n\t Cq.easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),\n\t Cq.easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),\n\t Cq.easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})\n\t ),\n\t Cq.sleep(1000),\n\t Cq.easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),\n\t Cq.easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 10}),\n\t Cq.sleep(1500),\n\t Cq.sequence(\n\t Cq.combine(\n\t Cq.easeIn('frame1', 1500, { left: 120 }, { left: -620 }),\n\t Cq.easeOut('frame9', 2000, { opacity: 1, left: 10 }, { opacity: 0, left: -300 })\n\t ),\n\t Cq.easeIn('frame2', 1000, { opacity: 0 },{ opacity: 0 }),\n\t Cq.easeOut('frame10', 1000, { bottom: -260 }, { bottom: 0 })\n\t )\n\t)\n);\n\n// launch the animation\nCq.renderloop();\n\n```\n\nThen your HMTL should look something like this:\n\n```html\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n

Hey there,

\n
\n
\n

People call me

\n
\n
\n

RamonGebben

\n
\n
\n

And this is an awesome lib

\n
\n
\n
\n
Download
\n
\n
\n
\n```\n\n\n## Development\n\nWe use Gulp for build tasks.\nTo minify/uglify for production use:\n\n```bash\n\n gulp compress\n\n```\n\n### Linting\n\nWe use jshint for linting.\nRun the gulp task to check.\n\n```bash\n\n gulp lint\n\n```\n\n\n## Licence\n\n Copyright (c) 2015 RamonGebben\n\n Permission is hereby granted, free of charge, to any person\n obtaining a copy of this software and associated documentation\n files (the \"Software\"), to deal in the Software without\n restriction, including without limitation the rights to use,\n copy, modify, merge, publish, distribute, sublicense, and/or sell\n copies of the Software, and to permit persons to whom the\n Software is furnished to do so, subject to the following\n conditions:\n\n The above copyright notice and this permission notice shall be\n included in all copies or substantial portions of the Software.\n\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "example.html", "content": "\nCquence example\n\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n

Hey there,

\n
\n
\n

People call me

\n
\n
\n

Ramon Gebben

\n
\n
\n

And this is an awesome lib

\n
\n
\n
\n
Download
\n
\n
\n
\n\n
\n\n\n\n" }, { "path": "minified/Cquence.js", "content": "var Cq;Cq=function(){function n(){var n=-1;if(\"Microsoft Internet Explorer\"==navigator.appName){var e=navigator.userAgent,t=new RegExp(\"MSIE ([0-9]{1,}[.0-9]{0,})\");null!==t.exec(e)&&(n=parseFloat(RegExp.$1))}return n}var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||function(n){setTimeout(n,1e3/60)},t=function(n){return document.getElementById(n)},r=n(),o=8===r,a=function(n,e,t){\"opacity\"===e?o?(n.style[\"-ms-filter\"]=\"progid:DXImageTransform.Microsoft.Alpha(Opacity=\"+Math.floor(100*t)+\")\",n.style.filter=\"alpha(opacity=\"+Math.floor(100*t)+\")\"):n.style[e]=t:n.style[e]=t+\"px\"},i=function(){for(var n=Array.prototype.slice.call(arguments,0),e=0,t=0;te?r.f(e):r.done||(r.f(r.d),r.done=!0)}}}},u=function(){for(var n=Array.prototype.slice.call(arguments,0),e=0,t=0;te)return void t.f(e-r);t.done||(t.f(t.d),t.done=!0),r+=t.d}}}},f=function(n){return function(e,r,o,i){return{d:r,f:function(u){var f=t(e);for(var c in o){var l=o[c],d=i[c],s=d-l,m=n(Math.max(u/r,0)),p=l+m*s;a(f,c,p)}}}}},c=f(function(n){return n}),l=f(function(n){return Math.pow(n,5)}),d=f(function(n){return 1-Math.pow(1-n,5)}),s=function(n){return{d:n,f:function(){}}},m=+new Date,p=1e3,w=15*p,v=function(){var n=+new Date-m;w>n&&e(v),window.render&&window.render.f(n)};return{combine:i,sequence:u,linear:c,animate:f,easeIn:l,easeOut:d,sleep:s,renderloop:v}}();" }, { "path": "package.json", "content": "{\n \"name\": \"Cquence\",\n \"description\": \"A very tiny Javascript animation library\",\n \"author\": \"Ramon Gebben \",\n \"version\": \"1.0.0\",\n \"devDependencies\": {\n \"gulp\": \"^3.8.10\",\n \"gulp-jshint\": \"^1.9.0\",\n \"gulp-uglify\": \"^1.0.2\",\n \"jshint-stylish\": \"^1.0.0\"\n }\n}\n" } ]