Translate element by constant amount with CSS for smoother animation?

Question

Is it possible to translate an element by a constant amount with CSS? For instance, we want to move a div in 50 pixel increments up the screen. Right now, we use update the translate value manually, but this creates a choppy effect.

Here's the code, where translate equals a value that increments by 50 every time this line is called:

$(element).css( '-webkit-transform', 'translate3d( 0, ' + translate + 'px, 0)' );

We need this work on mobile devices so we can't use jQuery animate because it is not smooth enough (in our experience) on mobile. We need to translate by a constant amount because we need to track the element's position so we call the translate code every X ms.

Why not just set the `animation-timing-function` and `animation-duration` properties appropriately? — robertc, May 19 '14 at 17:21
@JayBlanchard Yes, that is our code that we tried. What do you mean exactly? — Crashalot, May 19 '14 at 17:21
@robertc We need to keep track of our position so we call the translate line every X ms. — Crashalot, May 19 '14 at 17:22
`element.style.webkitTransform='translate3d( 0, ' + translate + 'px, 0)'` inside a `setinterval` loop? — Jo E., May 19 '14 at 17:24
Right, I'm asking why? What else do you need to do apart from the translating? — robertc, May 19 '14 at 17:24
@Deadpool Yes, that's what we're doing now, but it's too choppy. — Crashalot, May 19 '14 at 17:24
@robertc We need to keep track of the element's position. That's the only reason we do it this way. Is there a better way to animate an element while tracking its position? Thanks! — Crashalot, May 19 '14 at 17:25
OK, let me try asking the same question in a different way: What are you doing with the element's position information that isn't related to the animation itself? — robertc, May 19 '14 at 17:27
Why do you need to track the element's position? What are you doing with that number? — kmoe, May 19 '14 at 17:28
@robertc Gotcha. We use the element's position to track collisions with another element. So the root problem is how to animate elements while detecting collisions. — Crashalot, May 19 '14 at 17:28
@kmoe We use the element's position to track collisions with another element. So the root problem is how to animate elements while detecting collisions. — Crashalot, May 19 '14 at 17:28
@Crashalot ah, gotcha. There are a couple of questions on SO about that problem - have you seen http://stackoverflow.com/questions/6837167/jquery-animate-collision-detection ? — kmoe, May 19 '14 at 17:31
OK, then instead of constantly firing off repeated animations I'd just set one animation with appropriate values, then [detect the current position](http://stackoverflow.com/q/8920934/8655) in your loop rather than trying to do the animation in it. — robertc, May 19 '14 at 17:33
@robertc Hmmm, thanks. We read elsewhere on SO that you couldn't retrieve the position since translation isn't actually affecting the element's positioning in the flow. — Crashalot, May 19 '14 at 17:35
@robertc Never mind. We actually tried this, and it works. The other SO posts must have been wrong. Could you post this as an answer? Thanks! — Crashalot, May 19 '14 at 17:44
[This seems to work](http://jsfiddle.net/robertc/sJaMV/76/), when animating CSS properties — robertc, May 19 '14 at 17:44
@robertc Yup we tested ourselves and found that the other SO posts must have been wrong. Could you post this as an answer? — Crashalot, May 19 '14 at 17:51

score 1 · Accepted Answer · edited May 23 '17 at 10:26

Instead of constantly firing off repeated animations I'd just set one animation with appropriate values, then detect the current position in your loop rather than trying to do the animation in it. This updated example from the linked question seems to indicate it would work.

You may want to interrogate the transform property to get the current translation values if they're going to be more complex than simple top/left. You should get a value that looks something like this:

matrix(1, 0, 0, 1, 0, 300)

score 0 · Answer 2 · answered May 19 '14 at 17:35

There are several jQuery plugins that extend the animate method to use CSS3 and make animations very smooth on mobile devices.

I've used in the past a couple of plugins, don't remember the ones I used, but a quick Google search gave me this one:

http://ricostacruz.com/jquery.transit/

It would be something like this:

$(element).transition({ y: '+=50' });

Translate element by constant amount with CSS for smoother animation?

2 Answers2