Feature/delay

Readme.md

@@ -17,6 +17,7 @@ var button = document.querySelector('button');
 var tween = Tween({ rotate: 0, opacity: 0 })
   .ease('out-bounce')
   .to({ rotate: 360, opacity: 1  })
+  .delay(200)
   .duration(800);
 
 tween.update(function(o){
@@ -56,6 +57,10 @@ animate();
 
   Set duration to `ms` [500].
 
+### Tween#delay(ms:Number)
+
+  Set delay to `ms` [0].
+
 ### Tween#ease(fn:String|Function)
 
   Set easing function to `fn`.

examples/array.html

@@ -45,4 +45,4 @@
 	}
 
 	animate();
-</script>
+</script>

examples/circle.html

@@ -20,7 +20,8 @@
   var tween = Tween({ alpha: 0, border: 1, radius: 1 })
     .ease('out-bounce')
     .to({ alpha: 1, border: 15, radius: 150  })
-    .duration(1000);
+    .duration(1000)
+    .delay(1000)
 
   tween.update(function(o){
     canvas.width = canvas.width;

examples/delay.html

@@ -0,0 +1,43 @@
+<style>
+  canvas {
+    border: 1px solid #eee;
+  }
+</style>
+
+<script src="../build/build.js"></script>
+
+<canvas width=500 height=400></canvas>
+
+<script>
+  var Tween = require('tween');
+  var raf = require('component-raf');
+  var canvas = document.querySelector('canvas');
+  var ctx = canvas.getContext('2d');
+
+  var tween = Tween({ w: 1, h: 1, border: 1, alpha: 0 })
+    .ease('out-circ')
+    .delay(400)
+    .to({ border: 5, w: 150, h: 100, alpha: 1  })
+    .duration(800);
+
+  tween.update(function(o){
+    canvas.width = canvas.width;
+    ctx.strokeStyle = 'black';
+    ctx.globalAlpha = o.alpha;
+    ctx.lineWidth = o.border;
+    ctx.rect(canvas.width / 2 - o.w / 2, canvas.height / 2 - o.h / 2, o.w, o.h);
+    ctx.stroke();
+    ctx.fill();
+  });
+
+  tween.on('end', function(){
+    animate = function(){};
+  });
+
+  function animate() {
+    raf(animate);
+    tween.update();
+  }
+
+  animate();
+</script>

index.js

@@ -24,6 +24,7 @@ function Tween(obj) {
   this._from = obj;
   this.ease('linear');
   this.duration(500);
+  this.delay(0);
 }
 
 /**
@@ -75,6 +76,19 @@ Tween.prototype.duration = function(ms){
   return this;
 };
 
+/**
+ * Set delay to `ms` [0].
+ *
+ * @param {Number} ms
+ * @return {Tween} self
+ * @api public
+ */
+
+Tween.prototype.delay = function(ms){
+  this._delay = ms;
+  return this;
+};
+
 /**
  * Set easing function to `fn`.
  *
@@ -121,7 +135,10 @@ Tween.prototype.step = function(){
   var duration = this._duration;
   var now = Date.now();
   var delta = now - this._start;
-  var done = delta >= duration;
+  var done = delta >= duration + this._delay;
+  var waiting = delta < this._delay;
+
+  if (waiting) return;
 
   // complete
   if (done) {
@@ -137,7 +154,7 @@ Tween.prototype.step = function(){
   var to = this._to;
   var curr = this._curr;
   var fn = this._ease;
-  var p = (now - this._start) / duration;
+  var p = (now - this._start - this._delay) / duration;
   var n = fn(p);
 
   // array