title: Click animation using GSAP
body: <p>So this is a GIF of the effect I want to accomplish: <strong><a href="https://gyazo.com/732fdf564f4cd403cfd75d40299860ba" rel="nofollow">Link</a></strong>.</p>
  
  <p>Sorry about the lack of quality of the GIF but it was the best I could do. So, this the code that gets executed when I click the 'Next Task' button:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var tasks = [
    ["First Task...", 2],
    ["Second Task...", 4],
    ["Third Task!", 6]
  ];
  
  function nextTask() {
    var previousText = $("#taskText").text();
    $("#nextTaskButtonWhite").remove();
    $("body").append("&lt;div id='nextTaskButtonWhite'&gt;&lt;/div&gt;");
    $("#nextTaskButtonWhite").bind("click", nextTask);
    TweenMax.to("#nextTaskButtonWhite", 0.5, {
      opacity: 0
    });
    setTimeout(function() {
      $("#nextTaskButtonWhite").remove();
    }, 500);
    do {
      var randTaskNum = Math.floor(Math.random() * tasks.length);
      $("#taskText").text(tasks[randTaskNum][0] + tasks[randTaskNum][1]);
    } while (previousText == $("#taskText").text());
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*These are the classes and IDs I use*/
  
  .button {
    background-image: url("Pattern2.png");
    cursor: pointer;
    -webkit-transition: background-image 0.5s;
  }
  .button:hover {
    background-image: url("Pattern3.png");
  }
  #nextTaskButton {
    border: 5px solid #fff;
    font-size: 30px;
    width: 210px;
    height: 55px;
    position: absolute;
    top: 45px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
  }
  #nextTaskButtonWhite {
    border: 5px solid #fff;
    background-color: #fff;
    font-size: 30px;
    width: 210px;
    height: 55px;
    position: absolute;
    top: 45px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    cursor: pointer;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>For now it works, but it gets a little finicky and weird when I click the button lots of times in a row. My question is: using <strong>GSAP</strong> and <strong>jQuery</strong>, is there a way to make this work well in a simpler way? Possibly not having to use a second white button to do it?</p>
  
  <p>Thanks to anyone that answers!! :-)</p>