Halting a translate3d transition

Question

I have a scrolling text div that I would like the user to be able to pause and resume with the click of a button. Here's how I'm creating the transition:

words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length-4))+"px, 0px)";
words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";

I've tried to set the transform to "none" in the pause function, but that just makes the div scroll back to where it previously was. It's the equivalent of doing translate3d(0px, 0px, 0px). Is there a method to simply pause the current animation, or would I have to somehow measure the current transition position?

Update: Here's a jsfiddle: http://jsfiddle.net/VAgXF/1/

Answer 1

Edit based on live example

Try this demo instead

You can use WebKitCSSMatrix in your case to get the translate3d values. I don't know all the selectors for it, but e is x and f is y , so this bit of code works since you don't change the z

var words = document.getElementById("words");
var speed = 10;
words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length))+"px, 0px)";
words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";

var paused = false;
document.getElementById("button").onclick = function() {
  if(!paused) {
    var translated3D = new WebKitCSSMatrix(window.getComputedStyle(words, null).webkitTransform);
    words.style.webkitTransform = "translate3d(" + translated3D.e + "px, " + translated3D.f + "px, " + 0 + "px)";
    paused = true;
    button.innerHTML = "Start";
  } else {
    paused = false;
    button.innerHTML = "Stop";
    words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length))+"px, 0px)";
    words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";
  }
}

That being said I would avoid transform3d for some this simple, it over complicates the issue.