[Reaching TweenMax from local scope.]

Thank you both for your precious insights!

[Reaching TweenMax from local scope.]

Hi everyone! Lately i had a discussion with one of my coworkers about this issue:

 

I have object named MyObject with method named launch. On every launch method call, method searches for TweenMax at global scope. Normally i would do:

MyObject.launch = function(){
     var domName = "#dom-" + String(Math.round(Math.random()*100));
     TweenMax.to(domName,1,{x:200});
}

Problem begins, when this method fires on every user scroll, which can be A LOT (especially in Firefox). My question is this: Isnt better to create an instance of TweenMax as a property of MyObject like this to reach better performance? 

MyObject.TweenMax = TweenMax;
MyObject.Math = Math; 
MyObject.launch = function(){ // Fires VERY often
     var Math = this.Math, 
     TweenMax = this.TweenMax,
     domName = "#dom-" + String(Math.round(Math.random()*100));
     MyObject.TweenMax.to(domName,1,{x:200});
}

In this scenario i would completely avoid of any global scope reaches. Please keep in mind performance-friendliness. However i still have a bad feeling, that this is not a good approach, but I dont know why. Any of your comments are deeply appreciated.

 

 

[Neverending tween]

How simple! I almost feel incompetent to not finding out myself! Thanks PointC.

[Neverending tween]

Hi everyone,

 

I have following code:

TweenMax.to(obj,5,{x:"+=150px",repeat:-1});

Since the x property is relative, i would expect tween to move object further and further. Instead, after tween is completed, object starts at x:0. Any ideas how to create such neverending tween?

[Inline tween styles remain even when clearing/invalidating]

I am just thinking... isnt a better idea to simply remove css properties with raw javascript like this (I mean instead of using "clearProps")?

delete myObject.style.color;

I guess performance should be better to remove it directly like this. Just wondering if there may be any side effects.

[issues with Draggable]

Thanks Diaco! I forgot vars.. 

[issues with Draggable]

If may use this topic, i would like to ask another minor question about Draggable. I would like to update onDragStart function after it is fired, so it will run just once and then delete itself. I have not found any good way how to do this. Any ideas?

Draggable.create("#table-wrapper", {
				type:"x",
				bounds: "#table-wrapper",
				allowNativeTouchScrolling: true,
				zIndexBoost:false,
				onDragStart: function(){
					console.log("Dragged just once!");
					this.onDragStart = null;}
				}
			});

[Draggable & percentage]

Thanks Diaco, I would call that far beyond being awesome. Very elegant solution, thanks again!

[Draggable & percentage]

Hi Diaco,

 

I tried to figure this out exactly like you did, and then i tried to assign these coordinates back to tween object.

 

Solution would be to convert left and top coordinates to % each time (using onDragEnd). But this is still not good, because on drag start, "left" and "top" are trasnformed in px like this:

 

50% -> 50px

35% -> 35px

 

Please take a look on #dragger object in my codepen, and watch out ugly behaviour. I wonder if is there any elegant solution for this.

 

codepen:

See the Pen KwgXWJ by anon (@anon) on CodePen

[Memory leaks during tweening multiple objects]

My scary sawtooth record is okay when i ran tests in incognito mode. Exactly as Jognatan advised. Moreover, i launched newest chrome version, and i have not experienced any scary sawtooth problems at all, even in standard mode.

 

I guess my trouble was old chrome version + not using dev tools in incognito mode, which is obviously my bad.

 

Anyway Jack, thanks for clarification of those 5 detached dom greensock objects. Thank you both for your answers!

[Draggable & percentage]

Hi everyone.

 

Just wondering, if It is possible something like:

Draggable.create("#myObject", {type:"xPercent,yPercent"});

or

Draggable.create("#myObject", {type:"leftPercent, topPercent"});

Simply said, my goal in both cases is a percentage output. Is this possible with current version of GreenSock Draggable?

See the Pen ZYpXYP by MAW (@MAW) on CodePen

[Memory leaks during tweening multiple objects]

Hi Johnatan,

 

Here it is:

 

With no GSAP included:

http://snag.gy/XA2fL.jpg

 

With GSAP included:

http://snag.gy/EeWaC.jpg

 

I must say, that i am not performance guru so maybe i am wrong, detached DOM elements are maybe not causing any bigger harm, but i just wanna make sure. What i studied about chrome dev tools, detached dom tree elements are so commom source of memory leaks, that dev tools by standard highlight single detached elements with red color (for developers to detect them easily). Again, maybe i am too paranoid and those detached DOM objects are harmless, but even during my exploration of docs, i could not find any explanation for this.

[Memory leaks during tweening multiple objects]

Thanks Johnatan, that was the case! Looks like i was too paranoid. But i would like to ask one more thing. As i explored test site with chrome dev tools, i find out, that even including GSAP library into HTML page generates 5 detached DOM objects. Is this okay?

[Memory leaks during tweening multiple objects]

Hi everyone,

 

I am trying to do a webpage, with bubbles in a background, to create interesting visual effect. I chose GreenSock to do a job, but when i came to chrome developer tools for memory inspection, i saw very ugly, still growing Sawtooth graph. It was growing even after a minutes of memory usage recording. I became performance paranoid, so i removed all (even local) variables after usage. Now i am 100% sure, that still growing sawtooth is a GreenSock thing.

 

So my question is what is wrong here? It is normal for javascript animations to consume memory like this? do Greensock have any memory leaks? Is GreenSock useable in this "Bubble" case? I dont want to create website, that will consume too much memory after minute of usage, and later causes problems for low-memory visitors.

 

I added screen of memory usage recording if it is helpful

 

See the Pen mnclG by anon (@anon) on CodePen