Run function every time animation repeats - gsap

Question

Here's a script that animates a bouncing square:
http://jsfiddle.net/YH9nM/18/
var count = 1,
tM = new TimelineLite(),
element = $('#boxy');
function log(){
console.log('just bounced');
element.html('I\'ve bounced: ' + count + ' times!');
count++;
}
tM.from( element, 2, { top:'-=60px', ease: Linear.easeNone, repeat: -1, onRepeat: log() }, 0 );
However, that onRepeat option is not behaving as I'd expect. Rather than triggering the log function every time the animation repeats, it runs it once when the animation starts the first time.
It's behaving exactly as the onStart option would. Why is this happening? How can I make the div count how many times it's bounced ad infinitum?

Answer 1

You're running the log function when you define your tween, by using log(), and are assigning the return value of log to onRepeat (which is undefined since you don't return anything). You want the onRepeat var to be assigned to the log function
change
onRepeat: log()
to
onRepeat: log
You can see this in action here.

Answer 2

Patrick did actually answer the question, but here's what you want to do if you wish to pass parameters to a function you wish to run onRepeat:
onRepeatParams: ['as','many','parameters','as',1,true,'ly','wants'];
I also believe the most efficient way to access the element the timeline is applied to is through using the self keyword like this:
onRepeatParams: ["{self}"];
and then in the function doing this:
$(element.target).html('I\'ve bounced: ' + count + ' times!');
Here's what I mean in context:
var count = 1,
tM = new TimelineLite(),
element = $('#boxy');
function log(element){
console.log('just bounced');
$(element.target).html('I\'ve bounced: ' + count + ' times!');
count++;
}
tM.from( element, 2, { top:'-=60px', ease: Linear.easeNone, repeat: -1, onRepeat: log, onRepeatParams: ["{self}"] }, 0 );
http://jsfiddle.net/YH9nM/23/