Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bernex

Timeline and Deffered function

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

When posting a question the following is very important

  • An explanation of what you expect to happen
  • An explanation of the problem
    • What isn't happening
    • Any JavaScript errors

Lastly, and most importantly, we need code that is testable so that we can easily replicate the errors and help fix them. The best method we've found is if you create a simple CodePen demo as illustrated here: 

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

At first glance my assumption is that since your timeline is paused nothing is happening, but I have no idea what is happening with images loading or other related code.

 

I'm sure once you provide a CodePen demo we'll be able to help more efficiently and effectively.

  • Like 1
Link to comment
Share on other sites

Ok thanks for the codepen, but it's still not clear what your question is. All of the tweens occur, and your function logs to the console as I would expect, but there is nothing I can see regarding image preloading/replacing there. Also I'm not very familiar with jQuery deferred objects, so I have no idea what that deferred and promise code is supposed to be doing.

 

Could you please provide a more thorough explanation of the issue and your expectations per Carl's post?

  • Like 2
Link to comment
Share on other sites

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();
Link to comment
Share on other sites

Hi,

 

First, there is a colon instead of a semi-colon after q.resolve() (just a note for anyone else trying to help)

 

To help more with the GSAP side of things, you are missing 2 critical components

 

1: pausing the timelime when the loading starts

2: a function that will resume() the timeline whenever your img is done loading

 

This CodePen here http://codepen.io/GreenSock/pen/gbFHK should help.

 

I don't have time at the moment to study the API references you provided, but a simple example of a some method running when an image is done loading using your promise setup would have been helpful. Hopefully what we provided is enough to get you going.

  • Like 1
Link to comment
Share on other sites

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  :mrgreen:

  • Like 2
Link to comment
Share on other sites

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  :mrgreen:

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

Link to comment
Share on other sites

Hi,

 

Again the information you provide isn't enough to get a clear idea of your issue. It seems that you want to tween the timeline to a specific label ("hover"). Keep in mind that when the timeline gets to the indicated label it becomes paused again. Fortunately the tweenTo method allows a callback, which you can use to resume the timeline once the tweenTo has finished:

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();
    q.done(function()
    {
      tl.tweenTo("hover",{onComplete:resumeAnimation});
    });
    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';
    //console.log(q.promise())
    //return q.promise();
});
//this will pause the timeline
tl.addPause();

tl.to("#blueBox", 1, {left:500});
tl.add("hover");
tl.to("#blueBox", 1, {left:250});
tl.play();

//feel free to call this function when you are done loading
function resumeAnimation(){
  tl.resume();
}

Again, it'll help a lot to get more a detailed explanation and a live reduced sample.

 

Rodrigo.

Link to comment
Share on other sites

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');
Link to comment
Share on other sites

Hi,

 

tweenTo() and tweenFromTo() methods move the timeline's playhead position, but they don't change the timeline's state nor play/reverse the timeline. In this case your timeline is still paused.

 

Like I said in the previous reply, you can take advantage of the fact that this methods takes callbacks, like onComplete for example, like that you can resume the timeline after the tweenTo method has been completed. Please take a look at the API reference:

 

http://api.greensock.com/js/com/greensock/TimelineMax.html#tweenTo()

 

Also I forked your codepen so you can see how this works:

 

See the Pen xvKzD by rhernando (@rhernando) on CodePen

 

Rodrigo.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×