replaceChild and TimelineMax

[benoit]

Hi,

It's a JS problem but how can I deal with this ? any magic option ?

See the Pen bxgaKX by benoitwimart (@benoitwimart) on CodePen

[Jonathan]

Hello @benoit

 

Can you please give us more details on what exactly you are trying to do. Its confusing since in your code it keeps replacing a child with the same exact <div> element with the same class and the same text value. Any reason why your doing that? All that will do is cause some layout thrashing of constantly trying to animate something that is affecting layout calculations for the same element. Also keep in mind that when animating transforms you should set the CSS position to absolute so it doesn't cause a reflow of the layout in the document flow.

 

Any additional information will be helpful in letting us know how we can help you

 

Resources:

https://www.impressivewebs.com/absolute-position-css/

https://www.w3.org/TR/css-position-3/#abs-pos

 

[benoit]

OK. I make a XMLHttpRequest to replace element (it's could be the same value or not) with new content.

[GreenSock]

You could just replace a child element and animate the container(s). 

 

Or you could write a function that creates the "tl" timeline again, but of course with the new element in place. Sorta like:

var tl = animateBoxes(); 
function animateBoxes() {
  var newTL = new TimelineLite({onComplete:load});
  newTL.to('.item',1,{x:300});
  return newTL;
}

function load() {
  tl.pause(0).kill();
  //...do whatever swapping/replacement here...
  tl = animateBoxes();
}

 

Does that answer your question?

[benoit]

Yep, it's work.
Why we need to kill the tl is newTL is overwrite ?

[GreenSock]

Sorry, I forgot to add the "tl = " in there. Edited.

var tl = animateBoxes(); 
function animateBoxes() {
  var newTL = new TimelineLite({onComplete:load});
  newTL.to('.item',1,{x:300});
  return newTL;
}

function load() {
  tl.pause(0).kill();
  //...do whatever swapping/replacement here...
  tl = animateBoxes();
}