Question

Considering this proof of concept, would it be possible to animate margin-left (both negative and positive values) through JavaScript?.. And how would you go about doing so?

Note: I know this is WebKit-only. And I’m fine with that, seeing as I am developing for iOS Safari.

Update

Thanks for the answers, but jQuery’s animate function doesn’t support pure CSS animations, which is what I need.

Answer 1

I know that you specifically say “can you do this in JavaScript”, but you shouldn’t need to use JavaScript. I’m fairly certain that the proof of concept you link to only uses jQuery as a way to make the animations fall back to JavaScript so that all browsers play nice with the animation. Since you’re specifically developing for Mobile Safari, you shouldn’t need to use jQuery for this except to use a history plugin to push and pop states to make the browser’s back button work; this is entirely doable via CSS transition properties and the :target pseudo-selector.

So as an alternative, you should be able to do something like this:

In HTML:

<div id="thing-that-will-transition">
    <a href="#thing-that-will-transition>click this to transition the div</a>
</div>

In CSS:

#thing-that-will-transition
{
    (bunch of properties)
    -webkit-transition: margin-left [the rest of your transition values]
}

#thing-that-will-transition:target
{
    margin-left: [your properties]
}

As long as your fragment URL matches up with the name of the element that you want to transition then you should be able to push the fragment in to the URL using JavaScript if you absolutely have to instead of using anchor with a fragment href while still having the transition take place. And if you use a jQuery history plugin or do your own pushing and popping of the history stack then you still get back-button behavior for your app.

I know you specifically asked for a JavaScript solution to trigger the CSS animation, but I’m just not sure why this is what you need. Sorry if this doesn’t help you at all.

UPDATE: Here’s a jsFiddle demonstrating the above. It uses this jQuery history plugin to manage the history stack, so that you can still get acceptable back/forward button behavior from the fragment URL’s. The anchor tag uses the plugin’s “push” or “load” method in its onClick with a standard fragment in the href attribute as a fallback for browsers without JS enabled.

UPDATE 2: Here’s another jsFiddle that uses transforms/translations instead of transitions.

UPDATE 3 (by roosteronacid):

And as for getting the animations going through JavaScript, you can do:

var element = document.getElementById("...");

setTimeout(function ()
{
    element.style.webkitTransitionDuration = "0.3s";
    element.style.webkitTransitionTimingFunction = "ease-out";
    element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);