title: Animate translate on scroll
body: <p>I am trying to animate translate(X, Y) when a user scrolls. I have all the scrolling functionality implemented, it just looks horrible as the switch is instantaneous. </p>
  
  <p>I cannot seem to figure out how I can animate the translate.</p>
  
  <p>On load, my container has the value <code>-webkit-transform: translate(0%, 0%);</code>, to go to the second 'slide' it'll be changed to <code>-webkit-transform: translate(0%, -100%);</code></p>
  
  <p>I am just doing this through jQuery:</p>
  
  <pre><code> $('.container').css({"transform":"translate(0%,-" + positionY + "%)"});
  </code></pre>
  
  <p>I want to replicate the animation here: <a href="http://www.apple.com/uk/iphone-5s/" rel="nofollow">http://www.apple.com/uk/iphone-5s/</a></p>
  
  <p>(Note: I use translate(x, y) for moving side ways later on.)</p>