KerryRuddock

April 17, 2018

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

See the Pen oqrXXv by KerryRuddock (@KerryRuddock) on CodePen

I really liked the powerpoint presentation effect GSAP brought to this project.

April 12, 2018

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

April 12, 2018

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.

April 11, 2018

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 the end result is I only see few sentences

from my multi-dimensional array. Sorry, ES5 is all I know, but it feels like I'm missing a closure or something in this codepen

Here's what the html, and the javascript looks like:

HTML:

<body>
  <section class="hero"></section> 
  <section class="tribute">
    <div class="tribute-line1"></div>
    <div class="tribute-line2"></div>
    <div class="tribute-line3"></div>
  </section>
 </body>

Javascript:

$(function() {
  var tribStory = [
    [ 
      "Line 1-1", "Line 1-2", "",
      "Line 1-4", "Line 1-5", "",
      "Line 1-7", "Line 1-8", "Line 1-9"
    ],
    [ 
      "Line 2-1", "Line 2-2", "",
      "Line 2-4", "Line 2-5", "",
      "Line 2-7", "Line 2-8", "Line 2-9"
    ]
  ]; // end array
  
  var tl = new TimelineLite();
  var $line1 = $(".tribute-line1");
  var $line2 = $(".tribute-line2");
  var $line3 = $(".tribute-line3");
  var $currFade;
  var delay = 1000;
  var i = 0;    
  var storyLen = tribStory.length;
  
  function displayTribute( tribute, j ) { 
    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 )
      .delay(2).to( [$line1, $line2, $line3], 1, { opacity: 0 } );
  }
  
  var tribAnim = function() {

    if ( i < storyLen ) {
      
      var tribArray = tribStory[i]; 
      var tribArrLen = tribArray.length;
      
      for ( j = 0; j < tribArrLen; j+=3 ) {
        (function( tribArray, j){
          displayTribute( tribArray, j );
        }(tribArray,j));
      }
      i++;
    } 
    if ( i < storyLen ) tribAnim();
 
  };
  tribAnim();
 
});

See the Pen YeYVWp?editors=1010 by KerryRuddock (@KerryRuddock) on CodePen

February 27, 2018

On 11/8/2016 at 10:52 PM, OSUblake said:
To be honest, when I read your reply 15 months ago about dirty objects I decided to hang up fixing this bug until I improved my javascript skills.

I am still not entirely sure what a dirty object is even after googling it. But I want to share what I did to fix my ball freezing on borders/corners problem:

1) Re-factor the code placing all of it in an IIFE, in essence to make sure I wasn't stepping into the global environment.

2) Changed the way the click handler killed the animated target. Old method I used this:
 t2[i].kill(null, target.id);
after reading more on the .kill(), I decided to go with this:
t2[i].kill(); 
3) Change the Shape constructor to ensure the ball was never randomly generated a new ball on a border. (rare, but it could happen.)

The above 3 changes seemed to help, but did not eliminate the problem entirely until I changed my moveTarget() function. Added a condition to

only use .set under new animation conditions, essentially if ( isSpeedSet === True ) also qualifies a new animation :
     if ( isSpeedSet === true ) {
       t2[i].set(animTarget, {x:target.posX, y:target.posY });
     }
So there you have it. My new version on codepen can be found
See the Pen xYywYQ by KerryRuddock (@KerryRuddock) on CodePen
. I can't say I have come across other GSAP animations on codepen that repeatedly uses .kill() and .to() method in the same manner as I do. One final note: I increased the # of balls to 400, 500, and 1000, and no ball freezing occurred.

November 9, 2016

