Jump to content
Search Community

TweenMax in Loop - Delay Issue

dazzafact test
Moderator Tag

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

Hello i run the tweenmax in a loop for a Videoslideshow

Between new Titles in a delay of 5 seconds  , .

the problem is that the loop is pointing to the last title, because it not async (and not waiting)

event "onStart" is always starting immediately - so  maybe a solution would be a new Event which start after the delay "onDelayStart"

 

loop1

    TweenMax.to(title, 1, {pixi:{onStart:function(){title.text='Label 1';},alpha:1, delay:0,colorizeAmount:1}});

loop2

    TweenMax.to(title, 1, {pixi:{onStart:function(){title.text='Label 2';},alpha:1, delay:5,colorizeAmount:1}});

loop3

    TweenMax.to(title, 1, {pixi:{onStart:function(){title.text='Label 3';},alpha:1, delay:10,colorizeAmount:1}});

 

See the Pen mQajrO?editors=1010 by szczepan-krol (@szczepan-krol) on CodePen

Link to comment
Share on other sites

Hi dazzafact,

 

Welcome to the forums!

 

Could you provide us with a reduced case example? It's very hard to troubleshoot blind. You speak of runing a loop for a video slide show but, I am not sure when this loop is being called, what else is happening at the same time, where you are setting your tweens. I also see a reference to the pixi plugin and so on.

 

There are too many variables here, not enough for us to help you with.

 

We suggest making a demo in CodePen but any online editor is fine as long as we can tinker with the code and see the bare minimum to reproduce your issue.

 

In case you need help with CodePen:

 

  • Like 3
Link to comment
Share on other sites

Agreed, is necessary some sample code to get the real issue you're facing.

 

In the mean time here is a simple example of using GSAP in a for loop changing a the string in a PIXI text instance:

 

See the Pen ?editors=0010 by rhernando (@rhernando) on CodePen

 

Also the issue in your code could stem from the fact that you're adding the onStart callback inside the pixi:{} config object, note that I don't use the pixi wrapper in this case, since I'm not tweening any PIXI related property, just updating the text. Try removing the onStart callback out of the pixi config object, try again and let us know how it goes.

 

Happy Tweening!!!

 

  • Like 5
Link to comment
Share on other sites

Hi,

 

Is not completely clear to me what you're trying to do here.

 

You want to delay the animation of the x position but not the text or you want different delays for the text and the position?. Something like short delay for the text and long delay for the x position tween?.

 

Please clarify this in order to understand correctly what  you're trying to do and how to solve the issue.

 

Happy Tweening!!

  • Like 3
Link to comment
Share on other sites

Did you see Rodrigo's comment where he pointed out that you have your onStart call inside the pixi:{} config object? That's not meant to be there.

 

If I move it outside the pixi config object and put a console.log call into the onStart, I see it fire according to the delay as expected.

 

Your problem here is not with GSAP but with JavaScript scoping. You are asigning new values to the same variable and because it's the same variable, its value gets updated every loop call. So, you think something's wrong but it's not. It's expected behaviour.

 

What you want to do is create a brand new variable inside the for loop to store the values you need. So.

 

Instead of:

for (k in js1["slides"]) {
  // Wrong way to set these variables up
  v = js1["slides"][k]["snips"];
  text.x = 0;
  dur += 5;
  textTitle = js1["slides"][k]["title"];
  console.log(textTitle + " start at sec:" + dur);
  TweenMax.to(text, 1, {
    pixi: {
      x: 720 / 2,
    },
    onStart: function() {
      text.text = textTitle;
    }
    delay: dur,
    ease: Power2.easeOut
  });
}

 

You need:

for (k in js1["slides"]) {
  // Wrong way to set these variables up
  const v = js1["slides"][k]["snips"];
  text.x = 0;
  dur += 5;
  const textTitle = js1["slides"][k]["title"];
  console.log(textTitle + " start at sec:" + dur);
  // You will also need a new "text" reference if you are planning on having two lines appear staggered
  TweenMax.to(text, 1, {
    pixi: {
      x: 720 / 2,
    },
    onStart: function() {
      text.text = textTitle;
      console.log(textTitle)
    }
    delay: dur,
    ease: Power2.easeOut
  });
}

 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

 

1 hour ago, dazzafact said:

the Problem is that the tweenMax events can not start delayed, they start all nearly same, no matter if the delay is increased.

so i expect to initial the tween with a given delay

please look at Console.log

 

You're using global, var, and let variables inside a loop. That's asking for problems. And you probably shouldn't loop through a object like that.

 

Fixed.

 

const tl = new TimelineMax();
  
js1["slides"].forEach((slide, i) => {   
  const delay = dur + (i * dur);
  tl.set(text, { text: slide.title, x: 0 }, delay)
    .to(text, 1, { x: 360 }, delay);
});

 

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

On 11/30/2018 at 5:08 PM, OSUblake said:

Hello Thanks!

This works for me!!!

 

On 11/30/2018 at 5:08 PM, OSUblake said:

 


const tl = new TimelineMax();
  
js1["slides"].forEach((slide, i) => {   
  const delay = dur + (i * dur);
  tl.set(text, { text: slide.title, x: 0 }, delay)
    .to(text, 1, { x: 360 }, delay);
});

 

 

 

 

See the Pen JexLGV?editors=1010 by szczepan-krol (@szczepan-krol) on CodePen

 

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.
×
×
  • Create New...