[Optimising / performance of "not-in-DOM" elements]

@Rodrigo Thank you for your answer! Pity there is no internal self-ways to do this.. but I think this solution will answer my purposes. Anyway, I think there is not your fault it's just something wrong with my expectations. As I can see no one animation framework creator does such thing.

Best regards,

Nick Rimer

[Optimising / performance of "not-in-DOM" elements]

Hello there!

I'm a bit newbie in a GSAP animation exactly. And I'll start with a simple example to understand my expectations.

 

For example, if I'll create the element like this

const elem = document.createElement("div");

it is not in DOM for now, but I can apply animation on it so far

TweenMax.to(elem, 1, { x: 300 });

and it will start immediatly.

So, when this element will be appended into DOM (after 1 sec passed), it will have its `transform: translateX(300px);`

If this element appends while tweening we'll see it moving from some middle point.
The very simple example is in CodePen applied.

 

Is there a way to make some performance on elements, that are not in DOM for right now, i.e. hold the animation until the element appears on the screen? Some kind of holding animation request until appending or smth. similar.

Hope, my explanation is well.

 

Best regards,

Nick Rimer

 

UPD:
I solved this case with a combination of `pause` property and `document.body.contains(elem)`.

Saving animation first:

const anim = TweenMax.to(elem, 1, { x: 300, paused: !document.body.contains(elem) });

Run animation when element will appear:

anim.play();

But I don't know if this solution is awful/great/the best. Maybe you'll find the most efficient and elegant way.

CodePen was updated.

 

UPD2:

Want to point out that the aim is to understand are there any performances on start of the animation I not needed to start right now? I really don't wanna to start even calculate something, if the animation starts not in time (there may be several animation at one time or smth. else). But to start animate, when the element appears.

So I don't really understand will the solution with `paused: true` helps or not.

See the Pen exXXbG by Nick_Rimer (@Nick_Rimer) on CodePen