Question

I am writing a small jQuery animation script that simulates a delivery man walking up to a door. The animation works and all, but it just looks so artificial. I’m wondering if there is a way to make the sprite sort of bob back-and-forth to give the impression he is actually walking. I would hate to think the only way to do this would be to plot all the points – I’m hoping there is some sort of plugin out there that might be able to simplify this.

JSFiddle Demo (You’ll need a wide monitor, the scene is 1102 px Wide)

Does anyone know of one?

HTML

<div class="indexHeader">
    <img src="http://img705.imageshack.us/img705/2410/deliveryman.png" class='deliveryMan' />
</div>

CSS

.indexHeader{
    width:1102px;
    height:367px;
    background:url(http://img839.imageshack.us/img839/3298/indexheader2.png);
    overflow:hidden;  
}

.deliveryMan{
    position:relative;
    width:415px;
    height:520px;
    top:0px;
    left:450px;    
}

jQuery

$('.deliveryMan').animate({
    'left': '+=310px',
    'top': '+=30px',
    'width': '275px',
    'height': '344px'    
}, 4000);

Answer 1

My effect is still not quite there, but it’s getting close.

1. Add the jQuery easing plug-in
2. Put the easeInOutBounce easing into your animation, but only to the “top” property

here is the jquery

$('.deliveryMan').animate({
    'left': '+=310px',
    'top': '+=30px',
    'width': '275px',
    'height': '344px'    
}, {
    duration: 4000,
    specialEasing: {
      top: 'easeInOutBounce'
    }
});

Try playing with the parameters.

http://jsfiddle.net/Hm7ZQ/