Jump to content

Search the Community

Showing results for tags 'asynchronous'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 1 result

  1. KerryRuddock

    .kill

    Hi guys, Several months ago I was working on a reaction tester where I used GSAP timeline to aid with animating balls around a screen. I was happy with my experience using GSAP, but left an issue on the table that I have revisited in the past week but have had problems diagnosing exactly where the problem lays.... In my codepen, I have a function called movekill() that is called when the animation completes by hitting a border. // movekill() is initiated by an onComplete callback method, a property of the GreenSock Animation Platform. // We use GSAP timelinelite's .to method to 'tween' the x,y and rotation properties and upon animation completion // this function is called to resupply the animation aka. 'tween' with new x,y, and rotation properties. function moveKill(tween, obj, border) { if ( tween.target[0]._gsTransform.x == undefined || tween.target[0]._gsTransform.y == undefined ) { alert ("undefined _gsTransform.x or _gsTransform.y") } // Get tween.target (shape) current position obj.posX = Math.floor(tween.target[0]._gsTransform.x); obj.posY = Math.floor(tween.target[0]._gsTransform.y); console.log("id " + obj.id + " pX " + obj.posX + " pY " + obj.posY + " " + ((obj.stageRight === true) ? "R" : "L") + " " + ((obj.stageTop === true) ? "T" : "B") + " CurX " + Math.floor(obj.posX) + " CurY " + Math.floor(obj.posY) + " wall " + border ); var i = obj.index, wall=""; // Check if our shape hit a corner if (( obj.posX === 0 && obj.posY === 0 ) || ( obj.posX === 0 && obj.posY === obj.borderY ) || ( obj.posX === obj.borderX && obj.posY === 0 ) || ( obj.posX === obj.borderX && obj.posY === obj.borderY )) { // debugger; } if ( obj.posX <= 0){ obj.toX = obj.borderX; obj.stageRight = true; wall="L"; } else if ( obj.posX >= obj.borderX){ obj.toX = 0; obj.stageRight = false; wall="R"; } if ( obj.posY <= 0 ) { obj.toY = obj.borderY; obj.stageTop = false; wall="T"; } else if ( obj.posY >= obj.borderY ){ obj.toY = 0; obj.stageTop = true; wall="B"; } if ( wall === "" ) { console.log ("houston we have a problem"); } t2[i].kill(null, obj.id); // $("h1").text("x: " + obj.posX + " y: " + obj.posY); moveTarget(obj, myConst.SET_SPEED_FALSE); } Using chrome developer tools I placed a js breakpoint at line 269, to track an intermittent glitch where sometimes a ball hits a corner and then 1 or 2 things happens: the ball appears in 2 places at once on the screen, or the ball freezes in the corner. I have stepped through my javascript code from the breakpoint until the re-entry of a new timeline and the glitch appears to be occuring within the GSAP timeline method I am not sure where to go from here. I have attached a chrome developer tool profile that shows function execution times. I don't see anything obvious. The code appears to be running correctly 99% of the time, but that 1% is the part I need help with and would appreciate whatever guidance you can offer. Sorry I trimmed the javascript length in the codepen as best as I could. The moveTarget() and moveKill() functions are where I use the GSAP timeline.to method and moveKill() is where I kill the tween and resupply moveTarget's obj with a new X and Y position for the ball that has hit the border.