[Timeline and Deffered function]

Sure... pause is a good solusion, but don't work then I use tweenTo(copy)...

Both boxes animated.

 

See the Pen qDkob by dkdf (@dkdf) on CodePen

var tl = new TimelineMax({paused: true});
tl.to("#redBox", 1, {left:500});
tl.addLabel("preload_and_change");
tl.add(function() {
  tl.pause();
});
tl.to("#blueBox", 1, {left:500});

tl.addLabel("step2");
tl.tweenTo('step2');

[Timeline and Deffered function]

Hi,

 

Just like Carl and Jamie, I'm a little lost about this, but I'll try to sharp my mind reading powers as much as I can.

 

You want to pause the timeline while the image is loading and then resume it after it has been loaded?. If so keep in mind that when you add a function to a timeline, that doesn't extend the timeline's duration, so it GSAP won't wait for the preloading to be complete in order to go to the next instance, it'll execute the code and then go to the next instance.

 

What you could do is pause the timeline after the function and on the deferred callback resume the timeline.

var tl = new TimelineMax({paused: true});
tl.to("#redBox", 1, {left:500});
tl.addLabel("preload_and_change");
tl.add(function() {
  //http://api.jquery.com/promise/
  //http://api.jquery.com/category/deferred-object/
    var q = $.Deferred();

    //once the deferred object is resolved the timeline resumes
    q.done(function()
    {
      tl.play();
    });
    
    var img = document.createElement("img");
    img.onload = function() {
      //UPDATE IMAGE THEN LOADED AND THEN RESUME ANIMATION
      q.resolve();
    }
    img.src = 'http://www.greensock.com/wp-content/themes/greensock/images/logo.png';
    
    return q.promise();
});
//now we pause the timeline
tl.addPause();
tl.to("#blueBox", 1, {left:500});
tl.play();

Rodrigo.

 

PS: Well Carl's faster than me reading minds 

That to do if I'm using tweenTo("hover")? Pauso not working (

[Timeline and Deffered function]

I have updated code...

var tl = new TimelineMax({paused: true});
tl.to("#redBox", 1, {left:500});
tl.addLabel("preload_and_change");
tl.add(function() {
  //http://api.jquery.com/promise/
  //http://api.jquery.com/category/deferred-object/
    var q = $.Deferred();
    
    var img = document.createElement("img");
    img.onload = function() {
      //UPDATE IMAGE THEN LOADED AND THEN RESUME ANIMATION
      q.resolve():
    }
    img.src = 'http://www.greensock.com/wp-content/themes/greensock/images/logo.png';
    
    return q.promise();
});
tl.to("#blueBox", 1, {left:500});
tl.play();

[Timeline and Deffered function]

See the Pen KjdCg by dkdf (@dkdf) on CodePen

[Timeline and Deffered function]

I wanna preload image and replace.

 

This code do not working: 

See the Pen KjdCg by dkdf (@dkdf) on CodePen

var tl = me.tl = new TimelineMax({paused: true});

tl.addLabel("preload_and_change");
tl.add(function() {
    var q = $.Deferred();
    console.log("prepare")
    
    return q.promise();
});

Can I do it? How?

 

Thanks.