Jump to content


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

Moderator Tag

Recommended Posts

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


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:


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.



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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Actually you nailed it. Since you're adding the element to the DOM on a specific event, that event is the perfect moment to either play/unpause an existing GSAP instance targeting that particular element, or to create a live animation (that is not paused) targeting the element.


Now in terms of performance, creating the GSAP instances, that is running the code that makes each Tween/Timeline is not expensive at all, unless you create thousands of them. If you run into a performance issue it most likely will be the rendering part of the animations.


Finally keep in mind that in javascript creating a variable, adds a reference to a specific reference to a place in the device's memory while creating the TweenLite instance on the fly, without storing it will save some memory, again a tiny amount of bits, not much. On the same subject GSAP has a very good and reliable way of sending instances to garbage collection so there is a guarantee that there will be no memory leaks in the GSAP side of the app.


Hopefully this sheds some light into your scenario ad helps you.


Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

@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

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.