Animate translate on scroll

Question

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.

I cannot seem to figure out how I can animate the translate.

On load, my container has the value -webkit-transform: translate(0%, 0%);, to go to the second 'slide' it'll be changed to -webkit-transform: translate(0%, -100%);

I am just doing this through jQuery:

 $('.container').css({"transform":"translate(0%,-" + positionY + "%)"});

I want to replicate the animation here: http://www.apple.com/uk/iphone-5s/

(Note: I use translate(x, y) for moving side ways later on.)

Answer 1

Use the CSS transition property to get a smooth effect.

.container {
    transition: transform 1s;
}

(You also need vendor prefixes to target all browsers.)

See also this MDN article for more examples and a tutorial: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions