getting current CSS3 Translate in animation

Question

Hi I would like to know how to get the current TranslateX of a css3 animation.

I have this animation:

@-webkit-keyframes pictureTransition {
    from,5% {-webkit-transform:translateX(0px);}
    10%,25% {-webkit-transform:translateX(-1024px);}
    30%,45% {-webkit-transform:translateX(-2048px);}
    50%,65% {-webkit-transform:translateX(-3072px);}
    70%,85% {-webkit-transform:translateX(-4096px);}
    90%,to {-webkit-transform:translateX(-5120px);}
}

and I have a button that when clicked, will get the current translateX in the animation and save it in a variable for further use. Any ideas?

score 4 · Answer 1 · edited Oct 08 '15 at 00:06

4

You should be able to get the current translateX value with this:

var transformX = new WebKitCSSMatrix(window.getComputedStyle([YOUR ELEMENT HERE]).webkitTransform).m42;

This way you don't have to split the string and all that jazz... m42 is the matrix value for X, m41 is the matrix value for Y

See this link for more info.

edited Oct 08 '15 at 00:06

TheMadDeveloper

1,587
15
28

answered Mar 15 '13 at 01:45

Trevor Lundeen

199
2
3

score 4 · Accepted Answer · edited May 23 '17 at 12:01

4

Here is how I would do it: http://jsfiddle.net/joshnh/dCSBU/

Code used from: Get the value of -webkit-transform of an element with jquery

edited May 23 '17 at 12:01

Community

1
1

answered Feb 10 '12 at 03:22

joshnh

8,374
4
35
53

getting current CSS3 Translate in animation

2 Answers2