I didn't have time to sift through all the code either, but it certainly smells like a logic issue. I noticed that you've got two tweens set up for each object, one for x and rotation and then the other for y and rotation. So you've got redundant rotation. You've also got both onCompletes pointed at the same function. That function seems to be handling stuff for both x and y. I could be wrong (because I really didn't have much time to dig into everything), but it sure looks like you've got logic issues in there; one call to moveTarget() results in 2 onComplete calls that each call moveTarget() again, thus you'd get exponentially more and more calls happening and potential conflicts.

Does that help at all? Like Carl said, an even more reduced test case would certainly help identify things quicker.

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?

November 9, 2016

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

November 7, 2016

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.

See the Pen BQyzmQ?editors=1010 by KerryRuddock (@KerryRuddock) on CodePen

August 31, 2016

Hi Blake,

That same pattern could be expanded into a class or function that can be reused to create multiple objects that can bounce and even be thrown.

See the Pen 9b67c34586f62058091ed16829c58ed5?editors=0010 by osublake (@osublake) on CodePen

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

See the Pen amoEOX by KerryRuddock (@KerryRuddock) on CodePen

Thanks again to everyone providing me with their input and helping me achieve my goal.

It has been a fantastic learning process.

August 29, 2016

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

See the Pen OXKYKZ by KerryRuddock (@KerryRuddock) on CodePen

is my latest version of my reaction tester. We're almost there.

August 26, 2016

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.

August 26, 2016

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.

August 26, 2016

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.

August 26, 2016

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

August 26, 2016

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

See the Pen qNzLAb by KerryRuddock (@KerryRuddock) on CodePen

Thanks again. were almost there.

August 25, 2016

Okay, Let me re-phrase Question 1:

In the chain of .to methods I displayed, 1 of the .to methods is going to complete before the other .to method completes as 1 method runs longer than the other method. Is there something that I can add to the .to method that calls a function when the tween completes?

I am tweening X and Y coordinates asyncronously and it could be either the X tween or the Y tween that completes first. So upon completion I want to kill the other tween, preserve the X and Y values and feed them into a new tween as the starting X,Y coordinates. Thanks for the links I will look at them now.

August 25, 2016

Hi guys,

Its been awhile since I posted this original question, but I have been busy honing my javascript skills and integrating GSAP

into my reaction tester application. My original goal was:

... to have a 'tweened' object collision detection checking in real-time. The collision may be

against a border or perhaps another 'tweened' object.

Not going with collision detection anymore, but I have simulated the object bouncing off the walls

by 'tweening' X and Y properties of the object independently and on different time scales.

This link:

See the Pen grNLYQ by KerryRuddock (@KerryRuddock) on CodePen

shows my latest work with GSAP

running the animations, I have a few questions I will ask in a moment.

What I create an object, I generate random X,Y coordinates as the top/left corner where I

want my object to appear. This code in 'moveTarget' function sets and runs the tween

  // run animation on initial target path 
   tl.set(animTarget, {x:target.posX, y:target.posY })
     .to(animTarget, secY, {y:dirY, rotation:360}, "animTarget")
     .to(animTarget, secX, {x:dirX}, "animTarget");

Question 1: From my understanding of the position parameter, my .to methods are ran asyncronously

based on the label I have set. One of these methods will complete before the other. How do

I kill the running method after the other method completes?, and are the X and Y properties

preserved? as I want to be able to start another tween with the X,Y values after the tween

method is killed.

Question 2: The x: and y: properties of this tween are fed from my object: target.posX and target.posY

How can I update update target.posX and target.posY while the tweens run?

Thank you so much guys. The more I play with GSAP, the more I realize how I can use this platform to replace

a lot of CSS code.

July 22, 2016

Jonathan,

You are right, there is a a lot of code and sorry I wasn't clear enough, I am new to GSAP

and this codepen I was previously referring you to is getting converted to GSAP -bit by bit.

Which may be why you made a reference to me using jquery.css(). Yes I am, but not for any 'tweened' objects.

Any reference to .css is after tween-animation.

I will keep in mind the TweenMax.set() method. For now, I want my button tweens to use a delay for the effect.

I took your advice to narrow down the problem, created a new codepen and see no evidence

of a - pause - between the 2 tweens used for my button's fontSize swell and retract effect.

See the Pen RRrYOO by KerryRuddock (@KerryRuddock) on CodePen

I am still,not sure what is causing a pause in my original codepen, For now, I will move on

and look at this later.

Craig,

Thanks for pen link and the visualizer link. I was playing around eases in Visualizer yesterday, it works great.

I think I understand how the TweenMax.to() duration and delay properties work. In my example below

I want the 2nd tween to trigger immdiately after the first tween is complete, I would set 2nd tween's delay

to be the time it takes to complete the 1st tween's duration.

A timeline sounds like the way to go when you need to work with many effects.

TweenMax.to(btn1, 0.7, {  fontSize: 24,  autoRound:false,  ease:"Power4.easeInOut" });
TweenMax.to(btn1, 0.9, {  fontSize: 20,  autoRound:false,  ease:"Power3.easeInOut", delay:0.7   });

July 21, 2016

Thanks for the tip Jonathan. So for comparison's sake I have my original codepen of fontSize animation

as well as the GSAP fontsize animation

The original animation uses jquery and defaults ease to a "swing" aka easeInOut (slow begin/end, fast middle)

 $(".btn1").animate({fontSize: "24px"},700);
 $(".btn1").animate({fontSize: "20px"},900);

The GSAP method is shown below, the 0.7 delay on the 1st tween is the time it takes prior animations

to complete that are not shown here.

 TweenMax.to(btn1, 0.7, {  fontSize: 24,  autoRound:false,  ease:"Power4.easeInOut",  delay:0.7   });
 TweenMax.to(btn1, 0.9, {  fontSize: 20,  autoRound:false,  ease:"Power3.easeInOut",  delay:1.4   });

Original Codepen without GSAP:

See the Pen rLJPkq by KerryRuddock (@KerryRuddock) on CodePen

And with GSAP here:

See the Pen QEmAwZ by KerryRuddock (@KerryRuddock) on CodePen

I am not sure why, but the GSAP fontSize animation seems so different to the original....

its almost like there is a pause between the swell and retract effects, yet I think I have

the delays set correctly. Ideas anyone?

BTW: I will be showing this example ALOT as I progress with GSAP.

July 21, 2016

I was about to post the same question as Snoop. The RGBA acronym and CSS3 property of the same name

defines the acronym as Red, Green, Blue, and Alpha. Where alpha channel is also called the opacity channel.

I kept seeing the term autoAlpha in the GreenSock ActionScript API Docs and I am glad I found this discussion.

July 21, 2016

That fixed it. Thank you so much for getting back to me so quickly. Excellent.

July 20, 2016

Hi Guys,

So I am re-coding my work to use the GSAP TweenMax.js library and notice that

an animation effect that I had previously coded with fonts is no longer working.

I have a few html <buttons> that I was using this jquery code on to make the fontsize swell and retract

  $(".btn1").animate({fontSize: "24px"},700);
  $(".btn1").animate({fontSize: "20px"},900);

I switched it over to use GSAP, but this doesn't seem to work.. Sorry I don't have a codepen for this.

  TweenMax.to($(".btn1"), 0.7, { fontSize: 24, delay:4 });
  TweenMax.to($(".btn1"), 0.9, { fontSize: 20, delay:4 });

I have only played with GSAP for less than day, but seem to have other effects working, but I am not sure

why the code above doesn't work. Oh BTW, I did try the string version as shown below this line, as well.

  TweenMax.to($(".btn1"), 0.7, { fontSize: "24px", delay:4 });
  TweenMax.to($(".btn1"), 0.9, { fontSize: "20px", delay:4 });

On a seperate note, I was reading about CSSPlugins with TweenMax, I am using version 1.8.5 of TweenMax so I don't

think I need to do anything special in regards to using the CSSPlugin, in my code?

Thanks for your help.

July 20, 2016

Thanks Carl, I will check out your links.

Yeh my demo doesn't have the clickable events on balls yet, but it did illustrate the ball movement that I want to achieve

when I switch over to GSAP. Thanks again.

July 19, 2016

I'm a newbie to Web Development and in the process of learning if GSAP can fill my animation needs.

I am pretty sure it can.

This is my second post. In my first post, I mention I am currently taking an E-course and I am in the middle

of creating a javascript reaction tester application:

To view the codepen correctly, please change the View to Full Page. Click Start.

A random sized and colored ball rotates around the screen based on a set of CSS keyframes: twirl

This codepen is HTML, CSS and JS only, no GSAP just yet. The code is a collection of tests in CSS and Javascript.

Not all of the code is used within my application, I am experimenting. Apologies for any code read-ability issues.

I need to know if I can do the following with GSAP and perhaps a hint in the direction to go in.

In this topic, I use the word 'tweened' to cover any object that is the middle of animation, transition,

transform, keyframes, and any other time/movement speciality that I may have missed..

1) I will be changing the reaction tester animation to GSAP I hope the switching over goes smooth.

