Search code examples
javascriptpromisegsap

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');
});
Solution

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