Question

I am not sure if Spry is just smoother than jQuery but I can never get my animations as smooth as http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html

I perform my animations as follows:

 $("#button").click(function (e) {
    $("#thediv").css('margin-left',$(window).width + 10 + 'px');
    $("#thediv").animate({
       'margin-left' : '0'
   },100);
 });

I have tried playing with the easing, lowering the framerate using a plugin, adjusting the ms. Does Spry do anything different? As far as Im aware it manipulates the DOM like jQuery. What are ideal animation settings to create smooth “slide from left” div transitions. The web app is for a mobile phone and the div switcing is for switching between views.

Answer 1

Yes you can get exact effect: Working demo :) http://jsfiddle.net/FjgjE/ or http://jsfiddle.net/YWcgw/

Use these js and css files and rest html and full js code is in demo.

Please lemme know if I missed anything!

Hope it helps your cause :) rest feel free to play around with the demo.

scripts

<link href="http://labs.adobe.com/technologies/spry/css/samples.css" rel="stylesheet" type="text/css" />
<script src="http://labs.adobe.com/technologies/spry/includes/SpryEffects.js" type="text/javascript"></script>

code

   var animation_start = function(){
        var button = document.getElementById('animation_button');
        if (button){
            button.disabled = true;
            button.style.backgroundColor = '#FFF';
        }
    }

    var animation_stop = function(){
        var button = document.getElementById('animation_button');
        if (button){
            button.disabled = false;
            button.style.backgroundColor = '';
        }
    }

    var slide_func = new Spry.Effect.Slide('slideIt', {toggle:true, setup: animation_start, finish: animation_stop});​