Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

15 Newbie

About KerryRuddock

  • Rank

Profile Information

  • Gender
  • Location
    Vancouver, BC
  • Interests
    Front End Development
  1. Thanks Blake for those examples. I played with the GSAP .call() and it worked fine and I stuck with Craig's example for my FCC project I was working on. Can be seen in this https://codepen.io/KerryRuddock/full/oqrXXv/ I really liked the powerpoint presentation effect GSAP brought to this project.
  2. 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
  3. 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.
  4. This is what I would like to happen: 1) Loop through a 2 dimensional array, each array contains a story segment: approx. 9 sentences/lines per segment. 2) Loop through the segment, display 3 lines of the segment. Each line is staggered for a fadeIn display 3) After the fade-in, Delay for short reading period before fading out the display. Sounds easy enough, but I never got it right. I tried doing this using jQuery and setIntervals, then switched to setTimeouts, before giving it a go with GSAP. I'm lacking knowledge when it comes to looping with timers and th
  5. KerryRuddock


    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?
  6. KerryRuddock


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


    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 'twee
  8. 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
  9. 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
  10. 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.
  11. 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.ki
  12. 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 need
  13. 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(); }
  14. 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.