phantom phantom - 1 month ago 12
Javascript Question

Implement a promise once a tween has finished animating

I am using Tween to make an animation, and once that animation has completed I want to trigger another action to set the

src
of an iframe.

I know i need to use promises, but I am not 100% sure how to implement it in this case, and have been trying for quite sometime now. It works with the following code

Tween.to('#slideshow', 1, {
top: '50%'
});

setTimeout(function(){
$('.video-one').attr('src', 'https://www.youtube.com/embed/testOne');
$('.video-one').attr('src', 'https://www.youtube.com/embed/testOne');
}, 800)


BUT when I try the following it doesn't work

Tween.to('#slideshow', 1, {
top: '50%'
}).done(function(){
$('.video-one').attr('src', 'https://www.youtube.com/embed/testOne');
$('.video-one').attr('src', 'https://www.youtube.com/embed/testOne');
});

Answer

Based on what I'm seeing in the User Guide, Tween.js doesn't support Promises. Instead you have to use the callbacks that they specify. In this case I'm guessing onComplete is what you're looking for:

Tween.to('#slideshow', 1, {
  top: '50%'
}).onComplete(function() {
  // Code goes here
});