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.

score 3 · Accepted Answer · answered Apr 23 '15 at 12:54

3

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
};

answered Apr 23 '15 at 12:54

Novocaine

4,692
4
44
66

2

Just for future information, the W3C has removed the 'onfinish' attribute and replaced it with a 'finished' attribute which is a Promise. Source: http://www.w3.org/TR/2015/WD-web-animations-1-20150707/#dom-animation-finished – Nexii Malthus Jul 12 '15 at 11:38
So what does that look like in the new syntax? – RachelNabors Feb 12 '16 at 01:58
@CrowChick I believe you just replace `onfinish` with `finish` – Novocaine Feb 12 '16 at 14:12
1

Also, a heads up, `onfinish` was not replaces with `finish`: you can use either, for callback or promise syntax respectively :) – RachelNabors Feb 15 '16 at 23:57

Web animations API callback function

1 Answers1