My goal is to have a 'tweened' object collision detection checking in real-time. The collision may be

against a border or perhaps another 'tweened' object.

I need to perform real-time interval checks of the shapes x,y position of the object during a 'tween'. Can I do this?

On a mouse-event, ie. object.click(), I need to kill any tween any progress. Can I do this?

On a collision-event, I need to either be-able to either a) kill 1 or more tweens and start new tweens, or

modify the existing tween that is currently running. Am I able to do either a or b or both?

Thanks for your time, Looking forward to your feedback.

See the Pen rLJPkq by KerryRuddock (@KerryRuddock) on CodePen

July 19, 2016

A great story Craig. very humble and inspiring.

I have been a forum lurker and have restarted my tech career after a 4 year absence from being a senior programmer

of legacy code. Like yourself I am older and haven't had much use for javascript or anything to do with web development

until I made a career decision to get back into the game and take an E-course in Web Development that I am currently taking

online. I have completed HTML and CSS, sections of the E-course, but javascript section of the course is coming along deliberately slow, (At least I keep telling myself that.)

(I will get to where GSAP fits in a moment)

The last exercise, in my javascript section, I am required to make something called a reaction tester...

The scope of the project is to create circles that display randomly on a webpage and then make the circle disappear,

when the user to mouse-clicks on the circle. A reaction-time is then displayed to the user.

I thought to myself, wouldn't it be cool if I could animate circles and bring this application to life.

After 'googling' many topics such as css3 transitions, transforms, and animations and viewing other approaches that seemed

to bulky and/or required a level of javasript sophistication that I wasn't about to achieve anytime soon. I came across GSAP.

and while I haven't tried implementing GSAP into my code yet, I have watched a few GSAP videos, GSAP codepen demos,

and I am lurking in the forums.

GSAP looks incredible and I want to start playing with it ASAP, yes that is the correct word... PLAYING

I am about to create my 2nd post in a moment to see if it is possible to achieve what I dream. (Craig, your story

rightfully deserves a response, and gets my 1st post honor.) I hope that yourself, or any other GSAP Superheroes,

or fellow lurkers can help me accomplish what I want to achieve with GSAP. See you very soon.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by KerryRuddock