How to add some custom animation when Scroll with caroufredsel?

Question

I want to add some custom animation when the thumbnails scroll. From example when the user clicks on the next button I want for the thumbnails that leave the screen to Fade out and the thumbnails that appear on the screen Fade In.

From the examples I know that this is the function to use:

 onBefore: function( data ) {}

Fiddle link

Here is a Demo without the custom animations.

Example

Something similar to this.

Answer 1

Here I manage to animate Fade and Size but there is a bug yet. The images to not come back to visible.

Added:

var defaultCss = {
    opacity: 0,
    width: 0,
    height: 0
};
var selectedCss = {
    opacity: 1,
    width: "77px",
    height: "77px"
};    
var scroolItems = 6;

And:

scroll: {
            items: scroolItems ,
            duration: 1000,
            onBefore: function( data ) {
                data.items.old.find('img').animate(defaultCss);
                data.items.visible.eq(scroolItems ).find('img').animate(selectedCss);
            }
        }

Demo link