Web animations API callback function

Question

I've just discovered the Web Animations API, and I'm trying to figure out how to introduce a callback function for these animations..I've tried using the following

$('.box_wrapper')[0].animate([
    { right: '-100%' },
    { right: 0 }
], {
    fill: 'forwards',
    duration: 1000,
    onfinish: function() {
        // do stuff
    }
});

Looking at the w3c spec on this section I thought that the onfinish property is what I'd need to use, but nothing happens.

I've also tried using the jQuery callback syntax;

$('.box_wrapper')[0].animate([
    { right: '-100%' },
    { right: 0 },
], {
    fill: 'forwards',
    duration: 1000
}, function() {
    // do stuff
});

But of course this doesn't work either. Any Ideas, I'm sure it's something simple, I've just not been able to find the info yet.

Answer 1

I nearly had it right, with a small tweak like so, the callback works;

$('.box_wrapper')[0].animate([
    { right: '-100%' },
    { right: 0 }
], {
    fill: 'forwards',
    duration: 1000
}).onfinish = function() {
    // do stuff
};