diff --git a/README.md b/README.md index aaa1d0c..54262db 100644 --- a/README.md +++ b/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 diff --git a/src/dynamics.coffee b/src/dynamics.coffee index 09074fa..f62d0ce 100644 --- a/src/dynamics.coffee +++ b/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) diff --git a/test/dynamics.coffee b/test/dynamics.coffee index 8d570eb..1a35303 100644 --- a/test/dynamics.coffee +++ b/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' }