Pass progress to change callback

README.md

@@ -70,7 +70,9 @@ Animates an element to the properties with the animation options.
   - `duration` is in milliseconds (default: `1000`)
   - `delay` is in milliseconds (default: `0`)
   - `complete` (optional) is the completion callback
-  - `change` (optional) is called at every change
+  - `change` (optional) is called at every change. Two arguments are passed to the function. `function(el, progress)`
+    - `el` is the element it's animating
+    - `progress` is the progress of the animation between 0 and 1
 
 ### dynamics.stop(el)
 Stops the animation applied on the element

src/dynamics.coffee

@@ -1097,7 +1097,7 @@ animationTick = (t, animation) ->
 
   applyFrame(animation.el, properties)
 
-  animation.options.change?(animation.el)
+  animation.options.change?(animation.el, Math.min(1, tt))
   if tt >= 1
     animation.options.complete?(animation.el)
 

test/dynamics.coffee

@@ -134,6 +134,40 @@ describe 'dynamics.animate', ->
       done()
     , 150
 
+  it 'calls change with element being animated', (done) ->
+    el = document.createElement('div')
+    dynamics.animate(el, {
+      left: 100,
+      top: "50px"
+    }, {
+      duration: 100,
+      type: dynamics.easeInOut,
+      change: (element) ->
+        assert(el == element, "Element should be the same")
+    })
+    setTimeout ->
+      done()
+    , 150
+
+  it 'calls change with progress incrementing', (done) ->
+    el = document.createElement('div')
+    savedProgress = -1
+    dynamics.animate(el, {
+      left: 100,
+      top: "50px"
+    }, {
+      duration: 100,
+      type: dynamics.easeInOut,
+      change: (el, progress) ->
+        assert(progress > savedProgress, "Progress should increment")
+        assert(progress >= 0 && progress <= 1, "Progress should be in [0, 1] range")
+        savedProgress = progress
+    })
+    setTimeout ->
+      assert(savedProgress == 1, "Progress should end with 1")
+      done()
+    , 150
+
   it 'actually animates properties while the animation is running', (done) ->
     el = document.createElement('div')
     previous = { left: 0, top: 0, translateX: 0, rotateZ: 0, transform: 'none' }