immediateRender:false not working with more than one "fromTo" in time line (SVG)

[lgatti]

Hello there!

At first, thanks for this great work!

I think there is maybe an error with immediateRender. I have a SVG image with a six working as rows of a list. The idea with this animation is: the last row showing itself on top and from the left of the container, now is the first on list, and then the animation will repeat with each row. To accomplish this, i did something like: var tl = new TimelineMax({repeat: -1, yoyo: false, repeatDelay:1, delay: 1}); tl.fromTo(rowSix, 1, {x: -300, y: -(48*5), opacity: 0}, {x: 0, y: -(48*5), opacity: 1, ease:Strong.easeOut}, "-=0.7");

After that, i move all the rows down(i'm not pasting the code here because i think it'd be useless).

Then the next row in list: tl.fromTo(rowFive, 1, {x: -300, y: -(48*4), opacity: 0}, {x: 0, y: -(48*4), opacity: 1, ease:Power4.easeOut}, "-=0.7");

What's the problem? The row 6 and 5 are not there when the animation starts, because they are already -300px in X and -XX in Y. I want to use immediateRender to avoid this behavior, i want the row on the original position until they need to move up. If i apply immediateRender, only the last row(number 6) is preventing of being applied with the from values, but number 5(i'm applying immediateRender as well) is already on top when animation start.

Hope you can understand my explanation :P Thanks!

[jackdoyle]

Hm, I'm not quite sure I understand - can you please provide a reduced test case, maybe in codepen or jsfiddle that clearly demonstrates the problem? As little code as possible - just the essential part to show the problem. We'd be happy to take a peek.

I didn't see immediateRender in any of your code, so I'm a bit confused about why you think there's a bug in it :)

[lgatti]

Hi @jackdoyle , thanks for your answer! Sorry, you are right, you can't understand what i meant.

Here is the jsfiddle with the code: https://jsfiddle.net/szj0pv03/

You will see there, when animation starts, // show row 3 is where the issue is. The same happen if you add immediateRender to //show row 4 or //show row 5

Please, let me know if i can help in some way or i may give more info.

Regards!

[jackdoyle]

Hm, I don't notice any bugs at all - I think it's just some logic issues in your code. I rebuilt it using about 1/3rd the amount of code, and it'll accommodate as many rows as you want now (with no extra code): https://jsfiddle.net/Lzm78pgs/1/

Is that what you're looking for?

var rows = ["#row-1", "#row-2", "#row-3", "#row-4", "#row-5", "#row-6"],
    rowHeight = 58,
    entryY = document.querySelector(rows[0]).getBBox().y,
    tl = new TimelineMax({repeat:-1}),
    remainingRows, offsetY;

//loop backwards
for (var i = rows.length - 1; i >= 0; i--) {
  //grab all the other rows (not the current one) and return them in an array so we can move them down as a group...
  remainingRows = getRemainingRows(rows, i);
  //the SVG artwork doesn't have everything spaced out vertically the same way (like row 6 is on top of row 5), so use getBBox() to figure out how far we need to offset this row...
  offsetY = (i * rowHeight) - (document.querySelector(rows[i]).getBBox().y - entryY);
  //set the initial y position to correct the spacing. That way, we can do relative tweening later.
  TweenLite.set(rows[i], {y:offsetY});
  //animate the other rows down
  tl.to(remainingRows, 1, {y:"+=" + rowHeight}, "+=1");
  //animate this row in at the top (don't forget to adjust for the offsetY).
    tl.fromTo(rows[i], 1, {x:-300, y:-rowHeight * i + offsetY, opacity:0}, {x:0, opacity:1, immediateRender:false}, "-=0.7")
}

function getRemainingRows(a, exclude) {
  var results = [], i;
  for (i = 0; i < a.length; i++) {
    if (i !== exclude) {
         results.push(a[i]);
    }
  }
  return results;
}

If you still think there's a bug in immediateRender, please provide a reduced test case with only absolute essential code (your other example used a lot of extra code that makes it difficult to decipher).

Happy tweening!

[lgatti]

Hey @jackdoyle thank you very much!, that's exactly what i need. About the code, yep, sorry about that, it's my first try with the library and it seems i didn't understand it. Thanks again for your help!