title: How to keep a value updated inside a TimelineMax?
body: <p>I need that a function which gets me the value needed for a displacement to be executed every time the line is called.
  If I use <code>line.play()</code> or <code>line.reverse()</code> the value is cached, and the function is not called. How can I make it call this function everytime ( but not re-creating the timeline altogether everytime)?</p>
  
  <p>Here is the code:    </p>
  
  <pre class="lang-js prettyprint-override"><code>var line;
  
  var getLeftPosition = function() {
      return ($("body").width() - $("#dvCart").width()) + "px";
  }
  
  $("#btnCart").click(function () {
  
      if (!line) {
          line = new TimelineMax()
              .to("#dvCart", .1, { display: "block" })
              .to("#dvLock", .7, {
                  backgroundColor: "#fff",
                  opacity: 0.5,
                  filter: "alpha(opacity=20)",
                  width: "100%",
                  height: "100%",
                  top: "0",
                  left: "0",
                  position: "fixed",
                  display: "block",
                  ease: Power3.easeInOut
              })
              .to("#dvCart", .5, {
                  "left": getLeftPosition(),
                  ease: Power3.easeInOut
              });
  
          $("#dvLock").click(function () {
              line.reverse();
          });
      }
      else {
          line.play();
      }
  });
  </code></pre>
  
  <p>To help the reading:    </p>
  
  <ul>
  <li>when clicked a first time, I want it to initialize the timeline;    </li>
  <li>every other time, it will just play the timeline;    </li>
  <li>when the <code>dvLock</code> is clicked, the shopping cart needs to disappear;</li>
  <li>the <code>dvLock</code> is a div that is placed behind the cart, to lock the screen;    </li>
  <li>the <code>dvCart</code>is a div that will contain a bunch of selected items;</li>
  </ul>