Performance cost of adding elements that do not exist in DOM to a Timeline

[_lex]

Hi,

 

TL;DR version of my question: What is the performance cost of adding elements that do not exist in the DOM to a timeline?

 

 

Full version of my question:

 

I'm using Greensock (TweenMax & TimelineMax) on a very dynamic site that uses SmoothState to load pages.

 

Due to the nature of the site, I don't always know which elements will exist on the page.

 

I want to know whether I will pay a huge cost in terms of performance if I create a Timeline with Tweens for let's say 30 elements, but only 5 might exist on the page.

 

This timeline will be re-created on every page load, so I am aware that it is possible to check whether items exist first using something like:

if($('.some-element').length) {
    myTimeline.add(TweenLite.to('.some-element', 3, { autoAlpha: 1 }));
}

But for code brevity and legibility, I would prefer to just add the Tweens for elements without checking, but only if I'm not going to pay big time in terms of performance (or getting JS errors), seeing as the site is already quite heavy.

 

PS. Absolutely amazing library, well done to the creators! This is my first project of many where I will be using GreenSock extensively.

 

 

Thank you in advance!

 

[GreenSock]

First of all, welcome to the forums (and GSAP)! Nice to hear that you're enjoying things thus far. 

 

Performance-wise, it kinda depends. If you're using selector text like in your example, it will try finding matching elements and if there are none, it'll basically be like an empty tween that still runs its course but doesn't actually try setting any properties. It still runs its course so that any callbacks (like onComplete, onUpdate, etc.) work properly and so that it takes up the correct amount of time on its parent timeline, ensuring that sequenced things work as expected. 

 

If, however, you literally try tweening a null target instead of using selector text, like: 

TweenLite.to(document.getElementById("#somethingThatDoesNotExist"), 1, {x:100}); //throws exception

It'll throw an exception because you cannot tween a null target. That'd be literally like trying to set null.x = 100. This is generally seen as a good thing (throwing an exception in this case) because it alerts you to when you've got funky code. So definitely don't try passing in null or undefined as the target. 

 

Performance-wise, I doubt you'd ever really notice a difference unless you're literally creating hundreds or thousands of unnecessary tweens all at once. I've had upwards of 10,000 tweens being spawned in staggered fashion every half-second and I barely saw a 1fps drop on my system. 

 

I personally tend to obsess about performance, so I may choose to sprinkle in the conditional logic but honestly it's probably not necessary. I'd recommend running your own tests and see if it makes any difference even on slow mobile devices. Good question, though. 

 

Happy tweening!

[_lex]

Perfect, thanks so much for the quick response, answers my question perfectly!