CSS3 - Animating margin-left property through JavaScript?

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.

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: click this to transition the 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).

Sounds nice. Can you elaborate on your code. I'd like to see a working example.

– roosteronacid Jul 4 at 19:25 Here's a fiddle. I use the jQuery history plugin in the onClick of the anchor with a regular fragment href to fall back on in case the user has JS disabled. Notice that as a result, using the "back" button will cause the transition to trigger again.

Looks pretty slick, and way simpler than using jQuery. – Doug Stephen Jul 5 at 15:11 I was just about to accept your answer, but I've recently found out that only SOME of the CSS3 spec is hardware-accelerated. Seeing as my original goal was to avoid "laggy" animations through JavaScript-only frameworks, could you update your code to take advantage of translate3d()?

– roosteronacid Jul 10 at 20:36 @roosteronacid ta-da! Notice I used translateX, since this is what the margin transformation was using. If you really, really wanted to use translate3d() for whatever reason, then replace both of the -webkit-transform defs with webkit-transform: translate3d(yourValue, 0, 0) – Doug Stephen Jul 10 at 22:09 Accepted your answer, and added info on accessing and setting the mentioned properties through JavaScript.

Thanks for the effort mate. – roosteronacid Jul 10 at 22:31.

Better use transitions, that are almost cross-browser supported (except IE), and set the keyframes through JS.

This works using CSS, HTML and WebKit only: #wrapper { width: 700px; text-align: left; border-radius:10px; -moz-border-radius:10px; border-style:solid; border-width:1px; border-color:#ccc; padding:30px 30px; -moz-box-shadow: 0px 0px 5px #BBB; -webkit-box-shadow: 0px 0px 5px #BBB; box-shadow: 0px 0px 5px #BBB; -webkit-transition-property: -webkit-transform, margin-left; -webkit-transition-duration: 3s; -webkit-transition-timing-function: ease-in; -webkit-transform: translate(100px); } Just make a Placeholder text in an HTML file to test it out. Worked for me in Google Chrome 12.0.742.112 and Safari 5.0.5 (6533.21.1). If it doesn't do the animation right away, it may be due to your browser processing the translation too quickly (or caching, perhaps?).

You might consider adding a delay somehow. I just pressed the refresh button a few times really fast. Worked for me.

Edit: Check out the source behind girliemac's test page. Some insightful stuff there. Also see this SO post.

You can use jqueries .animate() - api.jquery.com/animate/ Check my example - jsfiddle.net/ajthomascouk/jS83H/ - Press the + and.

Animating css margins with jQuery works like this: $( '#mydiv' ). Animate({ 'margin-left': 'new margin value' }).

To use webkit's css animations, you'd create a class that has the transform property, then you can use jQuery to add/remove said class as needed.

You can set a transition in css3, and then subsequent changes to the element will be animated. . MY_CLASS { -moz-transition: all 0.3s ease-out; /* FF4+ */ -o-transition: all 0.3s ease-out; /* Opera 10.5+ */ -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ -ms-transition: all 0.3s ease-out; /* IE10 */ transition: all 0.3s ease-out; } This specifies a nearly cross browser (damn IE) transition that applies to all css changes, lasts 0.3 seconds and eases, so it will slow down towards the end of the transition.

Therefore, to animate it to the left/right, simply change the css: $(". MY_CLASS"). Css("margin-left", "-300px"); Note this will animate it to a fixed position of 300px, if you want to animate to a position relative to its current location use: var mleft = $(".

MY_CLASS"). Css("margin-left"); var newleft = mleft. Substr(0, mleft.

Length-2) + 50; $('. MY_CLASS'). Css("margin-left", newleft+"px"); See a working example here (jsFiddle).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.