en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en en en en en de en en en en en en en en en en en en en en fr ja en en en en en en en en it en en en en en en it en en en en en en fr en nb en fr en en en en en en en en it mk en en en en mk en nb en mk en en mk en en en en mk en nb en mk en en mk en en en en mk en nb en mk en en mk en en en en mk en nb en mk en en en en en en en sv en nb en sv en nl cy de en en en en en sv en nb en sv en nl cy de en en en en en sv en nb en sv en nl cy de en en en en en sv en nb en sv en nl cy de en en en en en sv en nb en sv en nl cy de en en en en en sv en nb en sv en nl cy de en en en en en sv en nb en sv en nl cy de en en en es en es en pl en en en en en en en en en en en es en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Loops, arrays, and delays. oh - my
KerryRuddock replied to KerryRuddock's topic in GSAP
Thank you Craig. Your pen is exactly what I am looking for. I wish I could understand why your javascript works and mine does not. The thing is, with my code I do see the correct output at console.log... just not on the screen which I'm sure is just my lack of knowledge. I thought using a new TimeLineLite object on each iteration might do the trick, but I'm convinced I tried this before my posting. This had had no impact on achieving a better result. function displayTribute( tribute, j ) { var tl = new TimelineLite(); console.log( tribute[j], tribute[j+1], tribute[j+2]); $line1.text( tribute[j] ); $line2.text( tribute[j+1] ); $line3.text( tribute[j+2] ); tl.staggerTo( [$line1, $line2, $line3], 3, { opacity: 1 }, 0.5 ) .to( [$line1, $line2, $line3], 1, { opacity: 0 }, "+2" ); } In your pen, could humor me, when does onComplete: call animateStory? Is it at the end of tl.staggerTo()? or is it at the end of tl.to()? function animateStory() { if (line < 9) { var tl = new TimelineMax({ onComplete: animateStory }); line1.innerHTML = tribStory[j][line]; line2.innerHTML = tribStory[j][line + 1]; line3.innerHTML = tribStory[j][line + 2]; tl.staggerTo([line1, line2, line3], 3, { opacity: 1 }, 0.5); tl.to([line1, line2, line3], 1, { opacity: 0 }, "+=1"); line += 3; } else if (j < tribStory.length - 1) { j++; line = 0; animateStory(); } else { console.log("all done"); } } animateStory();
Lines appearing after animation (issue on Chrome, Opera)
KerryRuddock replied to Mantvydas's topic in GSAP
Nice work Visual-Q. I was reading this post on Stack Oveflow and was playing around with the css outline property with an inset-style to try and get this to work.
Loops, arrays, and delays. oh - my
KerryRuddock posted a topic in GSAP
KerryRuddock replied to KerryRuddock's topic in GSAP
KerryRuddock replied to KerryRuddock's topic in GSAP
Thanks Jack, you gave me something to think about. I guess this is where I need your expertise, yep I have 2 tweens running to handle X and Y independently. When the ball hits either the left or right border, I want OnComplete for X to call moveKill(), and its within this function where I .kill both the X and Y tweens so that the onComplete does not fire off on the Y. Does this make sense, or am I handling this incorrectly?
KerryRuddock replied to KerryRuddock's topic in GSAP
Thanks for trying Carl, I will keep plugging away on this problem. I might have a question for you later. but for now I increased the number of balls so it is easier to reproduce the problem under the Rapid Fire button. Intermittent bugs are a pain to debug, you did right by choosing the rapid fire and there were 8 balls that bounced around. The problem doesn't always reveal itself. In the moveKill() function is where I use .kill method and I tried switching it from this: t2[i].kill(null, obj.id); to this... didn't help, but worth a try t2[i].kill({x:true, y:true, rotation:true}, obj.id); I changed the tests I was using to detect if a ball is at either right border and/or bottom border as I thought I may be rounding it off 1 pixel away from the right and/or bottom border. I could see this having an impact on not being able to detect a border correctly on occasion if the program was unable to resupply new x,y destinatiion to moveTarget.(). The bottom/right border tests now work when the ball is 1 pixel away. Unfortunately, this change didn't resolve the intermittent issue. // Get tween.target (shape) current position obj.posX = Math.floor(tween.target[0]._gsTransform.x); obj.posY = Math.floor(tween.target[0]._gsTransform.y); if (( obj.posX + 1 ) === obj.borderX ) { obj.posX = obj.borderX; } if (( obj.posY + 1 ) === obj.borderY ) { obj.posY = obj.borderY; }
KerryRuddock posted a topic in GSAP
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  = obj.borderX){ obj.toX = 0; obj.stageRight = false; wall="R"; } 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 occurring 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.
GSAP newbie - handling mouse events, tween killing, keyframes
KerryRuddock replied to KerryRuddock's topic in GSAP
Hi Blake, I do appreciate the example that you provided, Maybe I dismissed this too quick, but I saw that you were pushing the ball objects to the end of your array. I want my ball objects placed at an array indice that makes it easier to track for when I need to kill off my object during my click handler event. The codepen required JS Babel... I read JS Babel is based on ecmascript6. This in itself pushed me away from the codepen. If I had more experience with class based languages such as java and C++ or C#, I would have taken a harder look, but this was a little too much to learn for me at this point . Javascript, OOP, and GSAP ... all were foreign concepts to me a 3 months ago. Now if you ever need a program written in CADOL, I'm your man. I want to close off this thread. I have the Rapid Fire working. Therel are still a few issues: an occasional ball appearing in two places at once or getting stuck and my click handler seems lagging and unable to keep up GSAP. Here is my final codepen for those following this thread http://codepen.io/KerryRuddock/full/amoEOX/ Thanks again to everyone providing me with their input and helping me achieve my goal. It has been a fantastic learning process.
GSAP newbie - handling mouse events, tween killing, keyframes
KerryRuddock replied to KerryRuddock's topic in GSAP
Thanks Blake, As soon as I can complete my web development course and generate income I definitely plan to become a member and enjoy benefits such as using the VelocityTracker plugin. Very cool, but for now I am tracking velocity manually, I love your bouncing ball codepen and although I am not playing with gravity in my simulation, I am currently trying to simulate multiple bouncing balls in the "Rapid Fire" version of my reaction tester. I have one problem remaining, In the Rapid Fire version of my project, each object (or ball) that I add to the array of timelines seems to be affecting the previously added array object., in fact it become undefined. The object doesn't disappear from the screen, its just no longer in the array of timelines. I don't warrant any further help... I know. I am trying to figure this one out on my own. However, I want this thread to inspire other people taking my course or just other people learning javascript and found their way to this forum to see that they too can create wonderful javascript animations with GSAP. This http://codepen.io/KerryRuddock/full/OXKYKZ/ is my latest version of my reaction tester. We're almost there.
GSAP newbie - handling mouse events, tween killing, keyframes
KerryRuddock replied to KerryRuddock's topic in GSAP
Craig, Your code did eventually help me figure things out This worked when I plugged into your codepen, but didn't work when I plugged into my development code. Turns out that tween.target[0][0] is double-indexed on my side of things. Thanks, Onwards we go.
GSAP newbie - handling mouse events, tween killing, keyframes
KerryRuddock replied to KerryRuddock's topic in GSAP
I really thought I was on my way after viewing Craig's example, but I am still struggling to figure out a way how to get the value of x or y in the movekill() function. Not the propertyName itself. // run animation on initial target path tl.set(animTarget, {x:0, y:0 }) // x,y based on #myshape top/left .to(animTarget, secX, {x:500, onComplete:moveKill, onCompleteParams:["{self}","x"]}, "animTarget") .to(animTarget, secY, {y:500, onComplete:moveKill, onCompleteParams:["{self}","y"]}, "animTarget"); } function moveKill(tween, parm1) { console.log(tween, parm1); tl.kill(); } I want the X or Y value in moveKill() not "X" or "Y" . tween[parm1] is undefined. I spent 6 hours trying to hammer this one out myself, but had no success.
GSAP newbie - handling mouse events, tween killing, keyframes
KerryRuddock replied to KerryRuddock's topic in GSAP
That is exactly what I was looking for. Thank you. What I found interesting Craig, is that you removed the var from the tl object and thereby giving the timeline object global scope. I was curious, and tried putting the tl object back into local scope and then tried passing tl as well as the tween into moveKill, but this too failed function moveTarget (animTarget) { TweenLite.defaultEase = Linear.easeNone; var tl = new TimelineLite(); // <-- moveKill() doesn't recognize tl even when passed in onCompleteParams // the scope of tl needs to be global scope. // animTarget will be 'tweened' to x:500,y:500 var secX = getRandomInteger(100,300)/100; // tween X between 1 and 3 seconds var secY = getRandomInteger(100,200)/100; // tween Y between 1 and 2 seconds // run animation on initial target path tl.set(animTarget, {x:0, y:0 }) // x,y based on #myshape top/left .to(animTarget, secX, {x:500, onComplete:moveKill, onCompleteParams:["{self}","tl","x"]}, "animTarget") .to(animTarget, secY, {y:500, onComplete:moveKill, onCompleteParams:["{self}","tl","y"]}, "animTarget"); } function moveKill(tween, tl, parm1) { console.log(tween, parm1); tl.kill(); } I will be posting a link of the finished product shortly in case anyone else is following this thread.
GSAP newbie - handling mouse events, tween killing, keyframes
KerryRuddock replied to KerryRuddock's topic in GSAP
Hi Craig, Thanks for jumping in. I not sure if I set this up correctly, but I am passing in the timeline as a parameter and I am seeing the same result. Code below: // run animation on initial target path tl.set(animTarget, {x:0, y:0 }) // x,y based on #myshape top/left .to(animTarget, secX, {x:500, onComplete:moveKill, onCompleteParams:["tl","x"]}, "animTarget") .to(animTarget, secY, {y:500, onComplete:moveKill, onCompleteParams:["tl","y"]}, "animTarget"); } function moveKill(tl, parm1) { console.log(tween, parm1); tl.kill(); }
GSAP newbie - handling mouse events, tween killing, keyframes
KerryRuddock replied to KerryRuddock's topic in GSAP
Carl, Took a while to put together a shorter codepen, apparently I was missing some code for the killStuff(). Based on what I am seeing, the .kill() method is not killing the tween completely. As soon as the object hits either the right wall or the bottom wall the tween should be killed, but it continues until both .to methods have completed. Not sure why, would you mind having a look? Here's the link http://codepen.io/KerryRuddock/pen/qNzLAb/ Thanks again. were almost there.
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“...obviously GSAP is incredible”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s”
“GSAP was a revelation for me to be compared with the introduction of jQuery”
“@greensock is just pure awesomeness. What more can be said?”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.