Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Fusion2222

  1. 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));

    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));

    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.



  2. Hi everyone,


    I have following code:


    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?

  3. 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", {
    				bounds: "#table-wrapper",
    				allowNativeTouchScrolling: true,
    				onDragStart: function(){
    					console.log("Dragged just once!");
    					this.onDragStart = null;}
  4. 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.



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

  5. 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!

    • Like 1
  6. Hi everyone.


    Just wondering, if It is possible something like:

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


    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

  7. Hi Johnatan,


    Here it is:


    With no GSAP included:



    With GSAP included:



    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.

  8. 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